各个击破：ECMAScript 2019 提供的 3 种深拷贝数据的方法！-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，深拷贝数据是非常常见的需求。而 ECMAScript 2019 为我们提供了三种全新的深拷贝数据的方法，分别为 Object.fromEntries(), Array.prototype.flat() 和 Array.prototype.flatMap()。本文将详细介绍这三种方法的使用场景、使用方法以及注意事项。

`Object.fromEntries()`

该方法用于将数组转换为对象，用于实现深拷贝时非常方便。

下面是一个示例，将一个二维数组转换成对象：

const arr = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(arr);
console.log(obj); // { a: 1, b: 2, c: 3 }

在实际应用中，可以使用这个方法实现深拷贝，比如拷贝一个对象：

const obj = { a: { b: { c: 'hello' } } };
const copy = Object.fromEntries(Object.entries(obj));
console.log(copy.a.b.c); // 'hello'

需要注意的一点是，该方法须基于 Object.entries 返回的数组进行操作，因此需要额外注意数据类型的转换问题。

`Array.prototype.flat()`

该方法用于将嵌套的数组打平，从而实现深拷贝。接收一个可选的参数 depth，用于指定打平的层级。

下面是示例代码：

// javascriptcn.com 代码示例
// depth = 1
const arr1 = [1, [2, 3], [4, [5, 6]]];
const flatArr1 = arr1.flat(1);
console.log(flatArr1); // [1, 2, 3, 4, [5, 6]]

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

需要注意的是，如果打平的层级深度超过了实际的层级，将无法打平。

`Array.prototype.flatMap()`

该方法的作用和 Array.prototype.map() 相似，不同之处在于当返回值为数组时，会将其打平处理。同样也接收一个可选的参数 depth。

下面是示例代码：

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

在不需要打平深度的情况下，与 Array.prototype.map() 一样使用即可。

总结

随着 ECMAScript 的不断更新，JavaScript 语言的功能越来越强大。本文介绍了 ECMAScript 2019 新增的三个深拷贝数据的方法，它们分别是 Object.fromEntries()、 Array.prototype.flat() 和 Array.prototype.flatMap()。在实际应用中，可以根据需求选择合适的方法实现深拷贝，提高代码质量。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652b65ba7d4982a6ebd52a85