es6常用语法和特性

Posted 2020-12-26 blog-cxj2017522

简介

　　首先，在学习之前推荐使用在线转码器 Traceur 来测试 Demo，避免 babel 下的繁琐配置，从而产生畏难情绪。

 

let 命令

　　在 ES6 之前，JS 只能使用 var 声明变量，或者省略 var，将变量作为全局变量，ES6 新增的 let 命令用法类似于 var，也是用于声明变量，不过它们具有以下区别：

1、let 命令声明的变量的作用域是块级作用域；var 命令声明的变量的作用域是函数级作用域，例如：

//ES6

{
  var a = 10;
  let b = 12;
}
console.log(a);  //输出10
console.log(b);  //输出undefined

//转码后的 ES5

{
  var a = 10;
  var b$__0 = 12;
}
console.log(a);
console.log(b);

可以看到，在块级作用域中用 let 声明的变量在编译后相当于被改成了其他变量，所以在外部是访问不到的。

2、let 命令不允许有重复声明的变量，并且变量只能在声明后使用，否则会报错，在块级作用域中，如果使用了 let 命令声明变量，那在声明之前称为这个变量的暂时性死区(temporal dead zone，简称 TDZ)，不受外部影响，不能被访问，例如：

//ES6

var a = 10;
{
  //TDZ 开始
  console.log(a);  //报错

  let a;  //TDZ结束
  console.log(a);  //输出undefined

  a = 123;
  console.log(a);  //输出123
}

在 ES6 标准中对 TDZ 有如下文字说明：

The variables are created when their containing Lexical Environment is instantiated but may not be accessed in any way until the variable’s LexicalBinding is evaluated.

意思是说由 let 声明的变量，当它们包含的词法环境 (Lexical Environment) 被实例化时会被创建，但只有在变量的词法绑定 (LexicalBinding) 已经被计算后，才能够被访问。

//转码后的 ES5

目前的编译器对 TDZ 并不会直接编译，因为 ES5 标准中原本就没有这种设计，所以看不到报错。

 

const 命令

　　const 命令用于声明一个只读的变量，必须在声明的时候初始化，初始化之后不得更改，除此之外，其他与 let 命令基本相同

 

解构赋值

1、数组的解构赋值：

//示例1

let [a,b,c] = [1,2,3];
console.log(a);  //输出1
console.log(b);  //输出2
console.log(c);  //输出3

//示例2，缺省的情况，如果右边缺省，那么左边对应缺省的变量值为 undefind；如果左边缺省，那么右边对应的值将被忽略

let [a,b,c,d] = [1,2,3];
console.log(a);  //输出1
console.log(b);  //输出2
console.log(c);  //输出3
console.log(d);  //输出undefined

let [e,,g] = [4,5,6];
console.log(e);  //输出4
console.log(g);  //输出6

//示例3，设置默认值，只有在右边对应的值严格为 undefined 时默认值才生效

let [a,b,c=4] = [1,2];
console.log(a);  //输出1
console.log(b);  //输出2
console.log(c);  //输出4

 

2、对象的解构赋值

示例1

let {a,b} = {a:‘aaa‘,b:‘bbb‘};
console.log(a);  //输出aaa
console.log(b);  //输出bbb

示例2，变量名与属性名不同

let {a:n1,b:n2} = {a:‘aaa‘,b:‘bbb‘};
console.log(n1);  //输出aaa
console.log(n2);  //输出bbb

示例3，设置默认值，只有在右边对应的属性严格为 undefined 时才生效

let {a:n1,b:n2=‘ccc‘} = {a:‘aaa‘,b:undefined};
console.log(n1);  //输出aaa
console.log(n2);  //输出ccc

示例4，因为数组也是一个对象，所以也可以使用对象的方式解构赋值

let {0:first,1:second,2:third,length} = [‘a‘,‘b‘,‘c‘];
console.log(first);  //输出a
console.log(second);  //输出b
console.log(third);  //输出c
console.log(length);  //输出3

示例5，字符串在解构赋值时作为一个类数组的对象，每一个字符对应数组中的每个元素

let [a,b,c] = ‘arg‘;
console.log(a);  //输出a
console.log(b);  //输出r
console.log(c);  //输出g

 

rest 参数和扩展运算符

　　ES6 引入了 rest 参数，形式为 (...变量名)，其中 rest参数搭配的变量是一个数组，可以使用数组的一切操作，主要用于获取函数多余参数，例如：

function test(a,...b) {
  console.log(b);  //输出[2,3]
}
test(1,2,3);

值得注意的是 rest 参数之后不能再有其他参数，否则会报错。

　　扩展运算符，形式为(...)，可以理解为 rest 参数的逆运算，用于将一个数组展开成用空格分隔的参数序列，例如：

let arr = [1,2,3];
console.log(arr);  //输出[1,2,3]
console.log(...arr);  //输出1 2 3

扩展运算符并不能用于展开对象中的属性，这是 ES7 提案，目前并不支持。

 

新的遍历方法 for...of

　　ES6 中新增了三个方法：entries()、keys() 和 values()，它们都返回一个遍历器对象，可以用 for...of 进行遍历，例如：

//数组的遍历

var arr = [‘a‘,‘b‘,‘c‘];
//entries() 用于对键值对进行遍历
for(let [i,e] of arr.entries()) {
  console.log(i + ‘,‘ + e);
}
//0,a
//1,b
//2,c

//keys() 用于对键名进行遍历
for(let i of arr.keys()) {
  console.log(i);
}
//0
//1
//2

//values() 用于对键值进行遍历
for(let e of arr.values()) {
  console.log(e);
}
//a
//b
//c

如果不使用 for...of 进行遍历，也可以手动调用 next() 方法进行遍历，例如：

var arr = [‘a‘,‘b‘,‘c‘];
var keyObj = arr.keys();
console.log(keyObj.next());  //输出0
console.log(keyObj.next());  //输出1
console.log(keyObj.next());  //输出2

　　

//对象的遍历

同数组一样，不过是挂载在 Object 对象下，调用方式是使用 Object.entries(obj) 调用，返回一个遍历器对象

 

箭头函数

　　箭头函数的形式为：() => { }，前面的圆括号是参数列表，后面的大括号是函数体，箭头函数和普通函数有以下几点不同：

1、箭头函数的 this 对象是定义时所在的对象，不需要等到运行的时候再去确定

2、箭头函数不可以当作构造函数

3、箭头函数不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替

4、箭头函数没有自己的 this 对象，所以也不能使用 apply()，call()，bind()，改变 this的指向

//ES6

function fun() {
  let arrowFun = () => {
    console.log(this.a);
  }
  arrowFun();
}

let obj = { a: 1 }
fun.apply(obj);

//转码后的ES5

function fun() {
  var $__1 = this;
  var arrowFun = function() {
    console.log($__1.a);
  };
  arrowFun();
}
var obj = {a: 1};
fun.apply(obj);