ES10：不可变数据的新方法解析

随着前端技术的发展，不可变数据变得越来越受欢迎。不可变数据的特点是一旦创建就不能被修改，这有利于减少不必要的副作用和提高性能。在 ES6 中，我们已经学会了如何使用常量和 Object.freeze() 来创建不可变数据。而在 ES10 中，又新增了一些新的方法让我们可以更加方便地操作不可变数据。本文将对 ES10 中的这些新方法进行详细解析，以便读者可以更好地理解和应用它们。

Array.prototype.flat()

Array.prototype.flat() 方法可以将多维数组“扁平化”，即将嵌套的数组结构变成一维数组。它接受一个可选的参数 depth，表示要递归的深度。默认值为 1，即只扁平化一层数组。示例如下：

const arr = [1, [2, [3, [4]]]];
const flatArr1 = arr.flat();      // [1, 2, [3, [4]]]
const flatArr2 = arr.flat(2);     // [1, 2, 3, [4]]

我们可以将此方法应用于深度复制（deep copy）一个多维数组，即避免多维数组内部数据互相影响的问题。

const arr = [1, [2, [3]]];
const deepCopy = JSON.parse(JSON.stringify(arr));       // 深度复制
const flatCopy = deepCopy.flat(Infinity);                // 扁平化复制

Array.prototype.flatMap()

Array.prototype.flatMap() 方法可以同时执行 map() 和 flat() 方法。它首先对数组中的每个元素执行一个映射函数，然后将结果扁平化成一个新数组。与 map() 方法不同的是，该方法返回的是一个扁平化的结果数组，而不是一个嵌套的数组。以下示例将数组中的每个元素映射为一个新元素数组，最后将结果扁平化：

const arr = [1, 2, 3];
const flatMapArr = arr.flatMap(x => [x, x*2]);     // [1, 2, 2, 4, 3, 6]

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

String.prototype.trimStart() 和 String.prototype.trimEnd() 方法分别去掉字符串前面和后面的空格。这些方法是 trim() 方法的拓展，以增强 JavaScript 处理字符串的灵活性。以下示例演示了这些方法的用法：

const str = '   Hello world!   ';
const trimStartStr = str.trimStart();     // 'Hello world!   '
const trimEndStr = str.trimEnd();         // '   Hello world!'

Object.fromEntries()

Object.fromEntries() 方法是根据数组来创建一个对象。该数组应该是一个键值对的序列，其中每个元素都包含一个键和一个值。将该数组传递给 Object.fromEntries() 方法后，它将从数组中提取每个键值对，然后将每个键值对添加到新对象中去。以下示例将二维数组转换为对象：

const arr = [['name', 'Tom'], ['age', 20]];
const obj = Object.fromEntries(arr);     // {name: 'Tom', age: 20}

总结

以上是 ES10 新增的不可变数据相关方法的详细解析。这些新方法增加了 JavaScript 处理不可变数据的灵活性和效率，使得我们可以更好地编写高性能的 JavaScript 代码。在实际应用中，我们可以根据具体需求选择不同方法，以便更好地应对复杂的编程场景。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/665614f6d3423812e4aba1c5