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

问题描述

问 题

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

解决方案

好处就是，不同于=，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的属性。

这篇关于javascript - js里面的clone方法有什么用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！