es6,es7,es8语法总结

偏执的太偏执、 2022-05-20 03:10 271阅读 0赞

***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)
> 
>         \})

作者：Charlescat  
链接：https://www.jianshu.com/p/f8145c799456  
來源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。