深浅拷贝通常是对于引用数据类型进行的(数据类型为:对象(Object)、数组(Array)、函数(Function))
浅拷贝:
let obj = {id: 1, name: 2}; let newObj = obj; setTimeout(() => { newObj.id = 2; console.log(obj,newObj) },1000); // 输出如下 // { id: 2, name: 2 } { id: 2, name: 2 }我们发现,随着newObj的变化,obj也随之变化,这明显不是我们想要的,数组也同样如此,那么就需要进行深拷贝了。
深拷贝:
方法1(封装函数)
// 构造一个深拷贝函数 function deepClone(obj) { var result = Array.isArray(obj) ? [] : {}; // 判断当前传进来的是对象还是数组 for(var key in obj) { if (obj.hasOwnProperty(key)) { // 该key是否存在 if (typeof obj[key] === 'object' && obj[key] !== null) { // obj[key]如果为object,递归调用该方法,obj[key] = arr || obj[key] = {}都为'object' result[key] = deepClone(obj[key]); } else { result[key] = obj[key]; } } } return result; }let arr1 = [1,2,3,4,5]; let arr2 = deepClone(arr1); arr2[0] = 'hello'; arr2[4] = 'world'; console.log(arr1); // [ 1, 2, 3, 4, 5 ] console.log(arr2); // [ 'hello', 2, 3, 4, 'world' ] let obj1 = {id: 1, name: 1, love: [1,2,3,4], test: {id: 1, name: 1}}; let obj2 = deepClone(obj1); obj2.love[0] = 'ecmascript'; obj2.test.id = 2; console.log(obj1); // { id: 1, name: 1, love: [ 1, 2, 3, 4 ], test: { id: 1, name: 1 } } console.log(obj2); // { id: 1,name: 1,love: [ 'ecmascript', 2, 3, 4 ],test: { id: 2, name: 1 } }方法2(JSON.parse和JSON.stringify)
let obj1 = { id: 1, name: 1 }; let obj2 = JSON.parse(JSON.stringify(obj1)); obj2.id = 2; obj2.name = 2; console.log(obj1,obj2); // { id: 1, name: 1 } // { id: 2, name: 2 }方法3(在nodeJS项目中,有一个lodash模块,我们可以利用它提供的方法来实现深度克隆,或者将其下载到本地,引入它对应的js文件也可如下)
lodash中文网 https://www.lodashjs.com/docs/latest
// npm install lodash -S const cloneDeep = require('lodash/cloneDeep') let arr3 = [1,2,3,4]; let arr4 = cloneDeep(arr3); arr4[1] = 'hello'; console.log(arr3,arr4); // [ 1, 2, 3, 4 ] // [ 1, 'hello', 3, 4 ]
javascript实现深浅拷贝
猜你喜欢
转载自www.cnblogs.com/troublehuan/p/12029129.html
今日推荐
周排行