JS语法ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性

JS语法ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性

目录

JS语法ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性

前言

新特性

ES6（2015）

1. 类（class）

2. 模块化(ES Module)

3. 箭头（Arrow）函数

4. 函数参数默认值

5. 模板字符串

6. 解构赋值

7. 延展操作符

8. 对象属性简写

9. Promise

10. let和const

ES7（2016）

1. Array.prototype.includes()

2. 指数操作符

ES8（2017）

1. async/await

2. Object.values()

3. Object.entries()

4. String padding

5. 函数参数列表结尾允许逗号

6. Object.getOwnPropertyDescriptors()

7. SharedArrayBuffer对象

8. Atomics对象

 

ES9（2018）

1. 异步迭代

2. Promise.finally()

3. Rest/Spread 属性

4. 正则表达式命名捕获组

5. 正则表达式反向断言

6. 正则表达式dotAll模式

 

ES10（2019）

1. Array.flat()和Array.flatMap()

2. String.trimStart()和String.trimEnd()

3. String.prototype.matchAll

4. Symbol.prototype.description

5. Object.fromEntries()

6. 可选 Catch

ES11（2020）

1. Nullish coalescing Operator(空值处理)

2. Optional chaining（可选链）

3. Promise.allSettled

4. import()

5. 新基本数据类型BigInt

6. globalThis

 

ES12（2021）

1. replaceAll

2. Promise.any

3. WeakRefs

4. 逻辑运算符和赋值表达式

5. 数字分隔符

参考:

---

前言

 

本文集合了 ES6 至 ES11 常用到的特性，包括还在规划的 ES12，只列举大概使用，详细介绍的话内容量将十分巨大~.~。PS：使用新特性需要使用最新版的 bable 就行转义

新特性

ES6（2015）

 

1. 类（class）

 

class Man {
  constructor(name) {
    this.name = '小豪';
  }
  console() {
    console.log(this.name);
  }
}
const man = new Man('小豪');
man.console(); // 小豪

 

2. 模块化(ES Module)

 

// 模块 A 导出一个方法
export const sub = (a, b) => a + b;
// 模块 B 导入使用
import { sub } from './A';
console.log(sub(1, 2)); // 3

 

3. 箭头（Arrow）函数

 

const func = (a, b) => a + b;
func(1, 2); // 3

 

4. 函数参数默认值

 

function foo(age = 25,){ // ...}

 

5. 模板字符串

 

const name = '小豪';
const str = `Your name is ${name}`;

 

6. 解构赋值

 

let a = 1, b= 2;
[a, b] = [b, a]; // a 2  b 1

 

7. 延展操作符

 

let a = [...'hello world']; // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]

 

8. 对象属性简写

 

const name='小豪',
const obj = { name };

 

9. Promise

 

Promise.resolve().then(() => { console.log(2); });
console.log(1);
// 先打印 1 ，再打印 2

 

10. let和const

 

let name = '小豪'；
const arr = [];

 

---

 

ES7（2016）

 

1. Array.prototype.includes()

 

[1].includes(1); // true

 

2. 指数操作符

 

2**10; // 1024

 

---

 

ES8（2017）

 

1. async/await

 

异步终极解决方案

 

async getData(){
    const res = await api.getTableData(); // await 异步任务
    // do something    
}

 

2. Object.values()

 

Object.values({a: 1, b: 2, c: 3}); // [1, 2, 3]

 

3. Object.entries()

 

Object.entries({a: 1, b: 2, c: 3}); // [["a", 1], ["b", 2], ["c", 3]]

 

4. String padding

 

// padStart
'hello'.padStart(10); // "     hello"
// padEnd
'hello'.padEnd(10) "hello     "

 

5. 函数参数列表结尾允许逗号

 

6. Object.getOwnPropertyDescriptors()