ES6、ES7、ES8语法总结

ES6

1. var let const

let,const具有块级作用域，不具有变量提升

const 用于不能被重新赋值的变量

2. 箭头函数

我们经常要给回调函数给一个父级的this

常用办法就是 var self = this 定义一个变量接住他

使用 箭头函数，this 将不会受到影响,可以直接用this调用父级的this

3. 字符串

includes:

const string = 'food';

const substring = 'foo';

console.log(string.includes(substring));

返回的是布尔值。

string.repeat(str,count)

如果 string.length < count 即插入str到count == string.length为止

4. 模板字符串

const name = 'Tiger';

const age = 13;

console.log(`My cat is named ${name} and is ${age} years old.`);

5.解构

结构数组：

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

console.log(a);

console.log(b);

结构对象：

var luke = { occupation: 'jedi', father: 'anakin' };

var occupation = luke.occupation;

var father = luke.father;

-------------------------------------------------------------

let luke = { occupation: 'jedi', father: 'anakin' };

let {occupation, father} = luke;

console.log(occupation);

console.log(father);

6.模块

暴露对象：

function sumThree(a, b, c) {

return a + b + c;

}

export { sumThree };

引入：

import { sumThree } from 'math/addition';

7.参数

es6支持设置默认值：

function addTwoNumbers(x=0, y=0) {

return x + y;

}

8.rest参数

处理不定数目参数：

function logArguments(...args) {

for (let arg of args) {

console.log(arg);

}

}

9.展开操作

可以展示数组：

Math.max(...[-1, 100, 9001, -32]);

let cities = ['San Francisco', 'Los Angeles'];

let places = ['Miami', ...cities, 'Chicago']; // ['Miami', 'San Francisco', 'Los Angeles', 'Chicago']

10.类

创造类:

class Person {

constructor(name, age, gender) {

this.name  = name;

this.age    = age;

this.gender = gender;

}

incrementAge() {

this.age += 1;

}

}

11.Maps

可以理解成键值对

let map = new Map();

map.set('name', 'david');

map.get('name');

map.has('name');

12.Promises

远离回调地狱，可以转换成垂直代码

func1(value1)

.then(func2)

.then(func3)

.then(func4)

.then(func5, value5 => {

});

13.Generators

用同步的代码风格来写异步代码

function* genFunc() {

// (A)

console.log('First');

yield; //(B)

console.log('Second'); //(C)

}

ES7

1. includes

代码:

let array = ['1','2','3']

if(array.includes('2')){

console.log('有')

}

2. 指数操作符

2**3 == 8

ES8

1. object.entries()

代码:

let obj = {a: 1, b: 2, c: 3};

Object.entries(obj).forEach(([key, value]) =>{

console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3

})

2.Async Await

异步看起来和同步写法一样

代码:

async fetchData(query) =>{

try {

const response = await axios.get(`/q?query=${query}`);

const data = response.data;

return data;

}

catch (error) {

console.log(error)

}

}

fetchData(query).then(data => {

this.props.processfetchedData(data)

})

原文链接：https://www.jianshu.com/p/f8145c799456