深入探索 JavaScript 对象和数组拷贝的艺术

2023-10-27 11:41:50

JavaScript 中的数据类型

在 JavaScript 中，数据类型可以分为两种：基本类型值和引用类型值。基本类型值包括 Number、Boolean、String、NULL 和 Undefined，而引用类型值则包括 Array、Object、Date、RegExp 和 Function。

基本类型值在内存中占有固定大小的空间，并且彼此独立。这意味着对基本类型值进行赋值或拷贝时，不会影响到原始值。例如：

let a = 10;
let b = a;
a = 20;

console.log(a); // 20
console.log(b); // 10

引用类型值在内存中占有动态大小的空间，并且可以指向其他值。这意味着对引用类型值进行赋值或拷贝时，实际上是将指向原始值的引用复制给了新变量。例如：

let a = [1, 2, 3];
let b = a;
a.push(4);

console.log(a); // [1, 2, 3, 4]
console.log(b); // [1, 2, 3, 4]

对象和数组的拷贝

在 JavaScript 中，对象和数组都是引用类型值。这意味着对对象或数组进行赋值或拷贝时，实际上是将指向原始值的引用复制给了新变量。例如：

let person = {
  name: 'John Doe',
  age: 30
};

let student = person;
student.name = 'Jane Doe';

console.log(person); // { name: 'Jane Doe', age: 30 }
console.log(student); // { name: 'Jane Doe', age: 30 }

在这个例子中，将 person 对象赋值给了 student 变量。这实际上是将指向 person 对象的引用复制给了 student 变量。因此，对 student 对象进行修改，也会影响到 person 对象。

浅拷贝和深拷贝

在 JavaScript 中，对象和数组的拷贝可以分为浅拷贝和深拷贝。浅拷贝是指只拷贝一层引用，而深拷贝是指拷贝所有层级的引用。

浅拷贝可以通过直接赋值或使用 Object.assign() 方法来实现。例如：

let person = {
  name: 'John Doe',
  age: 30
};

let student = Object.assign({}, person);
student.name = 'Jane Doe';

console.log(person); // { name: 'John Doe', age: 30 }
console.log(student); // { name: 'Jane Doe', age: 30 }

在这个例子中，使用 Object.assign() 方法对 person 对象进行了浅拷贝。这实际上是将指向 person 对象的引用复制给了 student 变量。因此，对 student 对象进行修改，不会影响到 person 对象。

深拷贝可以通过递归实现。例如：

function deepCopy(obj) {
  if (typeof obj === 'object' && obj !== null) {
    const newObj = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
      newObj[key] = deepCopy(obj[key]);
    }
    return newObj;
  } else {
    return obj;
  }
}

let person = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
    zip: '12345'
  }
};

let student = deepCopy(person);
student.name = 'Jane Doe';
student.address.street = '456 Elm Street';

console.log(person); // { name: 'John Doe', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA', zip: '12345' } }
console.log(student); // { name: 'Jane Doe', age: 30, address: { street: '456 Elm Street', city: 'Anytown', state: 'CA', zip: '12345' } }