JSON.parse(JSON.stringify(array))

JSON.parse(JSON.stringify(array)) 是一种常见的 JavaScript 技巧，通常用于创建一个对象或数组的深拷贝。让我们详细解释一下这个方法的工作原理、优点和限制。

工作原理

1. JSON.stringify(array)：

   • 这个方法将 JavaScript 对象或数组转换为 JSON 字符串。JSON.stringify 只会序列化那些可以被 JSON 表示的数据，例如普通的对象、数组、字符串、数字等。
   • 对于函数、undefined、Symbol、Date 对象、Map、Set 等特殊类型的数据，JSON.stringify 将忽略它们（或转换为 null），并且不会处理原型链上的属性。

2. JSON.parse(...)：

   • 这个方法将 JSON 字符串转换回 JavaScript 对象或数组。JSON.parse 会重建原始数据结构，但只包括 JSON 支持的数据类型。

通过这种方式，你可以创建一个原始数据的深拷贝，因为 JSON 的序列化和解析会创建一个全新的对象或数组实例。

示例

const originalArray = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }];
const copiedArray = JSON.parse(JSON.stringify(originalArray));

copiedArray[0].name = 'Charlie'; // 修改副本中的数据

console.log(originalArray[0].name); // 输出: Alice (原始数据未受影响)
console.log(copiedArray[0].name);   // 输出: Charlie (副本中的数据已被修改)

优点

1. 简便：

   • 这种方法非常简单易用，只需一行代码即可实现深拷贝。

2. 无需依赖第三方库：

   • 不需要使用额外的深拷贝库，如 Lodash 的 cloneDeep 函数。

限制

1. 数据类型限制：

   • JSON.stringify 只支持 JSON 能够序列化的数据。它不能处理以下数据类型：
     • 函数：函数会被忽略。
     • undefined：会被忽略。
     • Symbol：会被忽略。
     • Date 对象：会被转换为字符串。
     • Map 和 Set：会被转换为空对象。
     • RegExp：会被转换为空对象。
     • Infinity、NaN：会被转换为 null。

2. 性能问题：

   • 对于非常大的对象或数组，这种方法可能会导致性能问题，因为它涉及序列化和反序列化操作。

3. 循环引用：

   • 如果对象或数组中存在循环引用，JSON.stringify 会抛出错误。例如：

     const obj = {};
     obj.self = obj;
     JSON.parse(JSON.stringify(obj)); // 会抛出 TypeError: Converting circular structure to JSON
     

     适用场景

   • 适用于简单的对象和数组，并且你确定它们不会包含非 JSON 支持的数据类型。
   • 适合需要快速实现深拷贝的场景，特别是在数据结构相对简单的情况下。

   • JSON.parse(JSON.stringify(array)) 是一种创建深拷贝的简单方法，但它有一定的局限性。在处理复杂数据结构或需要处理特殊数据类型时，可能需要使用更全面的深拷贝方案，如 Lodash 的 cloneDeep。

     总结