ES6大总结

ES6可以特指ES2015，也可以统称ES2015之后的所有标准。本文中ES6特指ES2015。ES678…特性比较多，在这里列举几个常用的：

ES6新特性（2015）

• 类
• 模块化
• 箭头函数
• 函数参数默认值
• 模板字符串
• 解构赋值
• 扩展操作符
• 对象属性简写
• Promise
• Let与Const
• Symbol
• proxy
• 对象api
• 数组api

1. 类（class）

对熟悉纯面向对象语言的开发者来说，都会对class有一种特殊的情怀。ES6 引入了class（类），让JavaScript的面向对象编程变得更加简单和易于理解。

 class Animal {
   // 构造函数，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数.
   constructor(name,color) {
     this.name = name;
     this.color = color;
   }
   // toString 是原型对象上的属性
   toString() {
     console.log('name:' + this.name + ',color:' + this.color);

   }
 }

var animal = new Animal('dog','white');//实例化Animal
animal.toString();

console.log(animal.hasOwnProperty('name')); //true
console.log(animal.hasOwnProperty('toString')); // false
console.log(animal.__proto__.hasOwnProperty('toString')); // true

class Cat extends Animal {
 constructor(action) {
   // 子类必须要在constructor中指定super 函数，否则在新建实例的时候会报错.
   // 如果没有置顶consructor,默认带super函数的constructor将会被添加、
   super('cat','white');
   this.action = action;
 }
 toString() {
   console.log(super.toString());
 }
}

var cat = new Cat('catch')
cat.toString();

// 实例cat 是 Cat 和 Animal 的实例，和Es5完全一致。
console.log(cat instanceof Cat); // true
console.log(cat instanceof Animal); // true

2. 模块化(Module)

导出(export)

ES6允许在一个模块中使用export来导出多个变量或函数。

export var name = 'Rainbow'

导入(import)

import {myModule} from 'myModule';// main.js
import {name,age} from 'test';// test.js

3. 箭头（Arrow）函数

• 箭头函数没有自己的this，如果在函数中调用this，会在定义时的词法环境中寻找，而非调用时。
• 箭头函数相比其它函数写起来更简单

4. 函数参数默认值

function foo(height = 50, color = 'red')
{
    // ...
}

5. 模板字符串

ES6支持模板字符串，使得字符串的拼接更加的简洁、直观。

var name = `Your name is ${first} ${last}.`

6. 解构赋值

• 常用写法是声明、赋值方都是对象或数组。
• 声明方key对应赋值方key，声明的值 等于 赋值方对应的value 。key对应不上，声明的值就是undefined。
• 声明的name等于声明方的value。

数组

var a, b; //先声明变量

[a, b] = [1, 2];
console.log(a); 
console.log(b);

对象

const student = {
  name:'Ming',
  age:'18',
  city:'Shanghai'  
};
//name重命名firstName
const {name:"firstName",age,city} = student;

7. 扩展操作符(Spread operator)

…可以在函数调用/数组构造/对象构造时, 将数组表达式/对象表达式或者string在语法层面展开。值得注意的是对 对象 的支持是在ECMAScript 2018中增加的。

(1) 函数调用

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

//不使用延展操作符
console.log(sum.apply(null, numbers));

//使用延展操作符
console.log(sum(...numbers));// 6

(2) 数组构造/对象构造

const stuendts = ['Jine','Tom']; 
const persons = ['Tony',... stuendts,'Aaron','Anna'];
conslog.log(persions)// ["Tony", "Jine", "Tom", "Aaron", "Anna"]

(3) 拷贝

var arr = [1, 2, 3];
var arr2 = [...arr]; // 等同于 arr.slice()
console.log(arr2)//[1, 2, 3]

(4) 连接

let arr1 = [1,2,3];
let arr2 = [2,3,4];
let arr = [...arr1,...arr2];

(5) 解构

8. 对象属性简写

属性赋值时可以直接写一个变量。

const name='Ming',age='18',city='Shanghai';
  
const student = {
    name,
    age,
    city
};
console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}

9. Promise

避免回调地域

var waitSecond = new Promise(function(resolve, reject)
{
    setTimeout(resolve, 1000);
});

waitSecond
    .then(function()
    {
      console.log("Hello"); // 1秒后输出"Hello"
      return waitSecond;
    })
    .then(function()
    {
        console.log("Hi"); // 2秒后输出"Hi"
    });

10. 支持let与const

并且他们支持块级作用域

{
  let a = 10;
}

console.log(a); //-1 or Error“ReferenceError: a is not defined”

11. Symbol

新的基本数据类型

12. Proxy

定义：修改某些操作的默认行为

声明：const proxy = new Proxy(target, handler)

入参

• target：拦截的目标对象
• handler：定制拦截行为

方法

Proxy.revocable()：返回可取消的Proxy实例(返回{ proxy, revoke }，通过revoke()取消代理)

13. 对象api

Object.assign() //合并对象(浅拷贝)，返回原对象

14. 数组api

Array.prototype.find(callFn)//返回第一个符合条件的成员，否则undefined

ES7新特性（2016）

• 数组includes()方法，用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。
• a ** b指数运算符，它与 Math.pow(a, b)相同。

1. Array.prototype.includes()

includes() 函数用来判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回false。

let arr = [1,2,3,4]

arr.includes(2) //true
arr.indexOf(2) >= 0 //true

2. 指数操作符

在ES7中引入了指数运算符，具有与Math.pow(..)等效的计算结果。

console.log(2**10);// 输出1024

ES8新特性（2017）

• async/await
• Object.values()
• Object.entries()

1. async/await

async function process(array) {
  for await (let i of array) { //可以和 for...of 一起用
    doSomething(i);
  }
}

2. Object.values()

Object.values()是一个与Object.keys()类似的新函数，但返回的是Object自身属性的所有值，不包括继承的值。
假设我们要遍

const obj = {a: 1, b: 2, c: 3};
const values=Object.values(obj1);
console.log(values);//[1, 2, 3]

2. Object.entries()

//之前
Object.keys(obj).forEach(key=>{
	console.log('key:'+key+' value:'+obj[key]);
})
//key:a value:1
//key:b value:2
//key:c value:3

//现在
for(let [key,value] of Object.entries(obj1)){
	console.log(`key: ${key} value:${value}`)
}
//key:a value:1
//key:b value:2
//key:c value:3

ES9新特性（2018）

• Rest/Spread 属性

Rest/Spread

…原本只有spread扩展的属性，ES9为…添加了Rest属性。rest参数语法允许我们将一个不定数量的参数表示为一个数组。

restParam(1, 2, 3, 4, 5);

function restParam(p1, p2, ...p3) {
  // p1 = 1
  // p2 = 2
  // p3 = [3, 4, 5]
}

ES10新特性（2019）

• 新增了Array的flat()方法和flatMap()方法
• 数组sort()
• BigInt

Array.prototype.flat()

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);//扁平化两个深度的意思
// [1, 2, 3, 4, 5, 6]

//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

Array.prototype.flatMap()

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

var arr1 = [1, 2, 3, 4];

// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

Array.prototype.sort()

排序关键字相同的项目其排序前后的顺序不变，默认为稳定

BigInt

ES11新特性（2020）

• import

ESModule增加了import动态导入

参考

https://juejin.cn/post/6844903959283367950