一、ES6简介与特性
ES6全称为:ECMAScript 6.0,也叫ES2015.
ES指的是JS的核心ECMAScript部分(除BOM+DOM外),我们之前学的是ECMAScrip5,数字6表示版本号。ES5版本在2009年成为标准,ES6虽然已经于2015年9月发布,但目前大部分浏览器均还在完善支持中,比如chrome浏览器支持度已经达到了99%以上。
ES6通常指的是ES6及ES6以后的版本,ES每年都会发布一个新的版本,比如今年的ES2022(尚未发布)。
目前有两种方式解决这种兼容性问题:
- 使用在支持ES6的设备上
- 使用语法解析转换工具,把我们写的 ES6 语法转换成 ES5,常用的工具有 babel,jsx,traceur,es6-shim 等
学习ES6是为接下来的前端工程化、构建化做准备,为node.js和vue.js做准备。
总结:ES6给人的感觉越来越像java这种后端语言了,所以才会有node.js这种可以让JavaScript做服务器端开发的平台。
二、ES6声明变量的方式let、const
- let:声明变量的另一种方式
特点:
1、是块级作用域,无论在哪里声明,都只能在所包含的作用域内访问,比如函数和代码块({}这种形式)都可以形成块级作用域
2、在同级作用域内,不能重复声明,多个层级嵌套,只在最接近的{}内有效
3、没有变量提升,也就是没有预解析,必须要先声明再使用(即所谓的暂死区,变量没执行时是不会被扫描到的,必须执行到才会将变量释放并可用)
//注意: 1、var a=10; let a=1; //这种也是重复声明。不允许,违背了第2条规则。 2、for(let i=0;i<5;i++){ let i=10;} //这是允许的,可以认为()内的是主作用域,而{}是次作用域,不算重复声明。该函数的结果是会打印5次10,但如果{}内的let不要,那么则只会打印1次10,因为循环不满足条件,跳出了。
总结:有了以上特性,意味着之前使用闭包才能留住当前循环的那个值现在可以使用let即可,不再需要闭包了。
- const:声明常量
特点:
1、声明时必须要赋值,且该值不可改变
2、是块级作用域。同let
3、对于对象,不能改对象本身,但可以改里面的属性值,也就是只能通过访问的方式改属性值。类似于指针,不能改变地址,但能改变里面的值
4、建议使用大写字母来命名
// 比如希望π的值是不变的 const Pi=3.14; //比如希望ajax对象是不会被更改的 const xhr=new XMLHttpRequest(); //使用const声明的变量,对象不能修改,但是对象里面的属性可以修改 const Obj={ name:"张三" } // obj=123; obj.name1="李四";
三、ES6解构赋值
含义:按照一定模式,将数组或对象中提取值(结构拆开)用于给变量赋值。
通俗讲就是将一个结构给解开,用于给变量或属性赋值。也就是解构在左边,赋值在右边。
1.数组的解构赋值。(使用[]进行)
之前定义多个变量需要分别进行。而现在可以像数组那样批量声明和赋值变量。
例子1:
let [a, b, c] = [1, 2, 3]; //等价于let a=1,b=2,c=3; let [a, b, c, d] = [1, 2, 3]; //等价于let a=1,b=2,c=3,d=undefined;
例子2:在左边可以给变量默认值
let [a, b, c=5] = [1, 2]; 等价于let a=1,b=2,c=5; //注意:如果同时给了默认值和初始值,那么初始值会替换默认值 let [a, b, c=5] = [1, 2, 3]; //等价于let a=1,b=2,c=3 即c不会等于5,而是等于3
例子3:可以使用逗号省略变量名
let [a,,c] =[1,2,3]; 此时相当于let a=1,c=3
注意:左右两边必须要有中括号,才是解构赋值,如果左边有,右边没有则会报错。
2.对象的解构赋值(使用{}进行)
可以使用一个let声明批量定义多个对象。左边的变量名必须要在右边也出现相同的属性名。且没有顺序之分。
例子1:
let {foo,bar}={foo:"abc",bar:"123"}; //结果都一样 let {bar,foo}={foo:"abc",bar:"123"}; //结果都一样 //以上例子中的foo,bar对应的是右边的同名属性所代表的值,即相当于是foo="abc",bar="123" 如果是要给一个对象,则在右边的值需要写对象的形式: let {foo,bar}={foo:{},bar:{}};
注意:匹配设置对象后,可以通过左边的变量名来访问右边对象的属性或方法,但是不允许在同级作用域中再次出现重复命名。即:
let {foo,bar}={foo:"abc",bar:"123"}; let foo=10; console.log(foo) // 报错,不允许重复声明。因为foo已经被声明了。
例子2:默认值
let {fun,isEnd,say,isArray=function(){}}={ fun:function(){ }, say:function(){ }, isEnd:function(){ } }; //右边没有对应的,那么可以在左边这里给其添加一个默认值,当然其他的也可以,右边优先级要大于左边的。
例子3:批量设置多个对象
let {aaa,bbb,ccc} = { aaa:{ //对象1 }, bbb:{ //对象2 }, ccc:{ //对象3 } }
总结:对象的结构赋值,右边的属性值可以是任意类型的数据。
3、字符串的解构赋值
字符串之所以能够解构赋值,是因为字符串被转换成了一个类似数组的对象。
例子1:
let [a, b, c, d, e] = 'hello'; //此时:a=h,b=e,...
4、函数参数的解构赋值
例子1:
函数add的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x和y。
function add([x, y]){ return x + y; } add([1, 2]); // 3
例子2:参数是对象的情况(d=5为默认值)
function fun({a,b,c,d=5}){ console.log(a); console.log(b); console.log(c); } // 调用 fun({ a:1, b:2, c:3 });
总结:形参相当于是左边,实参相当于是右边。函数体中对应的变量,相当于是在访问结构赋值。
相关单词
- let 让,出租
- const 常数 constant