ECMAScript 6（ES6）的总结回顾

什么是ES6？

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言 。另外，一些情况下ES6也泛指ES2015及之后的新增特性，虽然之后的版本应当称为ES7、ES8等。

ES6是一套语言标准，是对JavaScript的扩展和升级，为了应对项目中的各种问题，提供的解决方案，基本上是每个前端工程师都必备的入门知识。

所以ES6是什么样的标准，它又在哪些地方做了扩展，常读常新，为了更好的掌握ES6，这里我对于其中一些关键节点进行一个简单的总结。

一、let和const

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

关于let新增变量，我们只需要知道以下几个点：

①不存在变量的提升，这点区别于var，当我们的变量名出现多次相同声明的时候，他不会因此而出现变量提升等混乱问题。
②不允许重复声明，在同一作用域下，我们不能用let声明两个变量名相同的变量。
③块级作用域，最简单的理解就是用{}包括起来的区域就叫块级作用域，在这个作用域下let声明的变量必须遵守以上的规则，同时在let声明的变量只能在所声明的变量区域内使用。这样大大避免了代码出现变量污染的情况。

关于const，我们在开发的时候只需要记住一个关键，const是声明常量的一个命令，而且用const声明的常量，顾名思义它是不能被重新赋值的。

二、解构赋值

这也是es6的一个我们常用的一个扩展，大多数时候我们会在请求数据后，对数据进行处理的时使用这一扩展。该扩展可以让我们很轻松地用简洁的代码获取到我们想要的数据，从数组和对象中提取值，对变量进行赋值，而不是全盘接收大量的数据。

最简单的用法，直接获取数组中三个参数的值，然后重新赋值给变量。

let [a, b, c] = [1, 2, 3];

我们常用的方式，对请求数据处理的方式，如下：

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };

甚至于我们可以对字符串进行解构赋值：

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

三、模板字符串

关于这个扩展我们只需要知道一个符号“`”,在没有这个扩展之前，我们连接代码区域不同行的代码时通常时用“+”把我们的字符串代码给拼接起来。如果偶尔只是单纯的两行三行或许还能够勉勉强强使用，可一旦行数多了，那就会异常麻烦。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

现在有了模板字符串，我们可以直接抛弃那些“+”。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

四、Object.assign()

Object.assign()方法用于对象的合并，将源对象的所有可枚举属性，复制到目标对象。这也是开发中较常用到的一个扩展。以下是一个简单的示例

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

五、Set 和 Map 数据结构

es6新增两个数据结构，set和map，set跟数组类似，而map是键对值得形式、

①Set本身是一个构造函数，用来生成 Set 数据结构。set比较常用的地方是在去除数组中重复的元素时，因为它的规则就是存储的元素中不能存在重复。

这是set的一个示例使用：

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

去除数组重复元素常用方式：

[...new Set(array)]

②JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。可以理解map就是一个对象属性设置限制被放开的对象变量。

const data = {};
const element = document.getElementById('myDiv');

data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"

六、Proxy

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

这个对于使用Vue3的人其实并不陌生，因为Vue3双向渲染的原理正是用了proxy，通过代理监听对象，当对象，从而实现当对象发生变化时，通知页面渲染同步进行。它跟vue2中所使用的defineProperty都是监听对象的get和set方法，但是比起vue2中所使用到的方式，它的效率要更高。

以下是一个简单的示例，对于原理性的东西我们虽然开发中不常使用，但是了解它可以让改善提高我们的编程思想和逻辑。

var obj = new Proxy({}, {
  get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});

七、Promise 对象

十分强大的异步解决方案，所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

①（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
②一旦状态改变，就不会再变，任何时候都可以得到这个结果。

promise通常被我们应用在请求数据中，像常用的axios的原理就是用了promise，它这种良性的代码关系让我们可以避免“回调地狱”。

简单的一个promise示例，通常我们只需要关注resolve和reject，它们对应的就是我们调用promise的then方法后所传的两个回调函数。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

八、关于Class

如果有开发过java项目，或者对java语言有一定了解，那么一定会知道java中的class，js的class在本质上其实就是一个对象，ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

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

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写，就是下面这样。

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

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

九、Module

非常重要的一个概念，可以说是将javascript拔高一个台阶的重要扩展，没有模块化的js代码会让项目变得相当臃肿，代码复用性差。有了module，才有了前端项目的工程化，一个工程如果不能被拆分为许多部分的环节去处理，只是单纯地用代码堆积而成，就没有很好的维护空间和维护价值。

关于Module，我们需要知道的是两个最常见的命令，export和import，一个输出和一个输入，让我们的js代码可以在各个不同的模块中去流通，大大提高了代码的复用性和工程的严谨性。

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

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

export { firstName, lastName, year };

引进以上的模块我们可以使用以下的代码：

import { firstName, lastName } from profile.js

这里我们需要知道的是default命令，default规定我们在这个文件模块中只能输出一个变量。

// export-default.js
export default function () {
  console.log('foo');
}

然后我们在import中就相应地不需要加{}，直接引入即可。

import defaultFun from export-default.js