JavaScript中常见的ES6/ES7/ES8新特性

今天，小编就带领大家来回顾一下到底有哪些es6、es7还有es8的语法新特性。

ES6新特性

1. 类（class）

虽然在平时代码开发中我们更多用的是构造函数，但相信大家对class类应该也不会感到陌生。

  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');//实例化Animalanimal.toString();

使用class同样可以实现构造函数的功能，所有在很多的开发中我们也还是会常用到class。下面是打印结果：

name:dog,color:white

2 . 模块化

在es6中，
模块化主要由import和export组成
export可以导出变量，常量，函数，导出多个可以用{}；
import可以在export之后进行导入

3. 箭头函数

var sum = (num1, num2) => { return num1 + num2; }

这样就实现了一个函数的定义，这样也比普通定义函数的方法更简单。值得注意的是，箭头函数中是没有this的，箭头函数中的this是指向其父作用域的this的，这点很容易在我们写代码时忽略。下面则是我们普通函数的，跟之上的箭头函数功能一样。

 var sum = function(num1, num2) {return num1 + num2;};

4. 函数参数默认值

 function foo(height = 50, color = 'red') {//这是es6之后才支持的写法console.log(height,color);}

5.模板字符串

	var first = 'liu'var last = 'q_'var name = `Your name is ${first} ${last}.`console.log(name);//Your name is liu q_.

6. 延展操作符(…)

var people=['Wayou','John','Sherlock'];
console.log(...people);//输出'Wayou','John','Sherlock'

 function show(name,age){console.log([...arguments]); //["lq", 20]}show('lq',20)

7.对象属性简写

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

8.Promise(构造函数)

它是解决异步回调的es语法标准 >
解决回调地狱的问题,通常的说是解决了异步嵌套、多层异步嵌套问题。
将其异步包裹在其中，promise内部有三个状态：1.pending（进行时）、2.fulfilled（已成功）3.rejected（已失败），当函数内部的异步处理成功时，调用内部函数 resolve，状态从进行 到 成功，否者调用reject，状态从 进行 到 失败。
值得注意的是，promise函数并没有完成异步代码同步化。（需和async函数配合可实现）

9.let和const

都是块级作用域；const定义了就不能修改

10.解构赋值
（1）数组的解构赋值

let [a, b, c] = [1, 2, 3];
//等同于
let a = 1;
let b = 2;
let c = 3;

（2）类似的，对象的解构赋值

  var { StyleSheet, Text, View } = React;//等同于var StyleSheet = React.StyleSheet;var Text = React.Text;var View = React.Text;

11.iterable类型
为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型，具有iterable类型的集合可以通过新的for … of循环来遍历。

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Arrayconsole.log(x,"array");
}
for (var x of s) { // 遍历Setconsole.log(x,"set");
}
for (var x of m) { // 遍历Mapconsole.log(x[0] + '=' + x[1],"map");
}

在进入es7之前，如果有小伙伴对 iterable类型中的map和set不太熟悉，还可以看看下面的这段代码，有利你对他们的理解。

Map相关操作如下， Set同理

	var m = new Map(); // 空Mapm.set('Adam', 67); // 添加新的key-valueconsole.log(m);m.set('Bob', 59);console.log(m);m.has('Adam'); // 是否存在key 'Adam': trueconsole.log(m.has('Adam'));m.get('Adam'); // 67console.log(m.get('Adam'));m.delete('Adam'); // 删除key 'Adam'console.log(m);m.get('Adam'); // undefinedconsole.log(m.get('Adam'));

ES7新特新

1.includes() 判断数组是否存在某值；
Array.prototype.includes用法都容易和简单。它是一个替代indexOf，开发人员用来检查数组中是否存在值，indexOf是一种尴尬的使用，因为它返回一个元素在数组中的位置或者-1当这样的元素不能被找到的情况下。所以它返回一个数字，而不是一个布尔值。开发人员需要实施额外的检查。

let arr = ['react', 'angular', 'vue']// // WRONG
if (arr.indexOf('react')) {console.log('Can use React')
}if (arr.indexOf('react') !== -1) {console.log('Can use React')
}if (arr.includes('react')) {console.log('Can use React')
}

includes也可以在NaN(非数字)使用。

console.log([1, 2, 3].includes(2)) // === true)
console.log([1, 2, 3].includes(4)) // === false)
console.log([1, 2, NaN].includes(NaN)) // === true)
console.log([1, 2, -0].includes(+0)) // === true)
console.log([1, 2, +0].includes(-0)) // === true)
console.log(['a', 'b', 'c'].includes('a')) // === true)
console.log(['a', 'b', 'c'].includes('a', 1)) // === false)

2.指数运算符 **

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

ES8新特新

1.async/await(异步函数（或者async/await）特性操作是Promise最重要的功能。这种想法是为了在写异步代码中简化它。它只是不会演变这种方式。本来以为Promise的到来已经是摆脱node异步的福音了，在ES8，异步函数是那么给力。)

2.Object.values/Object.entries

Object.values和 Object.entries是在ES2017规格中，它和Object.keys类似，返回数组类型，其序号和Object.keys序号对应。
在ES8 /ES2017之前，Javascript开发者需要迭代一个对象的自身属性时候不得不用Object.keys，通过迭代且使用obj[key]获取value值返回一个数组，

let obj = {a: 1, b: 2, c: 3}Object.keys(obj).forEach((key, index)=>{console.log(key, obj[key])})///使用ES6/ES2015 中for/oflet obj = {a: 1, b: 2, c: 3}for (let key of Object.keys(obj)) {console.log(key, obj[key])}

Object.values返回对象自身可以迭代属性值（values）为数组类型。我们最好使用Array.prototype.forEach迭代它，结合ES6的箭头函数隐形返回值：

 let obj = {a: 1, b: 2, c: 3}Object.values(obj).forEach(value=>console.log(value)) // 1, 2, 3let obj = {a: 1, b: 2, c: 3}for (let value of Object.values(obj)) {console.log(value)}// 1, 2, 3

Object.entries·，在另一方面，将会返回对象自身可迭代属性key-value对数组（作为一个数组），他们（key-value）分别以数组存放数组中:

  let obj = {a: 1, b: 2, c: 3}console.log(JSON.stringify(Object.entries(obj)));// "[["a",1],["b",2],["c",3]]"//可以使用ES6/ES2015解构，从这嵌套数组中分别声明key和valuelet obj = {a: 1, b: 2, c: 3}Object.entries(obj).forEach(([key, value]) => {console.log(`${key} is ${value}`)}) // a is 1, b is 2, c is 3

同样使用ES6for/of（毕竟全部都是数组）遍历Object.entries返回来的结果值：

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

最后，感谢各位的支持，如发现文档有错误，请记得在评论区指出，祝各位小伙伴学有所成。