es6经常使用语法和特性

简介

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

 

let 命令

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

一、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 声明的变量在编译后至关于被改为了其余变量，因此在外部是访问不到的。

二、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

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

 

二、对象的解构赋值

示例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) 调用，返回一个遍历器对象

 

箭头函数

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

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

二、箭头函数不能够看成构造函数

三、箭头函数不能够使用 arguments 对象，该对象在函数体内不存在。若是要用，能够用 rest 参数代替

四、箭头函数没有本身的 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);