ES6标准汇总

本文转载自我的个人博客。

ES6新标准的知识点零散，经常是看一遍就忘了，所以特别开了这一贴，作为一个ES6知识的汇总贴。主要讲ES6的新命令的具体用法，以及与之前用法的区别。知识点不会讲得很深，很多只是蜻蜓点水的讲一下，适合当作ES6的入门贴来看。本帖长期更新，实用向。

let 命令

ES6 新增了一个 let命令用来声明变量。同样是声明变量，let与之前的var主要有以下几点区别：

1. let 声明的变量不允许重复声明:

  var a = 1;
  var a = 2;
  console.log(a); //输出 2

  let b = 1;
  let b = 2;     //报错
  console.log(b) ;

在一个大型项目中或者多人协助项目中，我们往往因为不知道那些变量已经被声明过了而重复声明变量，导致之前变量的值被覆盖。由于程序不会报错，debug是很困难的，而现在的let命令很好的解决了这个问题。

2. let 声明的变量存在块级作用域:

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

上面的两个代码块中拥有各自的变量n，不会相互影响。

再给一个例子：

  ///////// 使用 var /////////
  var printNumTwo;
  for (var i = 0; i < 3; i++) {
    if(i === 2){
      printNumTwo = function() {
        return i;
      };
    }
  }
  console.log(printNumTwo());
  // returns 3
  
  ///////// 使用 let /////////
  'use strict';
  let printNumTwo;
  for (let i = 0; i < 3; i++) {
    if (i === 2) {
      printNumTwo = function() {
        return i;
      };
    }
  }
  console.log(printNumTwo());
  // returns 2
  console.log(i);
  // returns "i is not defined"

3. let声明不存在变量提升

所谓变量提升，就是之前我们在使用var声明变量时，变量可以放在声明之前使用，只不过使用还没有声明的变量时，其值为undefined。但是使用let声明变量时，如果使用放在声明之前则会报错。

  console.log(a); //输出 undefined
  var a = 1;

  console.log(b); //报错
  let b = 1;     

const 命令

const除了拥有let的所有优秀特性(不允许重复声明，有用块级作用域)之外，还有一个特性，那就是它是只读的。

---

“ const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针， const 只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。”

《ES6标准入门》 阮一峰

---

阮大佬上面这段话具体是什么意思呢，请看下面这个例子：

  "use strict";
  const s = [5, 6, 7];
  s = [1, 2, 3]; // 报错
  s[2] = 45; // 正常工作
  console.log(s); // returns [5, 6, 45]

我们将一个新数组[1, 2, 3]赋值给变量s时，其实是企图改变变量s内指针的指向，而因为变量s是使用const命令声明的，其指针指向是固定的，不能变动的，所以程序报错。第二次，我们想修改数组中第二项的值，因为修改数组中某一项的值并不改变数组的地址，变量s内所保存的指针依旧指向原来的地址，所以程序可以成功执行。

Object.freeze

因为const并不能保证复合类型的数据是不可改变的，所以我们需要一个新的命令来保证复合类型的只读性，这个命令就是Object.freeze，具体用法请看下例：

  let person = {
    name:"XiaoMing",
    review:"yes"
  };
  Object.freeze(person);
  person.review = "no"; //这条命令将会被忽略，因为此时person对象是只读的
  person.newProp = "age"; // 这条命令也将会被忽略
  console.log(obj); 
  // { name: "XiaoMing", review:"yes"}

箭头函数 (Arrow Functions)

ES6 为我们带来了一种更简洁的书写函数的方式，箭头函数。在旧的标准中，我们是这样书写函数的：

  const myFunc = function() {
    const myVar = "value";
    return myVar;
  }

使用剪头函数，我们可以将其简化为：

  const myFunc = () => {
    const myVar = "value";
    return myVar;
  }

还可以进一步简化，我们可以甚至连return都不要:

  const myFunc = () => "value"

箭头函数可以传参:

  // 将输入的数乘以2，并返回
  const doubler = (item) => item * 2;

箭头函数可以极大的化简高阶函数的使用。所谓高阶函数，就是那些接受一个函数作为参数的函数，常见的有：map()，filter()，reduce()。在以前我们是这么写高阶函数的:

  FBPosts.filter(function(post) {
    return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
  })

利用箭头函数可以化简为一行：

FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)

为函数的参数设置默认值

在ES6中，你可以为函数的参数设置默认值：

  function greeting(name = "Anonymous") {
    return "Hello " + name;
  }
  console.log(greeting("John")); // 输出 Hello John
  console.log(greeting()); // 输出 Hello Anonymous

参数name的默认值被设置为"Anonymous"，所以在不传参直接调用greeting()时，输出的是Hello Anonymous。

rest 参数 (Rest Operator)

ES6中引入了rest参数，其形式为...变量名。通过使用rest参数，你可以向函数传入不同数量的参数：

  function howMany(...args) {
    return "You have passed " + args.length + " arguments.";
  }
  console.log(howMany(0, 1, 2)); // 传入三个参数
  console.log(howMany("string", null, [1, 2, 3], { })); // 传入四个参数

rest参数中的变量代表一个数组，所有数组特有的方法都可以用于这个变量：

  function push(array, ...items) {
    items.forEach(function(item) {
      array.push(item);
      console.log(item);
    });
  }
  var a = [];
  push(a, 1, 2, 3)
  console.log(a)  //输出 [1， 2， 3]

rest参数之后不能再有其他参数，否则程序会报错。

扩展运算符 (Spread Operator)

扩展运算符其实就是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>]

在之前，如果我们想求数组中的最大值需要这样写：

  var arr = [6, 89, 3, 45];
  var maximus = Math.max.apply(null, arr); // 返回 89

因为Math.max()方法只接受由逗号分隔的参数序列，比如Math.max(1, 2, 3)，所以我们需要apply()进行转化。在ES6中，我们不再需要apply()方法，而是可以直接利用扩展运算符，其形式更易于理解：

  const arr = [6, 89, 3, 45];
  const maximus = Math.max(...arr); // 返回 89

请注意，扩展运算符...只在某些特定的情况下才可以使用，比如函数的参数中，或者数组中。裸用扩展运算符程序会报错:

  var arr = [6, 89, 3, 45]
  const spreaded = ...arr; //报错

解构赋值(Destructuring Assignment)

我们已经看过了扩展运算符可以让我们的数组操作变得多么高效。对于操作对象，ES6也给出了相似的方法。

1. 请看下面这个ES5的例子:

  var voxel = {x: 3.6, y: 7.4, z: 6.54 };
  var x = voxel.x; // x = 3.6
  var y = voxel.y; // y = 7.4
  var z = voxel.z; // z = 6.54

在ES6中，我们可以这样做：

  const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54

如果你想赋值的变量与对象的属性有不同的名称，你可以这样做:

  const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54

以上操作方法被我们称为解构赋值。

2. 解构赋值也可以作用于嵌套的对象:

  const a = {
    start: { x: 5, y: 6},
    end: { x: 6, y: -9 }
  };
  const { start : { x: startX, y: startY }} = a;
  console.log(startX, startY); // 5, 6

3. 利用解构赋值，我们可以轻易的获取数组的特定元素：

  const [a, b] = [1, 2, 3, 4, 5, 6];
  console.log(a, b); // 1, 2

  const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
  console.log(a, b, c); // 1, 2, 5

4. 解构赋值可以搭配扩展运算符使用

  const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
  console.log(a, b); // 1, 2
  console.log(arr); // [3, 4, 5, 7]

5. 如果你想将一个对象当参数传入，你可能会想到这样做：

  const profileUpdate = (profileData) => {
    const { name, age, nationality, location } = profileData;
    // 函数操作
  }

但其实你可以这样：

  const profileUpdate = ({ name, age, nationality, location }) => {
    // 函数操作
  }

这样做的好处是，我们不用把整个对象都传进来，只需要传入我们需要的那部分。

模板字符串 (Template String)

ES6中引入了一种更强大的字符串写法，被称为模板字符串，用反引号( ` )标识，用法如下：

  const person = {
    name: "Zodiac Hasbro",
    age: 56
  };

  //用模板字符串方式书写的字符串，并将其赋给greeting变量
  const greeting = `Hello, my name is ${person.name}!
  I am ${person.age} years old.`;

  console.log(greeting); 
  // 输出：
  // Hello, my name is Zodiac Hasbro!
  // I am 56 years old.

在上面这段代码中，有三个地方需要我们注意：

1. 模板字符串的标识符是反引号(`) 而不是单引号(')
2. 输出的字符串是多行的，我们在也不需要\n了
3. 语法${}可以用来获取变量，化简了之前用+来进行字符串拼接的写法

更简洁的定义对象的方法

在ES5中我们是这样定义对象的方法的:

  const person = {
    name: "Taylor",
    sayHello: function() {
      return `Hello! My name is ${this.name}.`;
    }
  };

在ES6中，我们可以将function关键词省略：

  const person = {
    name: "Taylor",
    sayHello() {
      return `Hello! My name is ${this.name}.`;
    }
  };

class

ES6中提供了一种新的语法创建对象，即使用class关键词。需要注意的是，这里的class关键词只是语法糖，并不具有像传统的面向对象的语言那样的特性。

在ES5中，我们通常是这样创建构造函数的:

  var Person = function(name){
    this.name = name;
  }
  var person1 = new Person('Jim');

利用class语法糖，我们可以这样写:

  class Person {
    constructor(name){
      this.name = name;
    }
  }
  const person1 = new Person('Jim');

在由class定义的对象中，我们添加了构造函数constructor()，构造函数在new被调用时唤醒，创建一个新的对象。

用取值函数和存值函数(getters and setters)来封装对象

在由class定义的对象中，存值函数和取值函数现在有了自己的关键字get和set，用法也更加简单:

  class Book {
    constructor(author) {
      this._author = author;
    }
    // getter
    get writer(){
      return this._author;
    }
    // setter
    set writer(updatedAuthor){
      this._author = updatedAuthor;
    }
  }
  const lol = new Book('anonymous');
  console.log(lol.writer);  // anonymous
  lol.writer = 'wut';
  console.log(lol.writer);  // wut

请注意我们调用存值函数和取值函数的方式：lol.writer。这种调用方式让他们看起来并不像是函数。