十分钟带你看一遍ES6新特性
let , const关键字
var
看习惯了java, 看js真的是忍不住想笑,比如说这个var,它太自由了,自由到{}根本限制不住它的生命周期
js的var关键字,无论在何处声明,都会被视为声明在函数的最顶部,不在函数里面的就被视为在全局的最顶部,这就是所谓的变量提升
function aa(bool) {
if (bool) {
var test = "hello";
} else {
console.log(test);
}
}
aa(false);
比如上面的代码, 他就不会报错,而是说undifined, 因为var的变量提升, 相当于下面那样:
function aa(bool) {
var test;
if (bool) {
test = "hello";
} else {
console.log(test);
}
}
aa(false);
let
换成let关键字,就是普通变量, 它的生命周期被限制在 { }
function aa(bool) {
if (bool) {
let test = "hello";
} else {
console.log(test);
}
}
const
const 声明常量, 值不允许被修改,而且必须初始化
function aa() {
let a = 'abc';
const test = a;
a = "world";
alert('a=='+a);
alert('test=='+test);
}
aa();
结果就是 abc world
如果尝试直接对test赋值, 编译器会报错的
模板字符串的拼接
这样取值完全没问题, 但是js的设计者认为他 + 太多了,low爆了
console.log(name1 + "喜欢" + name2);
于是: ${} , 注意啊, 是esc下面的键位
console.log(`${name1}喜欢${name2}`);
方法入参的默认值
如果我们不给入参传值, 默认就是空, 一用就报错, 所以参数需要默认值是很有必要的
这时候, 用户传递进来值了,使用的就是用户传递进来的值, 在java中想干这个事,得在参数位置加老长的注解
function sayName(name = "张三") {
alert(name);
}
箭头函数
es6的箭头函数和java8的lambda表达式如出一辙, 因为学了java8, 所以es6的箭头函数也是秒上手了, 包括流式的操作也如出一辙
对象的简写和解构
原来,如果方法想返回一个对象,需要这样写
function people(name, age) {
return {
name: name,
age: age
}
}
在es6中,如果属性和值相同 ,就变成了这样
function people(name, age) {
return {
name,
age
}
}
动态的添加属性, 在java想都别想,
let p = {name: '张三', age: 680};
alert(p.name);
alert(p.age);
- 添加属性
p.address = '山东';
- 添加函数
p.add = () => {};
其实js这么自由也不一定是好事, 起码不能乱点了, 它也不给报错, 一不留神就多了个属性
组装对象或数组SpreadOperator ...
const color = ['red', 'blue'];
const colorful = [...color, 'green']
// 现在 colorful数组就是 三个颜色的数组 , 同样换成{} 也一样
Import 和 export
这个特性vue用的最多, 模块化的感觉很强烈
let fun = function () {
console.log("fun")
}
export {fun}
// 在第二个文件 导入
import fun from "./fun";
// 然后使用
fun()
面向对象的编程模式-类
class person {
// 构造函数
constructor(name) {
this.name = name; // 不提前定义变量? 不存在的,直接点就行了老铁
}
// 方法
sayHello() {
console.log("hello");
}
}
// 类的继承
class Student extends person {
constructor(name) {
super(name);
}
sayHaha() {
console.log("haha");
}
}
使用:
它并不能写 父类引用指向子类对象
//person stu = new Student('zhangsan');
var stu = new Student('zhangsan');
stu.sayHaha();
十分钟带你看一遍ES6新特性的更多相关文章
- 轻松学会ES6新特性之生成器
生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...
- 必须掌握的ES6新特性
ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...
- 前端入门21-JavaScript的ES6新特性
声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...
- 34.js----JS 开发者必须知道的十个 ES6 新特性
JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- ES6新特性简介
ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...
- 你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
随机推荐
- [hdu-6395]Sequence 分块+矩阵快速幂
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6395 因为题目数据范围太大,又存在递推关系,用矩阵快速幂来加快递推. 每一项递推时 加的下取整的数随 ...
- .NET Core IdentityServer4实战 第六章-Consent授权页
在identityServer4中登陆页面只要是成功了,就会注册一个Cookie在服务器资源上,像现在大部分的网站第三方授权,都是经过一个页面,然后选需要的功能,IdentityServer4也给我们 ...
- 生产力工具:shell 与 Bash 脚本
生产力工具:shell 与 Bash 脚本 作者:吴甜甜 个人博客网站: wutiantian.github.io 注意:本文只是我个人总结的学习笔记,不适合0基础人士观看. 参考内容: 王顶老师 l ...
- Javascript中escape(), encodeURI()和encodeURIComponent()之精析与比较
escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码字符串的三个常用的方法,而他们之间的异同却困扰了很多的Javascript初学者, ...
- 跟我学SpringCloud | 第九篇:服务网关Zuul初
SpringCloud系列教程 | 第九篇:服务网关Zuul初探 前面的文章我们介绍了,Eureka用于服务的注册于发现,Feign支持服务的调用以及均衡负载,Hystrix处理服务的熔断防止故障扩散 ...
- 分享SQL,查询用户最近一次购买时间间隔
(1)先创建一张测试表: CREATE TABLE `用户购买订单` ( `购买时间` datetime(6) NULL DEFAULT NULL, `用户` varchar(20) CHARACTE ...
- Atlassian In Action-Jira之指导思想(一)
太上,不知有之:其次,亲而誉之:其次,畏之:其次,侮之.信不足焉,有不信焉.悠兮,其贵言.功成事遂,百姓皆谓"我自然". --<道德经> 研发管理或者系统工具的指导思想 ...
- centos 5.2 php升级
# gedit /etc/yum.repos.d/utterramblings.repo [utterramblings] name=Jason's Utter Ramblings Repo base ...
- dockerfile 制作镜像
# Set the base image to UbuntuFROM ubuntu # File Author chenghanMAINTAINER chenghan ################ ...
- 从零开始认识Dubbo
目录 1.Dubbo是什么 2.Dubbo能做什么 3.Dubbo架构 4.Dubbo的使用方法 5.使用Dubbo可能遇到的问题 1.Dubbo是什么 http://dubbo.apache.org ...