从 ES7 到 ES14 的 JavaScript 里程碑

站长

2024年08月06日 21:47 · 阅读数 24

ES2016(ES7)

Array.prototype.includes()

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

语法

arr.includes(searchElement [, fromIndex])

searchElement：需要查找的值。

fromIndex：可选，开始搜索的索引（从零开始）

负索引从数组末尾开始计数——如果 fromIndex < 0，那么实际使用的是 fromIndex + array.length。然而在这种情况下，数组仍然从前往后进行搜索。
如果 fromIndex < -array.length 或者省略 fromIndex，则使用 0，这将导致整个数组被搜索。
如果 fromIndex >= array.length，则不会搜索数组并返回 false。

示例

const arr = ["a", "b", "c"];

console.log(arr.includes("b")); // true
console.log(arr.includes("b", 1)); // true
console.log(arr.includes("b", 2)); // false
console.log(arr.includes("b", -1)); // false
console.log(arr.includes("b", -2)); // true

注意点

使用 includes() 查找字符串是区分大小写的。

const arr = ["a", "b", "c"];

console.log(arr.includes("A")); // false

使用 includes() 只能判断简单类型的数据，无法判断复杂类型的数据。

const arr = ["a", ["b", "c"], "d", { name: "ayang" }];

console.log(arr.includes(["b", "c"])); // false
console.log(arr.includes({ name: "ayang" })); // false

与 `indexOf()` 比较

includes() 能识别 NaN，indexOf() 不能识别 NaN。

const arr = ["a", "b", NaN, "c"];

console.log(arr.includes(NaN)); // true
console.log(arr.indexOf(NaN)); // -1

最后，如果只想知道某个值是否在数组中存在，而并不关心它的索引位置，建议使用 includes()，如果想获取一个值在数组中的位置，那么使用 indexOf()。

includes()在稀疏数组中搜索 undefined，得到 true，indexOf()在稀疏数组中搜索 undefined，得到 -1。

const arr = ["a", , "b"];

console.log(arr.includes(undefined)); // true
console.log(arr.indexOf(undefined)); // -1

幂运算符（**）

幂运算符返回第一个操作数取第二个操作数的幂的结果。它等价于 Math.pow()，不同之处在于，它还接受 BigInt 作为操作数。

Math.pow()

console.log(Math.pow(2, 10)); // 1024
console.log(Math.pow(BigInt(2), BigInt(10))); // TypeError: Cannot convert a BigInt value to a number

幂运算符

console.log(2 ** 10); // 1024
console.log(BigInt(2) ** BigInt(10)); // 1024n

ES2017(ES8)

在 ES5 中，有 Object.keys() 静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。

const obj = {
  name: "ayang",
  age: 18,
};

console.log(Object.keys(obj)); // ["name", "age"]

Object.values()

Object.values() 静态方法返回一个给定对象的自有可枚举字符串键属性值组成的数组。

const obj = {
  name: "ayang",
  age: 18,
};

console.log(Object.values(obj)); // ["ayang", 18]

Object.entries()

Object.entries() 静态方法返回一个数组，包含给定对象自有的可枚举字符串键属性的键值对。

const obj = {
  name: "ayang",
  age: 18,
};

console.log(Object.entries(obj)); // [['name', 'ayang'], ['age', 18]]

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() 静态方法返回给定对象的所有自有属性描述符。

const obj = {};

Object.defineProperty(obj, "name", {
  value: "ayang",
  writable: true,
  enumerable: false,
  configurable: false,
});

const descriptors = Object.getOwnPropertyDescriptors(obj);

console.log(descriptors.name.value); // "ayang"
console.log(descriptors.name.writable); // true
console.log(descriptors.name.enumerable); // false
console.log(descriptors.name.configurable); // false

String.prototype.padStart()

padStart() 方法用另一个字符串填充当前字符串（如果需要会重复填充），直到达到给定的长度。填充是从当前字符串的开头开始的。

语法

str.padStart(targetLength [, padString])

targetLength

当前 str 填充后的长度。如果该值小于或等于 str.length，则会直接返回当前 str。

padString（可选）

用于填充当前 str 的字符串。如果 padString 太长，无法适应 targetLength，则会从末尾被截断。默认值为空格。

示例

const str = "ayang";

console.log(str.padStart(10)); // "     ayang"
console.log(str.padStart(10, "ayang")); // "ayangayang"
console.log(str.padStart(6, "ayang")); // "aayang"
console.log(str.padStart(1)); // "ayang"

应用场景

日期格式化：

const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const padStartMonth = String(month).padStart(2, "0");
const padStartDay = String(day).padStart(2, "0");

console.log(`${year}/${month}/${day}`); // 2024/7/2
console.log(`${year}/${padStartMonth}/${padStartDay}`); // 2024/07/02

String.prototype.padEnd()

padEnd() 方法会将当前字符串从末尾开始填充给定的字符串（如果需要会重复填充），直到达到给定的长度。填充是从当前字符串的末尾开始的。

语法

str.padEnd(targetLength [, padString])

targetLength

当前 str 填充后的长度。如果该值小于或等于 str.length，则会直接返回当前 str。

padString（可选）

用于填充当前 str 的字符串。如果 padString 太长，无法适应 targetLength，则会被截断：对于从左到右的语言，左侧的部分将会被保留；对于从右到左的语言，右侧的部分将会被保留。默认值为空格。

示例

从左到右

const str = "ayang";

console.log(str.padEnd(10)); // "ayang     "
console.log(str.padEnd(10, "ayang")); // "ayangayang"
console.log(str.padEnd(6, "ayang")); // "ayanga"
console.log(str.padEnd(1)); // "ayang"

从右到左

let str = "مرحبا"; // 阿拉伯文的 "你好"

console.log(str.padEnd(10, "سعدت بلقائك")); // "مرحباسعدت"

应用场景

在前端通常需要毫秒为单位的时间戳，但是，后端同学返回的时间戳则不一定是毫秒，可能是 unix 时间戳，以秒为单位。所以，我们为了保证单位都是毫秒，除了判断长度再乘 1000 这个方法之外，可以直接用 padEnd 方法。

const time1 = 171988759;
const time2 = 1719887590656;

console.log(String(time1).padEnd(13, "0")); // 1719887590000
console.log(String(time2).padEnd(13, "0")); // 1719887590656

尾逗号 Trailing commas

在 ES5 中，对象字面值中的尾后逗号也是符合语法的，ES8 支持函数参数中的尾后逗号。

function fn(p) {}
function fn(p,) {}

(p) => {};
(p,) => {};

async/await

async function 声明创建一个绑定到给定名称的新异步函数。函数体内允许使用 await 关键字，这使得我们可以更简洁地编写基于 promise 的异步代码，并且避免了显式地配置 promise 链的需要。

function resolveAfter2Seconds() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("resolved");
    }, 2000);
  });
}

async function asyncCall() {
  console.log("calling");
  const result = await resolveAfter2Seconds();
  console.log(result); // 2s后输出 "resolved"
}

asyncCall();

使用场景

需要先请求 a 接口，等返回信息之后，用 a 接口返回的数据再请求 b 接口。

async function fetchData() {
  try {
    const aResponse = await fetch("a");
    const aResult = aResponse.json();

    const bResponse = await fetch("b", {
      method: "post",
      body: JSON.stringify(aResult),
    });

    return bResponse.json();
  } catch (error) {
    // 处理异常
  }
}

ES2018(ES9)

Object Rest & Spread

`rest` 示例

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

let { a, ...rest } = obj;

console.log(rest); // { b: 2, c: 3 }

当对象的键值对不确定时，可以将必选的键赋值给变量，并用一个变量收集其余的可选键值对。

`spread` 示例

const obj1 = {
  a: 1,
  b: 2,
  c: 3,
};

const obj2 = {
  ...obj1,
  c: 4,
  d: 5,
};

console.log(obj2); // { a: 1, b: 2, c: 4, d: 5 }

这块代码展示了 spread 语法，可以把一个对象的数据都拓展到另一个对象中。需要注意的是，如果存在相同的属性名，只有最后一个会生效。

for await...of

用于处理异步迭代器的循环语句。它允许你以同步的方式处理异步数据流，非常适合处理需要逐步获取数据的场景。

先看 for...of 示例：

function TimeOut(time) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve(time);
    }, time);
  });
}

async function test() {
  let arr = [TimeOut(2000), TimeOut(1000), TimeOut(3000)];

  for (let item of arr) {
    console.log(Date.now(), item.then(console.log));
  }
}

test();

// 1719891191280 Promise { <pending> }
// 1719891191282 Promise { <pending> }
// 1719891191283 Promise { <pending> }
// 1000
// 2000
// 3000

再看 for await...of 示例：

function TimeOut(time) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve(time);
    }, time);
  });
}

async function test() {
  let arr = [TimeOut(2000), TimeOut(1000), TimeOut(3000)];

  for await (let item of arr) {
    console.log(Date.now(), item);
  }
}

test();

// 1719891277375 2000
// 1719891277383 1000
// 1719891278375 3000

Promise.prototype.finally()

Promise.prototype.finally() 方法返回一个 Promise，在 promise 执行结束时，无论结果成功与否，都会执行 finally 指定的回调函数。避免在 then() 和 catch() 中各写一次相同逻辑代码的情况。

示例

new Promise((resolve, reject) => {
  if (Math.random() > 0.5) {
    resolve("success");
  } else {
    reject("fail");
  }
})
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("finally");
  });

使用场景

在前端发送请求时，如果有加载框，无论请求成功与否，请求结束后都需要关闭加载框。在这种情况下，将关闭加载框的代码放在 finally() 里是最合适不过的做法。

ES2019(ES10)

Object.fromEntries()

Object.fromEntries() 静态方法将键值对列表转换为一个对象。

const obj = {
  name: "ayang",
  age: 18,
};
const entriesResult = Object.entries(obj);

console.log(entriesResult); // [['name', 'ayang'], ['age', 18]]
console.log(Object.fromEntries(entriesResult)); // { name: 'ayang', age: 18 }

Array.prototype.flat()

flat() 方法创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中。

语法

flat([depth])

depth 可选

指定要提取嵌套数组的结构深度，默认值为 1。

示例

const arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); // [ 1, 2, 3, 4 ]

const arr2 = [1, 2, [3, 4, [5, 6]]];
console.log(arr2.flat()); // [ 1, 2, 3, 4, [ 5, 6 ] ]

const arr3 = [1, 2, [3, 4, [5, 6]]];
console.log(arr3.flat(2)); // [ 1, 2, 3, 4, 5, 6 ]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
console.log(arr4.flat(Infinity)); // [ 1, 2, 3, 4,  5, 6, 7, 8, 9, 10 ]

Array.prototype.flatMap()

flatMap() 方法对数组中的每个元素应用给定的回调函数，然后将结果展开一级，返回一个新数组。它等价于在调用 map() 方法后再调用深度为 1 的 flat() 方法（arr.map(...args).flat()），但比分别调用这两个方法稍微更高效一些。

语法

flatMap(callbackFn [, thisArg])

callbackFn

一个在数组的每个元素上执行的函数。它应该返回一个包含新数组元素的数组，或是要添加到新数组中的单个非数组值。该函数将被传入以下参数：
- element
  
  数组中正在处理的当前元素。
- index
  
  数组中正在处理的当前元素的索引。
- array
  
  调用 flatMap() 的当前数组。
thisArg 可选

在执行 callbackFn 时用作 this 的值。。

示例

const arr = [1, 2, 3, 4, 5];

console.log(arr.flatMap((item) => [item, item * 2])); // [ 1, 2, 2, 4, 3, 6, 4, 8, 5, 10 ]

String.prototype.trimStart()

trimStart()方法会从字符串的开头移除空白字符，并返回一个新的字符串，而不会修改原始字符串。trimLeft() 是该方法的别名。

const greeting = "   Hello world!   ";

console.log(greeting.trimStart()); // "Hello world!   "

String.prototype.trimEnd()

trimEnd() 方法会从字符串的结尾移除空白字符，并返回一个新的字符串，而不会修改原始字符串。trimRight() 是该方法的别名。

const greeting = "   Hello world!   ";

console.log(greeting.trimEnd()); // "   Hello world!"

可选的 Catch Binding

在 ES10 之前我们都是这样捕获异常的：

try {
    // tryCode
} catch (error) {
    // catchCode
}

在这里 error 是必须的参数，在 ES10 可以省略这个参数：

try {
    // tryCode
} catch {
    // catchCode
}

Symbol.prototype.description

description 是一个只读属性，它会返回 Symbol 对象的可选描述的字符串。与 Symbol.prototype.toString() 不同的是它不会包含 "Symbol()" 的字符串。

const username = Symbol("ayang");

console.log(username.toString()); // "Symbol(ayang)"
console.log(username.description); // "ayang"
username.description = "ayangweb"; // 只读属性，不可被修改
console.log(username.description); // "ayang"

console.log(Symbol().description); // undefined

Function.prototype.toString()

Function 实例的 toString() 方法返回一个表示该函数源码的字符串。

function fn() {
  // es10新特性
  console.log("hello");
}

console.log(fn.toString());
// function fn() {
//   // es10新特性
//   console.log("hello");
// }

ES2020(ES11)

空值合并运算符（??）

空值合并运算符是一个逻辑运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

示例

console.log(0 || "ayang"); // "ayang"
console.log("" || "ayang"); // "ayang"
console.log(NaN || "ayang"); // "ayang"
console.log(null || "ayang"); // "ayang"
console.log(undefined || "ayang"); // "ayang"

console.log(0 ?? "ayang"); // 0
console.log("" ?? "ayang"); // ""
console.log(NaN ?? "ayang"); // NaN
console.log(null ?? "ayang"); // "ayang"
console.log(undefined ?? "ayang"); // "ayang"

由于 || 是一个布尔逻辑运算符，左侧的操作数会被强制转换成布尔值用于求值。任何假值（0， ''， NaN， null， undefined）都不会被返回。这导致如果你想使用 0，'' 或NaN作为有效值，就会出现不可预料的后果。

可选链运算符（?.）

可选链运算符允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 运算符的功能类似于 . 链式运算符，不同之处在于，在引用为空 ( null 或者 undefined ) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

示例

let obj;
let fn;
let arr;

console.log(obj.username); // TypeError: Cannot read properties of undefined (reading 'username')
console.log(obj?.username); // undefined

console.log(fn()); // TypeError: fn is not a function
console.log(fn?.()); // undefined

console.log(arr[0]); // TypeError: Cannot read properties of undefined (reading '0')
console.log(arr?.[0]); // undefined

globalThis

全局属性 globalThis 包含全局的 this 值，类似于全局对象（global object）。

在 globalThis 之前，获取某个全局对象的唯一方式就是 Function('return this')()，但是这在某些情况下会违反 CSP 规则，所以，es6-shim 使用了类似如下的方式：

var getGlobal = function () {
  if (typeof self !== "undefined") {
    return self;
  }
  
  if (typeof window !== "undefined") {
    return window;
  }
  
  if (typeof global !== "undefined") {
    return global;
  }
  
  throw new Error("unable to locate global object");
};

var globals = getGlobal();

if (typeof globals.setTimeout !== "function") {
  // 此环境中没有 setTimeout 方法！
}

但是有了 globalThis 之后，只需要：

if (typeof globalThis.setTimeout !== "function") {
  //  此环境中没有 setTimeout 方法！
}

BigInt

BigInt 是一种内置对象，它提供了一种方法来表示大于 2^53 - 1 的整数。这原本是 Javascript 中可以用 Number 表示的最大数字。BigInt 可以表示任意大的整数。

可以用在一个整数字面量后面加 n 的方式定义一个 BigInt ，或者调用函数 BigInt()（但不包含 new 运算符）并传递一个整数值或字符串值。

示例

const num1 = 9007199254740991n;
const num2 = BigInt(9007199254740991);

console.log(num1); // 9007199254740991n
console.log(num2); // 9007199254740991n

精度丢失

它在某些方面类似于 Number，但是也有几个关键的不同点：不能用于 Math 对象中的方法；不能和任何 Number 实例混合运算，两者必须转换成同一种类型。在两种类型来回转换时要小心，因为 BigInt 变量在转换成 Number 变量时可能会丢失精度。

const bigInt1 = BigInt(1234567890123456789012345678901234567890);

console.log(bigInt1); // 1234567890123456846996462118072609669120n

const bigInt2 = BigInt("1234567890123456789012345678901234567890");
const number = Number(bigInt2);

console.log(bigInt2); // 1234567890123456789012345678901234567890n
console.log(number); // 1.2345678901234568e+39

const bigInt3 = BigInt(number);

console.log(bigInt3); // 1234567890123456846996462118072609669120n
console.log(bigInt2 === bigInt3); // false

运算

以下操作符可以和 BigInt 一起使用： +、*、-、**、%。除 >>> （无符号右移）之外的位操作也可以支持。因为 BigInt 都是有符号的， >>> （无符号右移）不能用于 BigInt。为了兼容 asm.js，BigInt 不支持单目 (+) 运算符。/ 操作符对于整数的运算也没问题。可是因为这些变量是 BigInt 而不是 BigDecimal，该操作符结果会向零取整，也就是说不会返回小数部分。

const bitInt = BigInt(Number.MAX_SAFE_INTEGER);

console.log(bitInt); // 9007199254740991n
console.log(bitInt + 1n); // 9007199254740992n
console.log(bitInt * 10n); // 90071992547409910n
console.log(bitInt - 1n); // 9007199254740990n
console.log(bitInt / 10n); // 900719925474099n
console.log(bitInt % 10n); // 1n
console.log(bitInt ** 2n); // 81129638414606663681390495662081n

比较

BigInt 和 Number 不是严格相等的，但是宽松相等的。

console.log(1n === 1); // false
console.log(1n == 1); // true
console.log(1n < 2); // true
console.log(2n > 1); // true

String.prototype.matchAll()

matchAll() 方法返回一个迭代器，该迭代器包含了检索字符串与正则表达式进行匹配的所有结果（包括捕获组）。

const regexp = /t(e)(st(\d?))/g;
const str = "test1test2";

const arr = [...str.matchAll(regexp)];

console.log(arr[0]); // [ 'test1', 'e', 'st1', '1' ]
console.log(arr[1]); // [ 'test2', 'e', 'st2', '2' ]

Promise.allSettled()

Promise.all() 具有并发执行异步任务的能力。然而，它的一个主要问题是，如果其中某个任务出现异常，所有任务都会失败，Promise 会直接进入 reject 状态。为了解决这个问题，我们需要一种机制，使得无论并发任务中某个任务是否成功，都能够返回对应的状态，这就是 Promise.allSettled 的作用。

示例

const promise1 = Promise.resolve("resolve");
const promise2 = Promise.reject("reject");
const promises = [promise1, promise2];

Promise.allSettled(promises).then((results) => {
  results.forEach((item) => console.log(item));
});

// { status: 'fulfilled', value: 'resolve' }
// { status: 'rejected', reason: 'reject' }

Dynamic Import

按需 import 提案几年前就已提出，如今终于进入 ES11 正式规范。现代前端打包资源越来越大，打包成几兆的 JS 资源已成常态，但前端应用初始化时不需要全量加载，为了提升首屏渲染速度，通常使用按需加载（如懒加载图片）。这些按需加载的逻辑资源往往在特定事件回调中执行。

button.addEventListener("click", () => {
  import("./module.js")
    .then(() => {
      // 做些什么
    })
    .catch(() => {
      // 错误处理
    });
});

上面代码中，import() 方法放在 click 事件的监听函数之中，只有用户点击了按钮，才会加载这个模块。

ES2021(ES12)

逻辑运算符和赋值表达式

&&=

逻辑与赋值（x &&= y）运算仅在 x 为真值时为其赋值。

let num1 = 1;
let num2 = 2;

num1 &&= num2;
console.log(num1); // 2
// 等价于
num1 && (num1 = num2);
console.log(num1); // 2

let num3 = 0;
let num4 = 2;

num3 &&= num4;
console.log(num3); // 0
// 等价于
num3 && (num3 = num4);
console.log(num3); // 0

||=

逻辑或赋值（x ||= y）运算仅在 x 为假值时为其赋值。

let num1 = 1;
let num2 = 2;

num1 ||= num2;
console.log(num1); // 1
// 等价于
num1 || (num1 = num2);
console.log(num1); // 1

let num3 = 0;
let num4 = 2;

num3 ||= num4;
console.log(num3); // 2
// 等价于
num3 || (num3 = num4);
console.log(num3); // 2

??=

逻辑空赋值运算符（x ??= y）仅在 x 是空值（null 或 undefined）时对其赋值。

let num1 = null;
let num2 = 2;

num1 ??= num2;
console.log(num1); // 2
// 等价于
num1 ?? (num1 = num2);
console.log(num1); // 2

let num3 = undefined;
let num4 = 2;

num3 ??= num4;
console.log(num3); // 2
// 等价于
num3 ?? (num3 = num4);
console.log(num3); // 2

let num5 = 0;
let num6 = 2;

num5 ??= num6;
console.log(num5); // 0
// 等价于
num5 ?? (num5 = num6);
console.log(num5); // 0

String.prototype.replaceAll()

replaceAll() 方法返回一个新字符串，其中所有匹配 pattern 的部分都被替换为 replacement。pattern 可以是一个字符串或一个 RegExp，replacement 可以是一个字符串或一个在每次匹配时调用的函数。原始字符串保持不变。

示例

const str = "hello world";

console.log(str.replaceAll("o", "哦")); // hell哦 w哦rld
console.log(str.replaceAll(/O/gi, "哦")); // hell哦 w哦rld

使用正则表达式搜索值时，它必须是全局的。

数字分隔符

我们定义number类型数据的时候，可以使用 _ 当做分隔符，让数据更美观易懂，并不会影响该数据的值。

const num1 = 1000000000;
const num2 = 1000_000_000;

console.log(num1); // 1000000000
console.log(num2); // 1000000000

Promise.any()

Promise.any() 和 Promise.race() 类似都是返回第一个结果，但有关键区别。Promise.any() 只返回第一个成功的结果，即使某个 promise 的 reject 早于另一个 promise 的 resolve，仍会返回首个 resolve 的 promise。

示例

const promise1 = new Promise((resolve) => {
  setTimeout(resolve, 500, "one");
});

const promise2 = new Promise((_, reject) => {
  setTimeout(reject, 100, "two");
});

Promise.any([promise1, promise2]).then((value) => {
  console.log(value); // "one"
});

WeakRef

WeakRef 对象允许你保留对另一个对象的弱引用，但不会阻止垃圾回收清理被弱引用的对象。

const obj = { name: "ayang", age: 18 };
const weakRef = new WeakRef(obj);

console.log(weakRef.deref()); // { name: 'ayang', age: 18 }
console.log(weakRef.deref().age); // 18

ECMAScript2022(ES13)

类扩展

声明

在 ES13 之前，类（即class） 的声明需要依靠 constructor 来基本定义和生成实例，所以在 ES13 后就不需要这个方法了，即：

class User {
  name = "ayang";
  age = 18;

  say() {
    console.log("hello world");
  }
}

私有属性

在属性或方法前添加一个#号，该属性或方法就会变成私有的。私有属性一旦定义，任何外部访问都会导致报错。

class User {
  #name = "ayang";
  #age = 18;

  #say() {
    console.log("hello world");
  }
}

const user = new User();

console.log(user.name); // undefined
console.log(user.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class

静态属性

在属性或方法前添加一个 static，该属性或方法就会变成静态的。静态属性只能通过类名访问，不能通过实例访问。

class User {
  static name = "ayang";
  static age = 18;

  static say() {
    console.log("hello world");
  }
}

const user = new User();

console.log(User.age); // 18
console.log(user.age); // undefined

静态块

允许在类中通过 static 关键字定义一系列静态代码块，这些代码块只会在类被创建时执行一次。

一个类可以定义任意多的静态代码块，这些代码块会和穿插在它们之间的静态成员变量一起按照定义的顺序在类初始化的时候执行一次。我们还可以使用 super 关键字来访问父类的属性。

let getUsername;

class User {
  #name = "ayang";
  #age = 18;

  static {
    getUsername = (self) => self.#name;
  }
}

const user = new User();

console.log(getUsername(user)); // "ayang"

判断是否为私有变量

class User {
  #name = "ayang";

  nameIsPrivate() {
    return #name in this;
  }
}

const user = new User();

console.log(user.nameIsPrivate()); // true

await 扩展

引入了顶层 await，允许顶层直接使用。

function setTimeoutAsync() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("resolved");
    }, 1000);
  });
}

console.log(await setTimeoutAsync()); // "resolved"

at

at() 方法接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。支持数组和字符串。

const arr = [1, 2, 3, 4, 5];

console.log(arr.at(1)); // 2
console.log(arr.at(-1)); // 5

const str = "abcde";

console.log(str.at(1)); // "b"
console.log(str.at(-1)); // "e"

/d 正则扩展

正则表达式通过 /d 标志匹配索引，返回开始和结束索引。

const str = "Hello world!";

const result = /Hello/d.exec(str);
console.log(result); // [ 'Hello', index: 0, input: 'Hello world!', groups: undefined, indices: [ [0, 5], groups: undefined] ]

Object.hasOwn()

如果指定的对象自身有指定的属性，则静态方法 Object.hasOwn() 返回 true。如果属性是继承的或者不存在，该方法返回 false。

const obj = { name: "ayang" };

console.log(Object.prototype.hasOwnProperty.call(obj, "name")); // true
console.log(Object.hasOwn(obj, "name")); // true

Error: cause

Error 实例中的 cause 数据属性指示导致该错误的具体原始原因。

在捕获错误时，我们可能会使用更具体或更加实用的信息对错误进行包装，再将其重新抛出。cause 属性就用于这一场景，以便仍然可以访问原始的错误。

function fn1() {
  try {
    fn2();
  } catch (err) {
    throw new Error("New error message", { cause: "fn2函数不存在" });
  }
}

try {
  fn1();
} catch (error) {
  console.log(error.cause); // "fn2函数不存在"
}

ECMAScript2023(ES14)

Array.prototype.findLast()

findLast() 方法反向迭代数组，并返回满足提供的测试函数的第一个元素的值。如果没有找到对应元素，则返回 undefined。

示例

const numbers = [10, 2, 1, 6, 5];

console.log(numbers.findLast((item) => item > 5)); // 6

Array.prototype.findLastIndex()

findLastIndex() 方法反向迭代数组，并返回满足所提供的测试函数的第一个元素的索引。若没有找到对应元素，则返回 -1。

示例

const numbers = [10, 2, 1, 6, 5];

console.log(numbers.findLastIndex((item) => item > 5)); // 3

Array.prototype.toSorted()

Array 实例的 toSorted() 方法是 sort() 方法的复制方法版本。它返回一个新数组，其元素按升序排列。

示例

const arr1 = [2, 1, 3];
arr1.sort();

console.log(arr1); // [ 1, 2, 3 ]

const arr2 = [2, 1, 3];
const toSortedArr = arr2.toSorted();

console.log(arr2); // [ 2, 1, 3 ]
console.log(toSortedArr); // [ 1, 2, 3 ]

Array.prototype.toReversed()

Array 实例的 toReversed() 方法是 reverse() 方法对应的复制版本。它返回一个元素顺序相反的新数组。

示例

const arr1 = [1, 2, 3];
arr1.reverse();

console.log(arr1); // [ 3, 2, 1 ]

const arr2 = [1, 2, 3];
const toReversedArr = arr2.toReversed();

console.log(arr2); // [ 1, 2, 3 ]
console.log(toReversedArr); // [ 3, 2, 1 ]

Array.prototype.toSpliced()

Array 实例的 toSpliced() 方法是 splice() 方法的复制版本。它返回一个新数组，并在给定的索引处删除或替换了一些元素。

示例

const arr1 = [1, 2, 3, 4, 5];
const spliceArr = arr1.splice(0, 2);

console.log(arr1); // [ 3, 4, 5 ]
console.log(spliceArr); // [ 1, 2 ]

const arr2 = [1, 2, 3, 4, 5];
const toSplicedArr = arr2.toSpliced(0, 2);

console.log(arr2); // [ 1, 2, 3, 4, 5 ]
console.log(toSplicedArr); // [ 3, 4, 5 ]

Array.prototype.with()

Array 实例的 with() 方法是使用方括号表示法修改指定索引值的复制方法版本。它会返回一个新数组，其指定索引处的值会被新值替换。

const arr1 = [1, 2, 3, 4, 5];
arr1[0] = 10;

console.log(arr1); // [ 10, 2, 3, 4, 5 ]

const arr2 = [1, 2, 3, 4, 5];
const withArr = arr2.with(0, 10);

console.log(arr2); // [ 1, 2, 3, 4, 5 ]
console.log(withArr); // [ 10, 2, 3, 4, 5 ]

WeakMap扩展

支持 Symbol 作为键。

const weakMap = new WeakMap();
const key = Symbol("name");
weakMap.set(key, "ayang");

console.log(weakMap.get(key)); // "ayang"

结语

感谢大家阅读，对于某些细节的阐述可能还不够深入，或者有些方面的探讨还不够全面。在此，我诚恳地欢迎各位大佬的批评与指正，期待与大家共同进步。

转载自:https://juejin.cn/post/7386873037109493770

从 ES7 到 ES14 的 JavaScript 里程碑

ES2016(ES7)

Array.prototype.includes()

语法

示例

注意点

与 indexOf() 比较

幂运算符（**）

Math.pow()

幂运算符

ES2017(ES8)

Object.values()

Object.entries()

Object.getOwnPropertyDescriptors()

String.prototype.padStart()

语法

示例

应用场景

String.prototype.padEnd()

语法

示例

应用场景

尾逗号 Trailing commas

async/await

使用场景

ES2018(ES9)

Object Rest & Spread

rest 示例

spread 示例

for await...of

先看 for...of 示例：

再看 for await...of 示例：

Promise.prototype.finally()

示例

使用场景

ES2019(ES10)

Object.fromEntries()

Array.prototype.flat()

语法

示例

Array.prototype.flatMap()

语法

示例

String.prototype.trimStart()

String.prototype.trimEnd()

可选的 Catch Binding

Symbol.prototype.description

Function.prototype.toString()

ES2020(ES11)

空值合并运算符（??）

示例

可选链运算符（?.）

示例

globalThis

BigInt

示例

精度丢失

运算

比较

String.prototype.matchAll()

Promise.allSettled()

示例

Dynamic Import

ES2021(ES12)

逻辑运算符和赋值表达式

&&=

||=

??=

String.prototype.replaceAll()

示例

数字分隔符

Promise.any()

示例

WeakRef

ECMAScript2022(ES13)

类扩展

声明

私有属性

静态属性

静态块

与 `indexOf()` 比较

`rest` 示例

`spread` 示例