探索JavaScript中的深浅拷贝：理解数据类型和引用传递

2023-10-01 15:40:52

理解数据类型和引用传递

在JavaScript中，数据类型一般分为两大类：基本数据类型（原始类型）和引用类型（复杂类型）。

基本数据类型 ：在存储时，变量中存储的是值本身，包括string，number，boolean。基本数据类型在进行赋值操作时，会直接将值复制到新的变量中，这种传递方式称为值传递。值传递的特点是，新变量与原变量相互独立，修改新变量的值不会影响原变量。

引用类型 ：包括对象（object）和数组（array）。引用类型在存储时，变量中存储的是指向该数据在内存中的地址，而不是值本身。引用类型在进行赋值操作时，会将该地址复制到新的变量中，这种传递方式称为引用传递。引用传递的特点是，新变量与原变量共享同一个内存地址，修改新变量的值也会影响原变量。

深浅拷贝与引用传递的区别

深浅拷贝和引用传递是JavaScript中两种不同的数据复制方式。

深拷贝 ：是指复制一个对象或数组的副本，这个副本与原对象或数组是完全独立的，修改副本的值不会影响原对象或数组。

浅拷贝 ：是指复制一个对象或数组的副本，这个副本与原对象或数组共享相同的内存地址，修改副本的值也会影响原对象或数组。

执行深浅拷贝操作

在JavaScript中，可以通过以下两种方式执行深拷贝操作：

使用JSON.parse()和JSON.stringify()方法 ：

const originalObject = {
  name: 'John',
  age: 30,
  address: {
    street: 'Main Street',
    city: 'New York',
    state: 'NY'
  }
};

const deepCopy = JSON.parse(JSON.stringify(originalObject));

console.log(originalObject === deepCopy); // false
console.log(originalObject.address === deepCopy.address); // false

使用递归函数 ：

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  if (Array.isArray(obj)) {
    return obj.map(item => deepCopy(item));
  }

  const newObj = {};
  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }

  return newObj;
}

const originalObject = {
  name: 'John',
  age: 30,
  address: {
    street: 'Main Street',
    city: 'New York',
    state: 'NY'
  }
};

const deepCopy = deepCopy(originalObject);

console.log(originalObject === deepCopy); // false
console.log(originalObject.address === deepCopy.address); // false