ES6-ES14 新特性速查

一、ES6（ECMAScript 2015）

1. Let/const: 块级作用域的变量声明，代替 var

let name = 'dog';
const IP = '127.0.0.1';

2. 箭头函数： 自动绑定当前的this

const add = (a, b) => a + b;  // this 指向 window

3. 模板字符串： 支持多行字符串和表达式插值

const sayHello = `
hello,
js
`

4. 解构赋值： 从数组或对象中提取值

const [first, second] = [1, 2];
const {name, age} = {name: 'Tom', age: 18};

5. 类语法： class 语法糖

class Person {
	constructor(name) {
		this.name = name;
	}

	greet() {
		console.log(`Hi, ${this.name}`);
	}
}

const p1 = new Person('Tony');
p.greet(); // Hi, Tony

6. Promise: 异步编程标准化

const fethData = new Promise((resovle, reject) => {
	try{
		setTimeout(() => {
			resolve('Data');
		}, 1000)
	} cache (error){
		reject(error);
	}
})

7. 模块化（导入导出）：import/export，模块化代码结构

// math.js
export const sum = (a, b) => a + b;


// main.js
import { add } from './math.js';

二、ES7(ECMAScript 2016)

1. Array.prototype.includes(): 检查数组中是否包含某个值

const arr = [1, 3, 5, 7, 9];
console.log(arr.includes(5)) // true

2.指数运算符： 幂运算

2 ** 3 // 8

三、ES8(ECMAScript 2017)

1. Async/await: 异步风格编写异步代码

async function fetchData() {
	const response = await fetch('url..');
	console.log(response);
}

2. 对象方法扩展

• Object.values(): 返回对象值的数组
• Object.entires(): 返回键值对数组

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

Object.entires({a: 1, b: 2}); // [['a', 1], ['b', 2]]

3. 字符串填充方法： padStart()/padEnd() 格式化字符串长度

'5'.padStart(2, '0'); // '05'

四、ES9 (ECMAScript 2018)

1. 对象展开/Rest 参数: 支持对象解构与合并

const obj ={...{a: 1}, ...{b: 2}}; // {a: 1, b: 2}

2. 正则表达式改进

• 命名捕获组： 通过 ? 命名匹配组
• 反向断言： 匹配前/后符合条件的文本

// 命名捕获
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
const result = ref.exec('<a href="http://x.com">link</a>');
console.log(result.groups.url); // https://x.com


// 反向断言
/(?<=\\d)\\w+/.exec('123abc'); // 'abc'
7. promise.finally(): 无论成功与否都会执行的回调
fetchData.then(() => {...}).catch(() => {...}).finally(() => {...});

五、ES10(ECMAScript 2019)

1. 数组方法

• ** flat() : 递归展开数组 **
• ** flatMap() : 映射后展开 **

// flat
[1, [2, 3]].flat(2); // [1, 2, 3]

[1, 2].flatMap(x => [x, x * 2]); // [1, 2, 2, 4];

2. Object.fromEntries(): 键值对数组转对象

Object.fromEntries([['a', '1'], ['b', 2]]); // {a: '1', b: 2}

3. 字符串方法： trimStart() / trimEnd() 去除收尾空格

'    hello  '.trimStart(); // 'hello  '

六、ES11 (ECMAScript 2020)

1. promise.allSettled(): 所有promise完成时返回的结果（无论成功还是失败）

Promise.allSettled([Promise.resolve(1), Promise.reject(2)]).then(res => console.log(res));

2. BigInt: 表示任意大整数

const bigNum = 9007199254740991n;

3. 动态导入： import() 按需加载模块

import('./module.js').then(module => module.doSomething());

4. globalThis: 跨环境获取全局变量

console.log(globalThis); // window 或 global

七、ES12 (ECMAScript 2021)

1. 逻辑赋值操作符：??= 仅在左侧为null或者undefined 的时候赋值

let a;
a ??= 'default value';
console.log(a); // 'default value'

2. String.prototype.replaceAll(): 替换所有匹配项

'aaaabcd'.replaceAll('a', '1'); // '1111bcd'

3. Promise.any() 任一 Promise 成功即返回

Promise.any([Promise.reject(1), Promise.resolve(2)]).then((res) => console.log(res)); // 2

八、ES13 (ECMAScript 2022)

1. 数组索引方法 at(): 支持负数索引

[1, 2, 3].at(-1); // 3

2. 类私有字段： 使用 # 声明私有属性

class Person {
	#age; // 私有属性
	constructor(age) {
		this.#age = age;
	}
}

3. 模块顶层 await 在模块中直接使用 await

const data = await fetchData();

九、ES14(ECMAScript 2023)

1. 数组查找方法： findLast / findLastIndex 从后向前查找

	[1, 2, 3, 2].findLast(x => x === 2); // 2

2. Symbol 作为 WeakMap : 使用唯一标识做键

const key = Symbol('key');
const map = new WeakMap();
map.ser(key, {data: 'secret'});

3. 不可变数组方法：toReversed() / toSorted() 返回新数组

const arr = [3, 2, 1];
const sortedArr = arr.toSorted(); // [1, 2, 3], 不会改变原数组，返回新的数组 sortedArr
const reversedArr = arr.toReversed(); //[1, 2, 3], 不会改变原数组，返回新的数组 reversedArr