正文

掌握JS数值传递：揭秘深拷贝与浅拷贝的奥秘及实战技巧

/0 浏览量
0910

JavaScript 是一种基于原型的编程语言，它的变量类型主要有基本数据类型和引用数据类型。当我们对变量进行赋值时，基本数据类型（如数字、字符串、布尔值等）是按值传递的，而引用数据类型（如对象、数组等）则是按引用传递的。这就涉及到深拷贝与浅拷贝的概念。

深拷贝与浅拷贝的定义

浅拷贝

浅拷贝指的是复制一个对象时，只复制对象的第一层属性，而不是复制对象内部属性指向的值。在 JavaScript 中，使用 Object.assign() 或扩展运算符 ... 进行赋值操作，都会进行浅拷贝。

深拷贝

深拷贝指的是复制一个对象时，包括对象的所有属性和内部属性指向的值。在 JavaScript 中，可以使用 JSON.parse(JSON.stringify(object)) 或递归遍历对象的方式来实现深拷贝。

浅拷贝与深拷贝的实战技巧

浅拷贝实战

下面是一个使用浅拷贝的例子：

let obj1 = { name: '张三', age: 18, hobbies: ['篮球', '足球'] };
let obj2 = Object.assign({}, obj1);

在上面的例子中，obj1 和 obj2 的 name 和 age 属性值相同，但 hobbies 属性是一个数组。修改 obj1 的 hobbies 属性时，obj2 的 hobbies 属性也会跟着改变，这是因为 hobbies 是一个引用数据类型。

深拷贝实战

下面是一个使用深拷贝的例子：

let obj1 = { name: '张三', age: 18, hobbies: ['篮球', '足球'] };
let obj2 = JSON.parse(JSON.stringify(obj1));

在上面的例子中，obj1 和 obj2 的 name、age 和 hobbies 属性值都相同。修改 obj1 的任意属性时，obj2 不会有任何改变。

递归遍历实现深拷贝

以下是一个使用递归遍历实现深拷贝的例子：

function deepCopy(obj) {
  let copy;

  if (obj === null) {
    copy = null;
  } else if (obj instanceof Date) {
    copy = new Date(obj.getTime());
  } else if (obj instanceof RegExp) {
    copy = new RegExp(obj);
  } else if (typeof obj !== 'object') {
    copy = obj;
  } else {
    copy = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        copy[key] = deepCopy(obj[key]);
      }
    }
  }

  return copy;
}

let obj1 = { name: '张三', age: 18, hobbies: ['篮球', '足球'] };
let obj2 = deepCopy(obj1);

在上面的例子中，我们定义了一个 deepCopy 函数，该函数可以递归遍历对象的属性，并将属性值复制到新的对象中。这样，obj1 和 obj2 就实现了深拷贝。

总结

在 JavaScript 中，了解深拷贝与浅拷贝的概念和区别对于开发者来说非常重要。在实际开发中，我们需要根据需求选择合适的拷贝方式，以确保程序的正确运行。希望本文能够帮助大家更好地理解深拷贝与浅拷贝的奥秘及实战技巧。

-- 展开阅读全文 --