你须要了解的ES6的新特性（前沿技术）

ES6新特性

最近在项目中遇到了不少ES6的语法，遇到了很多坑坑洼洼，所以，在这里就简单介绍一下ES6中的一些新特性

• 若是想真正的了解ES6和ES5有什么不一样，这里推荐看一下阮一峰的一本《ECMAScript 6 入门》
• 在我下面，主要介绍一下ES6标准下的let, const, "=>", "..."的介绍和用法

ES6背景介绍

ECMAScript 6.0（如下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言能够用来编写复杂的大型应用程序，成为企业级开发语言。

---

那么，ECMAScript 和 JavaScript 究竟是什么关系？

要讲清楚这个问题，须要回顾历史。1996年11月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给国际标准化组织ECMA，但愿这种语言可以成为国际标准。次年，ECMA 发布262号标准文件（ECMA-262）的初版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是1.0版

let命令

基本用法

ES6 新增了let命令，用来声明变量。它的用法相似于var，可是所声明的变量，只在let命令所在的代码块内有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

上面代码在代码块之中，分别用let和var声明了两个变量。而后在代码块以外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这代表，let声明的变量只在它所在的代码块有效。看到这里，是否是以为let和C语言还有其余语言的语言很像了呢，确实，其实原理基本都差很少。

使用注意

1. 不存在变量提高：var命令会发生”变量提高“现象，即变量能够在声明以前使用，值为undefined。这种现象多多少少是有些奇怪的，按照通常的逻辑，变量应该在声明语句以后才可使用。为了纠正这种现象，let命令改变了语法行为，它所声明的变量必定要在声明后使用，不然报错。

// var 的状况
console.log(foo); // 输出undefined
var foo = 2;

// let 的状况
console.log(bar); // 报错ReferenceError
let bar = 2;

1. 暂时性死区：只要块级做用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，再也不受外部的影响。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

1. 不容许重复声明：let不容许在相同做用域内，重复声明同一个变量。

// 报错
function () {
  let a = 10;
  var a = 1;
}

// 报错
function () {
  let a = 10;
  let a = 1;
}

1. 快级做用域：这个特性是我以为最奇怪的，本来javascript是做用域链的形式，为何平白无故要忽然改变了本身以前的主意呢。不过这个也很容易理解，有过C语言和C++等语言基础的就会很了解快级做用域

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

上面的函数有两个代码块，都声明了变量n，运行后输出5。这表示外层代码块不受内层代码块的影响。若是两次都使用var定义变量n，最后输出的值才是10。

---

const命令

基本用法

const声明一个只读的常量。一旦声明，常量的值就不能改变。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须当即初始化，不能留到之后赋值。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

使用注意

1. 仅仅保证地址不变const实际上保证的，并非变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，所以等同于常量。

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

---

箭头函数"=>"

基本用法

ES6 容许使用“箭头”（=>）定义函数

var f = v => v;

//等同于
var f = function(v) {
  return v;
};

使用注意

1. 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
2. 不能够看成构造函数，也就是说，不可使用new命令，不然会抛出一个错误。
3. 不可使用arguments对象，该对象在函数体内不存在。若是要用，能够用 rest 参数代替。
4. 不可使用yield命令，所以箭头函数不能用做 Generator 函数。

这里说一下最重要的第一点吧

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到100毫秒后。若是是普通函数，执行时this应该指向全局对象window，这时应该输出21。可是，箭头函数致使this老是指向函数定义生效时所在的对象（本例是{id: 42}），因此输出的是42。

---

数组拓展运算符"..." rest 参数

基本用法

扩展运算符（spread）是三个点（...）。它比如 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]

也能够运用于函数及其余

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

---

文中就简单介绍这么多，想更加了解ES6新特性的能够自寻查看一下阮一峰的一本《ECMAScript 6 入门》