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

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');//实例化Animal
    animal.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) { // 遍历Array
    console.log(x,"array");
}
for (var x of s) { // 遍历Set
    console.log(x,"set");
}
for (var x of m) { // 遍历Map
    console.log(x[0] + '=' + x[1],"map");
}

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

Map相关操作如下， Set同理

	var m = new Map(); // 空Map
    m.set('Adam', 67); // 添加新的key-value
    console.log(m);
    m.set('Bob', 59);
    console.log(m);
    m.has('Adam'); // 是否存在key 'Adam': true
    console.log(m.has('Adam'));
    m.get('Adam'); // 67
    console.log(m.get('Adam'));
    m.delete('Adam'); // 删除key 'Adam'
    console.log(m);
    m.get('Adam'); // undefined
    console.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/of
    let 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, 3

    let 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和value
    let 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

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