javascript - js里面的clone方法有什么用？

Question

有时候对数组之类的操作的时候，会使用clone方法，感觉不使用这个直接赋值也可以啊，这样做有什么好处？为了省内存？还有什么浅拷贝深拷贝之类的，原谅我是小白。。

Answer 1

好处就是，不同于“=”，clone的数组是在内存中是独立的，你可以对它为所欲为。

js中，数组和对象都属于引用类型。

const arr = [1, 2, 3, 4, 5, 6];
const arr1 = arr; // 直接赋值，arr1指向的是arr的内存，也就是说arr发生改变时，arr1也会被改变
arr.push(123);
console.log(arr1); // [1, 2, 3, 4, 5, 6, 123]

const arr = [1, 2, 3, 4, 5, 6];
const arr1 = arr.slice(0); // 克隆了一个arr1，arr与arr1指向不同的内存，arr的改变并不会影响到arr1
arr.push(123);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

所以，克隆的作用就是用来新生成一份数据，不污染原来的数据。

至于深拷贝与浅拷贝：

const obj1 = {
    name: 'Ash',
    class: {
        a: 1,
        b: 2,
    }
};

// 浅拷贝
const obj2 = {};
for (let key in obj1) {
    obj2[key] = obj1[key];
}

// 深拷贝
const copyObj = (obj) => {
    const newObj = {};
    for (let key in obj) {
        if (typeof obj[key] !== 'object') {
            newObj[key] = obj[key];
        } else {
            newObj[key] = copyObj(obj[key]);
        }
    }
    return newObj;
}
const obj3 = copyObj(obj1);

obj1.name = 'Coco';
obj1.class.a = 100;
console.log(obj2.name, obj2.class.a); // Ash 100
console.log(obj3.name, obj3.class.a); // Ash 1

可以看到，浅拷贝与深拷贝的区别在于：浅拷贝只是遍历了obj1的第一层，然后把obj1的每个属性都赋值给了obj2；而深拷贝则不会，当属性值为对象时，深拷贝会new一个空对象，然后把对象的值赋值给这个空对象，在返回这个空对象作为obj3的属性。

Answer 2

JS 编程中很重要的一个原则是「不是你的对象不要动」

做个形象的比喻，我借给你一本书（object），我以为你只是要阅读（read），你却拿去练字（write），这本书还给我我都没办法在读到正常的内容了。

而 deepClone 就解决了这个问题，我给你一本书，你去复印一下，书原样还给我，复印本你就可以随意处置了。

Answer 3

javascript中的深拷贝和浅拷贝？