JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解

JS赋值、浅拷贝和深拷贝

在JavaScript开发中，我们经常需要对变量进行赋值操作，同时还需要将对象或数组复制到另一个变量中。这些操作看起来很简单，但如果不理解JavaScript中变量存储的方式，就容易引出一些微妙的问题。本文将简单介绍JS赋值、浅拷贝和深拷贝。

JS赋值

JS赋值操作可以将一个变量的值赋给另一个变量。这是一种基本的操作，也是很容易看懂的。例如：

let a = 1;
let b = a; //将变量a的值赋给变量b

在这个例子中，变量b存储着变量a的值，它们指向的是同一个内存地址，因此b的值可以随着a的修改而变化。这就是JS中的变量赋值。

浅拷贝

浅拷贝，是指创建一个新的对象或数组，保存了从原始对象或数组直接继承的属性和值。但对于对象和数组等引用类型，只复制它们的引用，而不是实际的对象或数组。这样，如果原始对象或数组发生了变化，那么浅复制的对象或数组也会跟着变化。例如：

let arr1 = [1, 2, 3];
let arr2 = arr1; //将arr1的值赋给arr2

arr1[0] = 4;
console.log(arr2[0]); //输出4

在这个例子中，arr2实际上是arr1的引用，他们指向的是同一个内存地址。当我们修改arr1的第一个元素后，arr2也跟着发生了改变。这就是JS中的浅拷贝。

对象和数组的浅拷贝

下面，我们来看一下如何对JavaScript中的对象和数组进行浅拷贝。

对象的浅拷贝

下面是一个简单的例子，展示了如何使用Object.assign()方法对对象进行浅拷贝。

let obj1 = { a: 1, b: 2 };
let obj2 = Object.assign({}, obj1);

console.log(obj2); // {a: 1, b: 2}

在这个例子中，我们创建了一个新的空对象，然后使用Object.assign()方法将原始对象（即obj1）的属性和值复制到了新的对象中。这就是对象的浅拷贝。

数组的浅拷贝

下面是一个简单的例子，展示了如何对JavaScript中的数组进行浅拷贝。

let arr1 = [1, 2, 3];
let arr2 = arr1.slice();

console.log(arr2); // [1, 2, 3]

在这个例子中，我们使用slice()方法来创建一个新的数组，该数组包含原始数组中的所有元素。这就是数组的浅拷贝。

深拷贝

深拷贝，是指复制对象或数组本身，而不是它们内部的子对象或数组。与浅拷贝不同，深拷贝创建了一个完全独立的对象或数组，它们的内容和原始对象或数组完全相同。这意味着，即使原始对象或数组发生变化，深复制的对象或数组也不会发生任何变化。例如：

let obj1 = {
  a: 1,
  b: {
    c: 2
  }
};

let obj2 = JSON.parse(JSON.stringify(obj1));

console.log(obj2); // {a: 1, b: {c: 2}}

在这个例子中，我们使用JSON.parse()方法将对象obj1转换为JSON字符串，然后再使用JSON.stringify()方法将JSON字符串转换为新的对象obj2。由于这种方法创建了完全独立的对象，所以obj2的内容和obj1完全相同。这就是JS中的深拷贝。

对象和数组的深拷贝

下面，我们来看一下如何对JavaScript中的对象和数组进行深拷贝。

对象的深拷贝

这里我们采用递归的方式进行深拷贝操作。例如：

function deepClone(obj) {
    let newObj = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if(obj.hasOwnProperty(key)) {
            newObj[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key];
        }
    }
    return newObj;
}

let obj1 = {
  a: 1,
  b: {
    c: 2
  }
};

let obj2 = deepClone(obj1);

console.log(obj2); // {a: 1, b: {c: 2}}

在这个例子中，我们使用了递归函数deepClone()来复制对象，该函数对于对象中包含的所有属性和值进行递归操作，直到所有的值都被复制到新的对象中。这就是对象的深拷贝。

数组的深拷贝

这里我们采用递归的方式进行深拷贝操作。例如：

function deepClone(arr) {
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
        if(typeof arr[i] === 'object') {
            newArr[i] = deepClone(arr[i]);
        } else {
            newArr[i] = arr[i];
        }
    }
    return newArr;
}

let arr1 = [1, 2, [3, 4]];

let arr2 = deepClone(arr1);

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

在这个例子中，我们使用了递归函数deepClone()来复制数组，该函数对于数组中包含的所有元素进行递归操作，直到所有的元素都被复制到新的数组中。这就是数组的深拷贝。