【自种树自乘凉】ES6 新特征总结要知道，做前端开发，ES6 是必学的。这篇文章适合初步入门和复习，结合阮一峰老师的《E

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

要知道，做前端开发，ES6 是必学的。这篇文章适合初步入门和复习，结合阮一峰老师的教程能够更深入的学习 ES6。

目录：

块级作用域、块级变量 let、块级常量 const

箭头函数

参数处理（默认参数/...）

模板字面量(模板字符串)

对象的扩展

解构赋值

模块（import/export）

类（class/extends）

Promise

End 感谢阅读

一. 块级作用域、变量 let、常量 const

由一对 { } 界定的语句叫做块语句，这在其他编程语言中叫做复合语句。

一般理解的块：

块：由 {} 包括住

if(){}：是一个块

for(){}：是一个块这些也可理解成块：

一个函数：函数作用域

script 标签：全局作用域

JS 中用 var 声明的变量是没有块级作用域的，只有函数作用域和全局作用域。

var x = 1;
{
  var x = 2;
}
console.log(x);

会输出 2，因为块中的 var 语句与块前面的 var 语句作用域相同
在 C 或 Java 中，这段代码会输出 1
这代码证明了 var 没有块作用域

相比之下，使用 let 和 const 声明的变量是有块级作用域的。

let x = 1;
{
  let x = 2;
}
console.log(x);

输出 1
x 被限制在块级作用域中
这里将 let 换成 const 结果也一样

经典的例子（背住）：

var a = [];
for (var i = 0; i < 10; i++) {
      a[i] = function () {console.log(i);};
}
a[0]();                // 10
a[1]();                // 10
a[6]();                // 10

/********************/

var a = [];
for (let i = 0; i < 10; i++) {
      a[i] = function () {console.log(i);};
}
a[0]();                // 0
a[1]();                // 1
a[6]();                // 6

第一个中的 i 是没有块级作用域的，全局只有一个变量 i，每次循环的 {} 中的代码都指向同一个 i
第二个中的 i 是有块级作用域的，当前的i只在本轮循环有效，每次循环的 {} 中的代码都指向不同的 i
值得注意的是：for的 () 是一个父作用域，{} 是一个子作用域
因为当前的 i 只在本轮循环有效，所以 let 定义的 i 在每次循环都会重新定义一遍，每次都是一个新变量

补充：

使用 function 时也有块级作用域：

foo('outside');  // TypeError: foo is not a function
{
  function foo(location) {
   console.log('foo is called ' + location);
  }
  foo('inside'); // 正常工作并且打印 'foo is called inside' 
}

var 变量提升，let 变量暂时性死区：

console.log(foo); //输出 undefined，不会报错
var foo = 2; 

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

var 会发生变量提升现象，将变量提升到函数顶部或全局顶部
let 没有这种情况，必须在 let 声明后调用该变量 (const 和 let 一样)
let 和 const 的这种现象称为暂时性死区
从块开始到 let 声明之间是“暂存死区”

let 错误

在同一个作用域中用 let 重复定义一个变量将引起 TypeError

if (x) {
  let foo;
  let foo; // TypeError thrown
}

const 的概念

必须在声明的同一语句中指定它的值
const 声明创建一个值的只读引用，也就是说只能通过 const 定义的变量来读这个值，不能修改这个值，但是如果这个值本身发生了变化，那么 const 定义的变量所对应的值也就跟着变化，比如当引动内容是对象的情况下。
一个常量不能和它所在作用域内的其他变量或函数拥有相同的名称。

// 下面错误，常量要求有一个初始值
const FOO;

// 下面正确，常量可以定义成对象
const MY_OBJECT = {"key": "value"};
// 下面错误，改变常量会失败
MY_OBJECT = {"OTHER_KEY": "value"};
// 对象属性并不在保护的范围内，下面会成功执行（对象本身发生变化）
MY_OBJECT.key = "otherValue";

// 定义一个常量
const MY_FAV = 20;
// 不能同名，会出错
var MY_FAV = 20; 
// 也会报错
let MY_FAV = 20;

二. 箭头函数

基础语法：

// 一般语法：
(参数1, 参数2, …, 参数N) => { 函数声明 }

// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }
(参数1, 参数2, …, 参数N) => 表达式（单一）

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号
() => {函数声明}

高级语法：

注意: 字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 这种简洁的构造方式

// 加括号的函数体返回对象字面表达式：
参数=> ({foo: bar})

// 支持剩余参数和默认参数
(参数1, 参数2, ...rest) => {函数声明}
(参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}

// 同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

例子：

箭头函数比较适用于原本需要匿名函数的地方，比如用在数组内置方法map、filter、forEach、reduce的回调函数中

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map(function(element) { 
  return element.length; 
}); // 返回数组：[8, 6, 7, 9]

// 上面的普通函数可以改写成如下的箭头函数
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

重点注意：

this 对象的指向是可变的，但是在箭头函数中，它是固定的。箭头函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

三. 参数处理

给函数设置默认参数值

在ES6以前，我们想要给参数设置默认值得这么做：

function multiply(a, b) {
  // JavaScript 中函数的参数默认是 undefined
  // 没有值传入或者 undefined 被传入给 b 时给 b 一个默认值
  b = (typeof b !== 'undefined') ?  b : 1;
  return a * b;
}

multiply(5, 2); // 10
multiply(5);    // 5

现在学习了ES6之后就变得很简单：

function multiply(a, b = 1) {
  return a * b;
}

multiply(5, 2); // 10
multiply(5);    // 5

注意参数的传递是从左到右的：

function f(x = 1, y) { 
  return [x, y]; 
}

f(); // [1, undefined]
f(2); // [2, undefined]

剩余参数（...）

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

语法：

function(a, b, ...theArgs) {
   ...
}

必须是函数的最后一个参数以...为前缀
它是由剩余实参组成的 Array 数组
这个例子中的 theArgs 收集第三个以及之后的所有实参

实例：

function fun1(...theArgs) {
  alert(theArgs.length); // 可以使用所有数组属性方法
}
fun1();  // 弹出 "0", 因为 theArgs 没有元素
fun1(5); // 弹出 "1", 因为 theArgs 只有一个元素

展开运算符（...）

展开语法, 可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开。

注意: 字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 这种简洁的构造方式

在函数调用时使用展开语法：

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));//6

/****下例表示可以多次使用****/

function myFunction(v, w, x, y, z) { }
var args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

构造字面量数组时使用展开语法：

/****构造字面量数组或连接数组****/
var parts = ['shoulders', 'knees']; 
var lyrics = ['head', ...parts, 'and', 'toes']; 
// ["head", "shoulders", "knees", "and", "toes"]
var arr = [...parts, ...lyrics];

/****支持浅拷贝(一维数组)****/
var arr = [1, 2, 3];
var arr2 = [...arr];
arr2.push(4); 
// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响

构造字面量对象时使用展开语法：

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// 浅拷贝
// 克隆后的对象: { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象: { foo: "baz", x: 42, y: 13 }

四. 模板字面量(模板字符串)

由反引号 `` 来代替单引号 '' 或者双引号 "" 。

单行字符串：

`string text`

多行字符串(注意回车也包含在内)

不再用 "+" 或 "\" 连接两行字符串

`string text line 1
 string text line 2`

console.log(`string text line 1
string text line 2`);

插入表达式：

不再用 "+" 连接表达式

`string text ${expression} string text`

var a = 5;
var b = 10;
console.log(`a + b is ${a + b}`);

带标签的模板字符串：

标签使我们可以用函数来解析模板字符串。

直接看例子：

var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {

  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  return str0 + personExp + str1 + ageStr;
}

var output = myTag`that ${ person } is a ${ age }`;

console.log(output);
// that Mike is a youngster

原始字符串：

在标签函数的第一个参数中，存在一个特殊的属性 raw ，我们可以通过它来访问模板字符串的原始字符串，而不经过特殊字符的替换。

例子：

function tag(strings) {
  console.log(strings.raw[0]);
}
tag`string text line 1 \n string text line 2`;
// logs "string text line 1 \n string text line 2"

五. 对象的扩展

创建对象时可以简化方法和重名的键值对

一般情况：

var name="pan";
var age=20;
var people = {
      name: name,
      age: age,
      getName: function() {
           console.log(this.name)
      }
};

ES6简化后：

var name="pan";
var age=20;
var people = {
      name,
      age,
      getName(){
           console.log(this.name)
      }
};

计算属性名（属性名可以用表达式）

var i = 0;
var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};
console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

proto

当定义的属性：值为 proto：值时，不会创建名为 proto 的属性。但当值为对象时，将更改原型（因为 proto 原本指向原型）。所以不建议使用这个属性名（避免更改 proto 的指向）。

六. 解构赋值

解构赋值语法是一种 JavaScript 表达式，它使得将值从数组，或属性从对象，提取到不同的变量中，成为可能。

目的就是将数组中的值或对象中的属性方便的提取到其他变量中

解构数组语法：

var x, y;
[x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2

// 或者：
var [x, y] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2

小技巧（不用临时变量也能交换变量）：

var a = 1;
var b = 3;
// 等价于[a,b]=[3,1]
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

解构对象语法：

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

注意：对象解构与数组解构有一个重要的不同点，数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

七. 模块（import/export）

模块功能主要由两个命令构成：export 和 import。export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。下面是一个 JS 文件，里面使用 export 命令输出变量。

导出 export

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

上面代码是 profile.js 文件，保存了用户信息，

ES6 将其视为一个模块，里面用 export 命令对外部输出了三个变量。

除了这种普通变量，输出的变量还可以是一个函数。

另外，export 语句输出的接口，与其对应的值是动态绑定关系，

即通过该接口，可以取到模块内部实时的值。

最后，export/import 命令不能在块级作用域内，可以在全局作用域任何位置。

导入 import

import 语句只能在声明了 type="module" 的 script 的标签中使用。动态导入：import()，它不需要依赖type="module" 的 script 标签。按照一定的条件或者按需加载模块的时候，动态 import() 是非常有用的。而静态的 import 是初始化加载的最优选择。

// main.js
import {firstName, lastName, year} from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

上面代码的 import 命令，用于加载 profile.js 文件，并从中输入变量。
import 命令接受一对大括号，里面指定要从其他模块导入的变量名。
大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。

注意：import 语句会执行所加载的模块：

import './lodash.js';
// 执行lodash模块，但是不输入任何值

整体导入：

import * as myModule from './my-module.js'; // 不用加大括号 {}
// 将 my-module 里面输出的变量/函数，
// 输入到 myModule 这个对象中作为属性/方法。
// 通过 myModule.属性名 / myModule.方法() 来调用。

默认导出/导入默认值：

告别使用 import 命令的时候，用户需要知道所要加载的变量名或函数名的现状：

// 先用 export default 语法默认导出
// 既然是默认输出，那么一个模板只能使用一次
export default function foo() {
  console.log('foo');
}

// 导入默认值
import customName from './default.js'; // 不用加大括号 {}
customName(); // 'foo'

八. 类

ES6 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为 JavaScript 引入新的面向对象的继承模型。

如何创建类：

class Rectangle {
  constructor(height, width) { //构造方法
    this.height = height;
    this.width = width;
  }
}
// 或者
let Rectangle = class {
  constructor(height, width) { //构造方法
    this.height = height;
    this.width = width;
  }
};

如何使用类：

class Rectangle {
    // constructor
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    // Getter
    get area() {
        return this.calcArea()
    }
    // Method
    calcArea() {
        return this.height * this.width;
    }
}
const square = new Rectangle(10, 10);

console.log(square.area); // 100

类的静态方法：

不能通过一个类实例调用静态方法（这里和 Java 语法有区别）

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    static distance(a, b) { // static 语法
        const dx = a.x - b.x;
        const dy = a.y - b.y;

        return Math.hypot(dx, dy);
    }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
// 直接通过类名调用
console.log(Point.distance(p1, p2));

类的继承（extends）

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
   constructor(name) {
    super(name); // 调用超类构造函数
  }

  speak() {
    console.log(this.name + ' barks.');
  }
}

var d = new Dog('Mitzie');
// 'Mitzie barks.'
d.speak();

调用父类方法（super）

class Cat { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}

九. Promise 对象

这部分内容是重难点，说是面试必考的知识点也不过分，因为它不易简单的进行总结，所以我推荐读到这里的朋友去细读阮一峰Promise ，进行系统的学习这部分内容。

十. End 感谢阅读

留下宝贵的一赞再走！