浅克隆 VS 深克隆

2023-11-04 19:01:25

在 JavaScript 中，克隆是创建另一个对象或值副本的过程。它可用于复制对象或数组，而无需引用原始对象或数组。有两种克隆类型：浅克隆和深克隆。

浅克隆

浅克隆创建新对象，该对象包含对原始对象中相同属性的引用。这意味着如果原始对象中的任何属性发生更改，新对象中的相应属性也会更改。

// 创建一个对象
const original = {
  name: 'Alice',
  age: 20,
};

// 创建原始对象的浅克隆
const clone = { ...original };

// 修改原始对象的一个属性
original.name = 'Bob';

// 输出克隆对象的名称
console.log(clone.name); // 输出：Bob

深克隆

深克隆创建新对象，该对象包含原始对象中所有属性的副本。这意味着如果原始对象中的任何属性发生更改，新对象中的相应属性不会更改。

// 创建一个对象
const original = {
  name: 'Alice',
  age: 20,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
  },
};

// 创建原始对象的深克隆
const clone = JSON.parse(JSON.stringify(original));

// 修改原始对象的一个属性
original.name = 'Bob';

// 输出克隆对象的名称
console.log(clone.name); // 输出：Alice

浅比较与深比较

比较两个对象是否相等时，可以使用浅比较或深比较。浅比较比较两个对象是否引用相同的内存位置。深比较比较两个对象是否具有相同的值。

// 创建两个对象
const obj1 = {
  name: 'Alice',
  age: 20,
};

const obj2 = {
  name: 'Alice',
  age: 20,
};

// 使用浅比较比较两个对象
console.log(obj1 === obj2); // 输出：false

// 使用深比较比较两个对象
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // 输出：true

回调函数

回调函数是作为参数传递给另一个函数的函数。回调函数在调用函数执行后执行。回调函数可用于在函数执行后执行其他任务，例如处理数据或更新用户界面。

// 定义一个回调函数
const callback = (result) => {
  console.log(result);
};

// 将回调函数作为参数传递给另一个函数
const doSomething = (callback) => {
  const result = 1 + 1;
  callback(result);
};

// 调用函数
doSomething(callback); // 输出：2