当前位置：首页 > news >正文

ES10（2019）、ES11（2020）新增特性（八）

news 来源：原创 2025/8/22 14:39:55

ES10（2019）

Array.flat()

Array.flatMap()

String.trimStart()和String.trimEnd()

Symbol.prototype.description

Object.fromEntries()

ES11（2020）

Nullish coalescing Operator【空值运算符】

可选链（Optional Chaining）

Promise.allSettled

import()动态加载函数

新基本数据类型BigInt

globalThis

String.prototype.matchAll()

ES10（2019）

Array.flat()

array.flat()方法接受一个可选的参数，该参数指定要展平的深度。如果不提供参数，默认深度为1，意味着它只会展平一层嵌套数组。如果该参数为Infinity，则将数组完全展开（为一维数组）。

语法：【 array.flat(num)】

参数：num指定要展平的深度(可选参数)，默认情况下，深度为 1。

返回值：返回一个新数组，其中包含原数组及其所有子数组的元素。

const arr = [[1, 2], , [3, 4], 5];
console.log(arr.flat()); // [ 1, 2, 3, 4, 5 ]const array = [1, [2, [3, 4]], 5];
console.log(arr.flat(2); // 深度为2，结果为 [1, 2, 3, 4, 5]const arrVeryDeep = [[1, [2, 2, [3, [4, [5, [6]]]]], 1]];
console.log(arrVeryDeep.flat(Infinity)); // [ 1, 2, 2, 3, 4, 5, 6, 1 ]

Array.flatMap()

array.flatMap() 函数接受一个回调函数作为参数，并返回一个新的映射数组

语法：【array.flatMap()方法接受一个映射函数作为参数，该函数定义了如何转换数组中的每个元素。】

返回值：返回一个新数组，其中包含映射函数返回的每个数组的展平元素。

用途：

array.flatMap()方法不仅将嵌套数组展平，还允许你指定一个映射函数来转换数组中的每个元素，然后再进行展平。

array.flatMap()在你需要在展平数组的同时对数组元素进行某种转换时非常有用。例如，当你需要将每个元素复制或转换为另一种形式时。

const numbers = [1, 2, 3, 4];
const flatMappedArray = numbers.flatMap(num => [num, num * 2]); // 结果为 [1, 2, 2, 4, 3, 6, 4, 8]

映射与展平

array.flat()仅负责展平数组，不涉及元素的转换；array.flatMap()结合了映射和展平，允许你在展平之前对元素进行转换。

这里就有点像array.map + array.flat() - 超过1层的展平 = array.flatMap()。这个方法的语义化很明显，但是也可以通过嵌套的使用来实现基于array.flatMap()的映射和高维展平。

// flatMap中嵌套flat来实现复杂的展平const complexArray = [{ strings: ['a', 'b'], numbers: [1, 2] },{ strings: ['c', 'd'], numbers: [3, 4] }
];const result = complexArray.flatMap(obj => {// 首先，使用flatMap映射每个字符串到一个包含字符串和对应数字的数组return obj.strings.flatMap(str => {// 然后，再次使用flatMap映射每个数字到一个包含字符串和数字的数组return obj.numbers.map(num => [str, num]);});
}).flat(Infinity); // 使用Infinity确保所有层级都被展平console.log(result);// 结果为：['a', 1, 'a', 2, 'b', 1, 'b', 2,'c', 3, 'c', 4, 'd', 3, 'd', 4
]

String.trimStart()和String.trimEnd()

String.trim() //去除字符串前后端空格【以前就有的方法】

String.trimStart() //去除字符前空格

String.trimEnd() //去除字符后空格

注：三个方法都是从原始字符串中返回一个新字符串，不会更改原始字符串

const str = '   JavaScript   ';
const result = str.trimStart();console.log({ str });        //{ str: '   JavaScript   ' }
console.log({ result });     //{ result: 'JavaScript   ' }const str = '   JavaScript   ';
const result = str.trimEnd();console.log({ str });        //{ str: '   JavaScript   ' }
console.log({ result });     //{ result: '   JavaScript' }

Symbol.prototype.description

Symbol.prototype.description是Symbol对象的一个属性，用于获取Symbol值的描述。每个 Symbol 值都有一个与之关联的描述字符串，这个描述字符串可以通过description属性来获取。

【描述字符串的作用】描述字符串主要用于在控制台输出时提供更多的信息，帮助区分不同的 Symbol 值。当 Symbol 对象被转换为字符串时，会包含其描述信息，这使得在调试时更容易识别不同的 Symbol 值‌

const sym = Symbol('foo');
console.log(sym.description); // 输出: "foo"

Object.fromEntries()

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

【语法】Object.fromEntries(iterable)

【参数】iterable，类似 Array 、Map 或者其他实现了可迭代协议的可迭代对象。

【返回值】一个由该迭代对象条目提供对应属性的新对象。

Object.fromEntries()方法接收一个键值对的列表参数，并返回一个带有这些键值对的新对象。这个迭代参数应该是一个能够实现 @@iterable方案的对象，返回一个迭代器对象。它生成一个具有两个元素的类数组的对象，第一个元素是将用作属性键的值，第二个元素是与该属性键关联的值。

注：Object.fromEntries() 和 Object.entries() 是互逆的操作。

常用实例应用

1、Map转化为 Object：通过 Object.fromEntries()，可以将 Map转换为 Object

2、Array 转化为 Object：通过 Object.fromEntries()，可以将 Array 转换为 Object

ES11（2020）

Nullish coalescing Operator【空值运算符】

空运算符（Nullish Coalescing Operator）操作符：??。是JavaScript ES2020引入的一个新运算符，是一个相对新的特性，用于处理null和undefined值。这个运算符提供了一种简洁的方式来指定默认值，当变量为null或undefined时，可以自动使用提供的默认值。本文将详细介绍空运算符的基本概念、作用、使用场景以及一些实用的代码示例。

【语法】let result = variable ?? defaultValue;

【参数】variable ：要检查的变量；defaultValue：如果variable 为null或undefined，则返回的默认值

【返回值】一个由该迭代对象条目提供对应属性的新对象。

与逻辑或运算符的区别

在空运算符引入之前，开发人员通常使用逻辑或运算符（||）来提供默认值。但是，逻辑或运算符会将任何“假值”（如0、''、false等）都视为false，这可能会导致意外的结果。空运算符只会在变量为null或undefined时才返回默认值，因此更加精确。

let value = null;
let result1 = value || 'default'; // 结果是 'default'
let result2 = value ?? 'default'; // 结果也是 'default'value = 0;
result1 = value || 'default'; // 结果是 'default'，因为0被视为假值
result2 = value ?? 'default'; // 结果是 0，因为0不是null或undefined

可选链（Optional Chaining）

可选链操作符 ?.允许你读取位于连接对象链深处的属性，而不必显式地验证链中的每一环是否有效。如果链中的某一环是 null 或 undefined，表达式短路返回 undefined 而不是抛出错误。

【语法】obj?.property obj?.[method]()

如果 object 存在且不为 null 或 undefined，则返回 object.property 的值。
如果 object 为 null 或 undefined，则返回 undefined，而不会抛出错误。

const user = {name: 'liming',details: { age: 18 }
};// 使用可选链访问 user.details.age
console.log(user.details?.age); // 输出：18 // 如果 details 为 null 或 undefined，不会抛出错误
const userWithoutDetails = {name: 'liming'
};console.log(userWithoutDetails.details?.age); // 输出：undefined

Promise.allSettled

Promise.allSettled ‌
‌是一个用于并行执行多个异步操作并收集所有结果的方法。它接受一个promise数组作为参数，返回一个promise对象，该对象在所有输入的promise都已fulfilled或rejected后解析。当所有的 Promise 都已完成（无论是成功还是失败）时，返回的 Promise 将被解决（resolved）。返回的结果是一个数组，数组中的每个元素都是一个对象，表示每个 Promise 的结果。

与Promise.allPromise.all不同，Promise.allSettled返回的promise永远不会rejected，无论输入的promise中是否有失败的。

等待所有 Promise 都完成（无论是成功还是失败）。
返回的结果数组包含每个 Promise 的状态和结果。

const promises = [Promise.resolve(1),Promise.reject('error'),Promise.resolve(3)
];Promise.allSettled(promises).then((results) => {results.forEach((result) => {if (result.status === 'fulfilled') {console.log('Fulfilled:', result.value);} else {console.log('Rejected:', result.reason);}});
});// 输出结果：
Fulfilled: 1
Rejected: error
Fulfilled: 3

适用场景

Promise.allSettled 适用于需要等待所有异步操作完成后再进行下一步操作的场景，无论这些操作是成功还是失败。例如，批量处理多个 API 请求，并在所有请求完成后统一处理结果。

import()动态加载函数

ES11 引入 import() 函数，支持动态加载模块。参数即所要加载的模块的位置，返回值是一个 Promise 对象。可以使用 .then 和 .catch 方法进行数据处理。当模块加载成功后，该模块会作为一个对象，可以通过对象解构赋值语法获取输出接口。此外，‌import()‌ 可以配合 ‌Promise.all‌ 方法同时加载多个模块，并且可以放在任何地方，因为它是在运行时执行的。‌

使用场景

按需加载‌：在Vue项目中，可以使用 ‌import()‌ 实现路由的按需加载，从而提高应用性能。

//vue项目路由按需加载
{path:'/document'name:'document'component:()=>import(../document/index.vue) 
}//模块的按需加载
btn.click=function(){import('../document').then(fn=>{...})
}

条件加载‌：在需要时动态加载模块，

//条件加载
if(true){return import('./document/info').then(msg=>{//加载内容}).catch(err=>{//error codo})
}

新基本数据类型BigInt

BigInt 是ES11引入的新的基本数据类型。BigInt 数据类型的目的是比Number数据类型支持的范围更大的整数值，以任意精度表示整数。使用 Number解决了之前Number整数溢出的问题。

创建和使用BigInt

BigInt可以通过在整数字面量后添加n后缀来创建，例如let n = 12345678901234567890n;。此外，还可以使用BigInt()函数将普通整数或字符串转换为BigInt类型。需要注意的是，BigInt()函数只能接受整数或可转换为整数的字符串作为参数，否则会抛出错误。

globalThis

globalThis是在 ECMAScript 2020 (ES11) 中标准化的，得到了广泛的标准化支持。它可以在所有现代 JavaScript 环境中使用，包括浏览器、Web Worker、Node.js 等。

注：globalThis在不同环境下的所指

浏览器：window
worker：self
node：global

global和globalThis适用范围：

global：

环境限制：global 仅在 Node.js 环境中有效。
兼容性：由于 global 是 Node.js 特有的，因此在非 Node.js 环境中（如浏览器）使用 global 会导致错误。

globalThis：

广泛适用：globalThis 是在 ECMAScript 2020 (ES11) 中标准化的，得到了广泛的标准化支持。它可以在所有现代 JavaScript 环境中使用，包括浏览器、Web Worker、Node.js 等。
一致性：使用 globalThis 可以确保代码在不同环境中的一致性和可移植性。

globalThis.myGlobalVar = "Hello from globalThis!";  
console.log(globalThis.myGlobalVar); // 在浏览器和 Node.js 中都会输出: Hello from globalThis!

String.prototype.matchAll()

matchAll()是ES2020的新特性，对于处理复杂正则表达式和捕获组特别有用，但需要全局标志且在某些旧版浏览器中可能需polyfill支持

使用matchAll()方法时，需要提供一个正则表达式作为参数。如果正则表达式包含全局标志g，matchAll()会返回一个迭代器，包含所有匹配的结果；如果不包含g标志，则只会返回第一个匹配的结果。

const str = 'foo bar baz';
const regex = /foo/g;
const iterator = str.matchAll(regex);for (const match of iterator) {console.log(match);
}// 这段代码会输出所有匹配foo的结果。

上一章：ES9（2018）新增特性（七）

ES10（2019）

Array.flat()

Array.flatMap()

String.trimStart()和String.trimEnd()

Symbol.prototype.description

Object.fromEntries()

ES11（2020）

Nullish coalescing Operator【空值运算符】

可选链（Optional Chaining）

Promise.allSettled

import()动态加载函数

新基本数据类型BigInt

globalThis

String.prototype.matchAll()

相关文章：