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的改变并不会影响到arr1arr.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 100console.log(obj3.name, obj3.class.a); // Ash 1

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

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

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

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

javascript中的深拷贝和浅拷贝？