ES6新增的内容比拟多，而且开发当中也是经常会用到，有了各种babel的转换，市面上大在少数公司都在用ES6语法来开发。

JavaScript传说中是由网景公司的Brendan Eich 大神在10天内设计实现的。抛开短时间设计一门编程语言这个话题不说，任何一门语言都不是100%完满的（php....）。

JS当然也有它的不足之处，比如说顶层对象的属性与全局变量的关系，而ES6办法当中的const let modules等都是试图在肯定水平上扭转JS历史遗留的问题，从而使其更加合理化。

因而，在学习一门语言的同时，咱们多点注意这门语言的历史及其设计的目标，能够帮忙咱们更加粗浅的了解这门语言，而不是一味的死记API。

ES6的学习当然是首推阮一峰老师的《ES6规范入门》一书。上面也是对这本书的集体浏览总结。

先来张搬砖图:

1. const 和 let

let: 申明在代码块内无效的变量。

特点：

1. 在存在变理晋升（不能在变量申明之前应用）2. let的暂时性死区： 其实与1差不多，只有在块作用域有申明，就不能在本作用域申明前用主个变量。3. 不容许反复申明。

const: 申明一个只读的常量

特点：

1. 一但申明，这个值不能被扭转（对于援用类型，是援用的地址不能被扭转）2. 申明时必须赋值
面试中常会问到var let const 三都的区别，答复的时候重视各自的特点，其实const let就是补救var 的各种毛病，两都的特点就是var 的毛病。

工作中申明变量多用const 和 let

其中当申明的变量为援用类型如Array，如果没有间接更改援用的地址，能够应用const

2. 解构赋值

什么是解构赋值？

依照肯定模式从数组或对象中提取值，而后对变量进行赋值（先提取，再赋值）

数组：

let [a, b] = [1, 2]// 以下的后果为左边数剩下的值所组成的数组let [c, d ,...e] = [1, 2, 3, 4]// 有默认值的写法let [f = 100] = []  // f = 100// 其中String也被视为类数组let [a, b] = 'abcd' // a = a; b = b

对象:

变理名要与对象的属性名一样才能够：

let { foo } = { foo: 1, bar: 2 } // foo = 1// 重新命名（前面那个才是新变量）let { foo: newFoo } = { foo: 1, bar: 2 } // newFoo = 1

理论应用：

  1. 替换两个变量的值

    [x, y] = [y, x]

  2. 函数的封装

    function fn({ x, y } = {}) {    console.log(x, y)}

    其中，函数参数为一个对象，不会像(x, y)的模式这样固定参数的程序，而{} = {}前面又赋一个空的对象就是为了在调用fn时不传参数而不会抛出错误导至程序停止

  3. 函数返回值的解构

    函数返回多个值

    // 有秩序的function foo() {    return [a, b, c]}const [a, b, c] = foo()// 无次序的function foo() {    return { a, b, c}}const { b, a, c} = foo()

3. 模板字符串

const h = 'hello'`${ h } word`

特点：

能够换行，然而所有的空格和换行会被保留。

${}中能够应用任意的javaScript表白试、运算、援用对象属性、函数调用等。后果是其返回值。

4. 函数的扩大

  1. 函数的默认值

    function m(x = 1) {}

  2. rest参数（用于获取函数的多余参数）

    function a(...values) {    // value 是一个数组，第个元素是传入的各个参数}

  3. 函头函数

    特点：

    1. 函数体内的this = 定义时所在的对像
    2. 不能够当作构造函数（不能用new)
    3. 不能够用arguments对像，能够用rest
    4. 不能够用yield命令（不能用作Generator函数）
    阮老师的书中这一章讲到了无关尾调用，尾递归的内容，值得一看。

5. 数组的扩大

  1. 扩大运算符。

    1. 用于代替数组的apply。

      call apply bind的区别：
      用于扭转this的指向， 第一个参数为this指向的对像，前面的参数是作为函数的参数。
      区加在于：call apply 会即调用，而bind是生成一个等调用的函数。call bind参数是一个个用逗号列举，而apply 是传入一个数组。

      fn.apply(null, [1, 2, 3])fn.call(null, 1, 2, 3)fn.bind(null, 1, 2, 3)()// 指最大值Math.max(...[3,4,5,62,8])

    2. 合并数组

      // ES5[1, 2].concat(3)// ES6[1, 2, ...[3]]

    3. 新增的办法

      1. Array.from()将类数组转为数组
      • 可遍历的对象(iterable)(Set, Map)
      • 相似数组的对
      { '0': 'a', '1': 'b' }
      1. 实例的办法
      • find() findIndex()找出第一个符合条件的成页/下标（地位）
      • entries() keys() values() 用于遍历数组。（配合for...of)
      • includes() 是否存在指定无素(返回布尔值)

5. 对象的扩大

  1. 属性的简写：

    let a = 100{ a } // 等同于{ a: 100 }

    办法名同样能够简写，vue中就经常用这种写法：

    export default {    name: 'VueComp',     data() {},     create() {},}// 等同于export default {    name: 'VueComp',    data: function() {},     create: function() {},}

  2. 属性名可心应用表达式：

    let foo = 'foo'
    [foo]: 'fooValue'}```

  1. 新增一些办法：

    • Object.is()

      • Object.assign()

      • 对像的一些遍历：

        Object.keys(), Object.values(), Object.entries()

        for(let key of Object.keys(obj)) {}for(let value of Object.values(obj)) {}for(let [key,value] of Object.entries(obj)){}
      • 扩大运算符（罕用）(es2017新增，在webpack中要另外的babel转换)

## 6. Symbol

javascript又新增的一种数据类型（第七种，另外6种为：Undefined、Null、Boolean、String、Number、Object)

注：symbol作为对象的属性名时不会被for...in,for...of,Object.keys()辨认；能够改用Reflect.ownkeys办法.

## 7. Set、Map

Set和map是ES6新增的数据结构。

  • Set

    特点： 1. 相似数组，但其成员是惟一的。

      2. 是一个构造函数。
 用法：      数组去重： ```javascript [...new Set([1,1,1,2,3,4,3])] Array.from(new Set([1,1,1,2,3,4,3])) ```

  • Map

    特点：

    1. 为了解决javascript的对象只能用了符串作为键的问题。
 用法： （应用实例的set,get,delete办法增，查，删） ```javascript const m = new Map() const obj = {a: 'aa'} m.set(obj, 'obj as key') m.get(obj) // 'obj as key' m.delete(obj) ``` 也能够在new 时承受一个数组 ```javascript const obj = { a: 'aa'} const m = new Map([     ['name': 'ym'],     [obj, { b: 'bbbb' }] ]) ``` > 这段时间有一个很火的文章讲如何应用map组构来优化长长的if..else的

8. Promise

是异步编程的一种解决方案。

特点：

  1. 状态不受外界影响（有三种状态：padding, fulfilled,redected)
  2. 一旦状态扭转就不会再变。

用法：

const p = new Promise((resolve, reject) => {    setTimeout(() => {        resolve()    }, 1000)}).then(res => {}).catch(err => {})

注： then办法有两个参数，第一个是胜利的回调，第二个为失败的回调，即：

.then(res =>{}, err => {})

然而最好用catch办法， 因为catch办法会捕捉then里的谬误，then里有谬误程序不会停止。

Promise.all()

将一组promise再包装成一个promise

var pa = Promise.all([p1, p2, p3])

特点：

  1. 当所有都fulfilledj时，promise.all才fulfilled
  2. 当只有一个rejected时，promise.all就会rejected

Iterator和for...of

Iterator的3个作用：

  1. 为各种数据提供对立的，简便的拜访接口
  2. 使数据结构的成员能按某种秩序排列
  3. 次要供for...of用

原生有iterator的数据结构：

Array, Map, Set, String, TypeArray, arguments， NodeList

(object是没有的)

for...of与其余循环的比拟

  1. for循环写法比拟麻烦
  2. 数组的forEach: 无奈用break;return跳出循环。

  3. For...in

    • 数组的键名是数字，而for...in以字符串作为键名（也就是用for...in循环数组，其键名是字符串，笔者被坑过）
    • 不仅能够遍历键名，还能够遍历手动增加的其余键，包含原型链上的
    • 某些状况下，会心任意秩序遍历
    • （ for...in次要为对象而设计的）

9. Generator与async await

generator是ES6提供的一种异步编程解决方案。使异步写法更像同步。

Async await是ES2017的规范，是generator的一个语法糖。

用法：

async function a() {    await ...    console.log(111)    await ...}

当执行a时，其不会阻塞涵数里面的代码（a内的代码会安程序执行）

console.log('开始')a()console.log('a前面')// 开始 -> a前面 -> 111

10. Class

产生的起因： 原ES5语法的没有成型的类的概念。而面向对象编程又离不开类的概念。

ES5定义一个类:

function Point(x, y) {    this.x = x;    this.y = y;}var p = new Point(1, 2)

ES6的class:

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

其中：

  1. constructor办法是类的默认办法，通过new 命令生成对象时会调用该办法，如果申明类时没有定义constructor，会默认定义一个空的。
  2. 生成实例时必须用new ,不必会报错
  3. 不存在变里晋升（选定义类，再new实例）

类的静态方法：

所有在类中定义的办法都会被实例继承，如果不想被继承，能够在定义时加上static。示意为静态方法。

class Foo {    static match() {}}Foo.match()const f = new Foo()f.match() // 报错

类的动态属性

很遗憾，ES6没有给类设动态属性，然而能够用以下办法定义(有提案，写方同静态方法)

class Foo {} Foo.porp = 1 // 应用 Foo.porp // 1

类的实例属性

类的办法默认被实例继承，那么属性呢？也是继承的，写法如下：

class Foo {    myProp = 111;    ...}

classr的继承 extends

class Point {}class PointSon extends Point {    constructor(x, y, z) {        super(x, y)        this.z = z    }}

其中：

  1. super等同于父类的constructor。
  2. 子类必须在constructor中调用super， 也就是说用extends去继承一个类，就必须调用这个类（父类）的constructor。是因为子类没有本人的this对象，而是继承父类的this，而后对其进行加工
  3. 如果了类没有写constructor，会默认生成一个，并蕴含了super(...args)

11. Module

一种将程序拆分成一个个小模块的反对，或者说是能够将一个个小模块退出到程序中去。

在ES6的module之前，比拟风行的模块加载计划有:CommonJS和AMD，前者用于服务器（node)，后者用于浏览器。

区别：

  1. CommondJS和AMD是运行时加载的。
  2. module是编译时加载的。
  3. CommondJS输入的是值的复制，而ES6输入的是值的援用

ES6模块默认应用严格模式：

  • 变里必须申明后再应用
  • 函数的参数不能有同名属性
  • 不能应用width
  • 禁止this指向全局对象

应用

命令有： export、import 、export default

文件a.js

export a = 1export b = 2

相当于

const a = 1;const b = 2;export  { a, b }

在文件b.js中引入

import { a, b } from './a.js'

引入是重命名

import { a as reA, b as reB } from './a.js' // reA reB是重命名的变量

整体引入：

import * as all from './a.js'all.a // 1all.b // 2// all 相当于{ a, b }

export default默认输入

export default导出的模块在引入时能够自定义命名

export default function() {    ...}

仍然用import 引入,然而不必{}，且能够自定义变量名

import name from './a.js'name()

从一个模块导入，而后再导出

// 写法一：import { a, b } from './a.js'export { a, b }// 写法二： export { a, b } from './a.js'// 改名导出export { a as reA, b } from './a.js'// 整体导出export * from './a.js'

在浏览器中应用module

将script标签的type设为module即可

<!--  办法一 --><script type="module" src="./a.js"></script><!-- 办法二 --><script type="module">    import { a } from './a.js'</script>

其中：

  • type="module"的script内写的代码是在以后作用域，不是在全局。
  • 模块内主动采纳严格模式
  • 顶层的this指向undefined
  • 同一个模块如棵加载屡次，只执行一次

以上是ES6新增语法里在日常开发当中肯定会常常用到的货色。ES6的订正对前端开发来说意义重大，其余的还有很多比方二进制数据、Proxy、Reflect、润饰器等，其内容稍深，能够到阮一峰老师博客看看，喜爱看书的能够买他的书《ES6规范入门》超值。