js之es新特性

ES6 (ECMAScript 2015)

1. let 和 const

• let 允许声明一个块作用域的变量。
• const 允许声明一个块作用域的常量。

let x = 10;
if (x === 10) {
    let x = 20; // 这里的 x 和外面的 x 不是同一个变量
    console.log(x); // 20
}
console.log(x); // 10

const y = 5;
// y = 10; // 会抛出错误，因为y是一个常量
1
2
3
4
5
6
7
8
9

2. 模板字符串

• 允许字符串内嵌表达式，可以用反引号 （``） 来定义。

let name = "world";
console.log(`Hello, ${name}!`); // "Hello, world!"
1
2

3.箭头函数

• 提供了一种更简洁的写法来声明匿名函数。

let add = (a, b) => a + b;
console.log(add(2, 3)); // 5
1
2

4.解构赋值

• 允许用类似数组或对象字面量的语法来分配值到变量中。

// 数组解构
let [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

// 对象解构
let {firstName, lastName} = {firstName: "John", lastName: "Doe"};
console.log(firstName); // John
console.log(lastName); // Doe
1
2
3
4
5
6
7
8
9

5.Promise

• 提供了一种更好的异步编程解决方案，比传统的回调函数方式更易于理解和维护。

let promise = new Promise(function(resolve, reject) {
    setTimeout(() => resolve("done"), 1000);
});

promise.then(
    result => console.log(result), // "done"
    error => console.log(error)
);
1
2
3
4
5
6
7
8

ES7 (ECMAScript 2016)

1.数组的 includes 方法

• 判断数组是否包含某个值。

let arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false
1
2
3

2.指数运算符

• 简化了幂运算的书写。

console.log(2 ** 3); // 8
1

ES8 (ECMAScript 2017)

1.async/await

• 使异步代码看起来更像同步代码。

async function asyncCall() {
  console.log('calling');
  let result = await new Promise((resolve) => {
    setTimeout(() => resolve("resolved"), 1000)
  });
  console.log(result);
}

asyncCall();
1
2
3
4
5
6
7
8
9

2.Object.values()

• 该方法返回一个给定对象自身的所有可枚举属性值的数组，不包括原型链上的属性。

const object = { a: 1, b: '2', c: true };
console.log(Object.values(object)); // [1, '2', true]
1
2

3.Object.entries()

• 与Object.values()类似，Object.entries()返回一个给定对象自身的所有可枚举属性[key,
  value]对的数组。

const object = { a: 1, b: '2', c: true };
console.log(Object.entries(object)); // [['a', 1], ['b', '2'], ['c', true]]
1
2

4.String Padding

• 两个实用的字符串实例方法：padStart()和padEnd()允许以一种便捷的方式给字符串前后填充字词，直到达到目标长度。

padStart()

let str = "5";
console.log(str.padStart(2, "0")); // "05", 填充至长度2，用"0"填充
1
2

padEnd()

let str = "5";
console.log(str.padEnd(2, "0")); // "50", 填充至长度2，用"0"填充
1
2

5.Object.getOwnPropertyDescriptors();

• 此方法用于获取一个对象的所有自身属性的描述符。若没有任何自身属性，则返回空对象。

const obj = {
  property1: 42
};
const descriptors = Object.getOwnPropertyDescriptors(obj);
console.log(descriptors.property1.writable); // true
console.log(descriptors.property1.value); // 42
1
2
3
4
5
6

6.尾部逗号 (Trailing commas) 在函数参数列表和调用中

• ES8 允许在函数参数定义和调用时使用尾部逗号，这有助于版本控制系统中清晰地查看实际更改的参数，避免因格式更改引起的不必要的差异。

function myFunc(
  param1,
  param2, // 尾部逗号
) {
  // 函数体
}

myFunc(
  1,
  2, // 尾部逗号
);
1
2
3
4
5
6
7
8
9
10
11

ES9 (ECMAScript 2018)

1. 异步迭代（for-await-of）

• 允许使用 for…of 循环迭代异步操作，特别是对异步生成的集合。

async function* asyncGenerator() {
  let i = 0;
  while (i < 3) {
    // 模拟异步操作
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i++;
  }
}

(async () => {
  for await (let num of asyncGenerator()) {
    console.log(num);
  }
})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.Promise.prototype.finally()

• 可以指定一个在promise执行之后无论是fulfilled还是rejected都会执行的回调函数。

new Promise((resolve, reject) => {
    // 异步操作
    setTimeout(() => resolve("Success"), 1000);
})
.then(result => console.log(result))
.catch(error => console.error(error))
.finally(() => console.log("Promise is settled."));
1
2
3
4
5
6
7

3.Rest/Spread 属性

• 对象现在也支持 rest 参数和 spread 属性。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

let n = { x, y, ...z };
console.log(n); // { x: 1, y: 2, a: 3, b: 4 }
1
2
3
4
5
6
7

ES10 (ECMAScript 2019)

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

• 可以按照指定的深度递归地将数组扁平化。

let arr = [1, [2, [3, [4]]]];

console.log(arr.flat()); // 默认深度为1, 结果: [1, 2, [3, [4]]]
console.log(arr.flat(2)); // 指定深度为2, 结果: [1, 2, 3, [4]]
console.log(arr.flat(Infinity)); // 指定深度为Infinity, 结果: [1, 2, 3, 4]
1
2
3
4
5

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

• 分别用于去除字符串开头和结尾的空白字符。

let greeting = '   Hello world!   ';

console.log(greeting.trimStart()); // "Hello world!   "
console.log(greeting.trimEnd()); // "   Hello world!"
1
2
3
4

3.Object.fromEntries()

• 把键值对列表转换为一个对象

let entries = [['name', 'John'], ['age', 30]];
let obj = Object.fromEntries(entries);

console.log(obj); // { name: "John", age: 30 }
1
2
3
4

ES11 (ECMAScript 2020)

1.BigInt 类型

• 支持任意精度的整数。

let bigInt = 1234567890123456789012345678901234567890n;

console.log(bigInt + 1n); // 1234567890123456789012345678901234567891n
1
2
3

2.动态导入（import()）

• 允许你按需动态加载模块

(async () => {
  if (condition) {
    const module = await import('./module.js');
    module.doSomething();
  }
})();
1
2
3
4
5
6

3.Promise.allSettled()

• 返回一个在所有给定的promise已经fulfilled或rejected后的promise，并带有每个promise的结果。

let promises = [
  Promise.resolve(33),
  new Promise(resolve => setTimeout(() => resolve(66), 0)),
  Promise.reject(new Error('an error'))
];

Promise.allSettled(promises)
  .then(results => results.forEach((result) => console.log(result.status)));
1
2
3
4
5
6
7
8

ES12 (ECMAScript 2021)

1.String.prototype.replaceAll()

• 允许替换字符串中出现的所有匹配项。

let quote = 'To be or not to be';
console.log(quote.replaceAll('be', 'test')); // "To test or not to test"
1
2

2.逻辑赋值运算符

• 包含逻辑与 (&&=), 逻辑或 (||=) 和逻辑空值 (??=) 赋值运算符。

let x = 0;
let y = 1;

x &&= 2; // x = x && 2
console.log(x); // 0

y ||= 2; // y = y || 2
console.log(y); // 1

let z = null;
z ??= 2; // z = z ?? 2
console.log(z); // 2
1
2
3
4
5
6
7
8
9
10
11
12