1
const originArr = [1, { name: "张三" }];
2
const assignArr = originArr;
3

4
assignArr[0] = 100;
5
assignArr[1].name = "李四";
6

7
console.log("原数组：", originArr);
8
console.log("赋值数组：", assignArr);

1
const originArr = [1, { name: "张三" }];
2
const shallowCopyArr = [...originArr];
3

4
shallowCopyArr[0] = 100;
5
shallowCopyArr[1].name = "李四";
6

7
console.log("原数组：", originArr);
8
// 输出：[1, { name: "李四" }] → 表层没影响，嵌套对象被修改了！
9
console.log("浅拷贝数组：", shallowCopyArr);
10
// 输出：[100, { name: "李四" }] → 表层独立，嵌套和原数组共用

1
//语法：Object.assign(target, ...sources)
2
const obj = { a: 1 };
3
const copy = Object.assign({}, obj);
4
console.log("我是copy的对象", copy);
5
console.log("我是原对象", obj);

1
const o1 = { a: 1 };
2
const o2 = { [Symbol("foo")]: 2 };
3

4
const obj = Object.assign({}, o1, o2);
5
console.log(obj); // { a: 1, [Symbol("foo")]: 2 }

1
const obj = Object.create(
2
  { foo: 1 },
3
  {
4
    // foo 是个继承属性。
5
    bar: {
6
      value: 2, // bar 是个不可枚举属性。
7
    },
8
    baz: {
9
      value: 3,
10
      enumerable: true, // baz 是个自身可枚举属性。
11
    },
12
  },
13
);
14

15
const copy = Object.assign({}, obj);
16
console.log(copy); // { baz: 3 }

1
<!-- 引入本地 node_modules 里的 Lodash 核心库 -->
2
<script src="./node_modules/lodash/lodash.min.js"></script>
3

4
<!-- 引入 Lodash CDN（核心库） -->
5
<!-- <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script> -->
6

7
var objects = [{ 'a': 1 }, { 'b': 2 }];
8
var shallow = _.clone(objects);
9
console.log(shallow[0] === objects[0]);

1
const arr1 = [1, 2, { name: "张三" }];
2
const arr2 = [...arr1];
3

4
arr1[0] = 111;
5
arr1[2].name = "李四";
6

7
console.log("\n=== 扩展运算符 (...) 浅拷贝 ===");
8
console.log("原数组 arr1：", arr1);
9
console.log("拷贝数组 arr2：", arr2);

1
const arr1 = [1, 2, { name: "张三" }];
2
const arr2 = structuredClone(arr1, {
3
  transfer: [], // 关闭传输流
4
  // 自定义克隆器：对对象类型直接返回原引用（不深拷贝）
5
  clone: (value) => {
6
    if (typeof value === "object" && value !== null) {
7
      return value; // 嵌套对象不复制，直接用原引用（实现浅拷贝效果）
8
    }
9
    return structuredClone(value); // 基础类型正常复制
10
  },
11
});
12

13
arr1[0] = 111;
14
arr2[2].name = "李四";
15

16
console.log("\n=== structuredClone() 强制浅拷贝（不推荐） ===");
17
console.log("原数组 arr1：", arr1);
18
console.log("拷贝数组 arr2：", arr2);

1
const arr1 = [1, 2, { name: "张三" }];
2
const arr2 = JSON.parse(JSON.stringify(arr1));
3

4
arr1[0] = 100;
5
arr2[2].name = "李四";
6

7
console.log("=== JSON.parse(JSON.stringify) 深拷贝 ===");
8
console.log("原数组 arr1：", arr1);
9
console.log("深拷贝数组 arr2：", arr2);
10

11
const arrWithLimit = [1, () => {}, undefined, Symbol("test")];
12
const arr2WithLimit = JSON.parse(JSON.stringify(arrWithLimit));
13
console.log("局限性示例：", arr2WithLimit);

1
const arr1 = [1, 2, { name: "张三" }];
2
const arr2 = _.cloneDeep(arr1);
3

4
arr2[1] = 200;
5
arr2[2].name = "王五";
6

7
console.log("\n=== Lodash _.cloneDeep 深拷贝 ===");
8
console.log("原数组 arr1：", arr1);
9
console.log("深拷贝数组 arr2：", arr2);
10

11
const arrWithComplex = [
12
  1,
13
  { name: "赵六" },
14
  () => console.log("函数"),
15
  Symbol("test"),
16
];
17
const arr2WithComplex = _.cloneDeep(arrWithComplex);
18
console.log("支持复杂类型：", arr2WithComplex[2]);
19
console.log("支持 Symbol：", arr2WithComplex[3]);

1
const arr1 = [1, 2, { name: "张三" }];
2
const arr2 = structuredClone(arr1);
3

4
arr2[0] = 300;
5
arr2[2].name = "赵六";
6

7
console.log("\n=== structuredClone 深拷贝 ===");
8
console.log("原数组 arr1：", arr1); // [1, 2, { name: "张三" }]
9
console.log("深拷贝数组 arr2：", arr2); // [300, 2, { name: "赵六" }]
10

11
const arrWithCycle = [1, { name: "孙七" }];
12
arrWithCycle.push(arrWithCycle); // 构建循环引用（数组引用自身）
13
const arr2WithCycle = structuredClone(arrWithCycle);
14
console.log("是否支持循环引用：", arr2WithCycle[2] === arr2WithCycle);
15

16
// 局限性示例（不支持函数）：
17
const arrWithFunc = [1, () => {}];
18
// const arr2WithFunc = structuredClone(arrWithFunc); // 报错：DataCloneError（函数不支持）

1
const arr1 = [1, 2, { name: "张三" }];
2

3
function deepClone(target) {
4
  if (Array.isArray(target)) {
5
    return target.map((item) => deepClone(item));
6
  }
7
  // 创建新对象，递归拷贝每个属性
8
  if (typeof target === "object" && target !== null) {
9
    const newObj = {};
10
    for (const key in target) {
11
      newObj[key] = deepClone(target[key]);
12
    }
13
    return newObj;
14
  }
15
  return target;
16
}
17

18
const arr2 = deepClone(arr1);
19

20
arr2[1] = 400;
21
arr2[2].name = "周八";
22

23
console.log("\n=== 手动递归 深拷贝 ===");
24
console.log("原数组 arr1：", arr1);
25
console.log("深拷贝数组 arr2：", arr2);

1
/**
2
 * 实用递归深拷贝函数（支持常见类型+循环引用）
3
 * @param {any} target - 要拷贝的目标数据（数组/对象/基础类型等）
4
 * @returns {any} 深拷贝后的新数据
5
 */
6
function deepClone(obj) {
7
  if (typeof obj !== "object" || obj === undefined) {
8
    // 如果obj不是object类型或者为undefined,不做处理直接返回
9
    return obj;
10
  }
11

12
  let result; // 声明一个返回结果
13
  if (obj instanceof Array) {
14
    // 判断obj是数组还是对象
15
    result = [];
16
  } else {
17
    result = {};
18
  }
19

20
  for (let key in obj) {
21
    // 确保key 不是原型上的属性
22
    if (obj.hasOwnProperty(key)) {
23
      // 递归调用，一直往下挖，最终完成深拷贝
24
      result[key] = deepClone(obj[key]);
25
    }
26
  }
27
  return result; // 返回一份完全独立的拷贝
28
}