前端面试之js 中常见的深拷贝的方法
Posted 泠泠在路上
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端面试之js 中常见的深拷贝的方法相关的知识,希望对你有一定的参考价值。
前端小伙伴们在面试的时候,经常会遇到问JS深拷贝的知识点,所以特地写这篇博客,也算是给自己积累一些知识点。
目前有5种经常提到的深拷贝的方法:
1、通过 JSON 对象实现深拷贝
this.data = JSON.parse(JSON.stringify(this.vm.$store.state.security.menuArr))
或
function deepClone(data)
let _data = JSON.stringify(data),
dataClone = JSON.parse(_data);
return dataClone;
;
2、通过jQuery的extend方法实现深拷贝
var array = [1,2,3,4]; var newArray = $.extend(true,[],array);
3、使用递归的方式实现深拷贝
//使用递归的方式实现数组、对象的深拷贝
function _deepClone(source)
let target;
if (typeof source === 'object')
target = Array.isArray(source) ? [] :
for (let key in source)
if (source.hasOwnProperty(key))
if (typeof source[key] !== 'object')
target[key] = source[key]
else
target[key] = _deepClone(source[key])
else
target = source
return target
4、Object.assign()拷贝
当对象中只有一级属性,没有二级属性的时候,此方法为深拷贝,
但是对象中有对象的时候,此方法,在二级属性以后就是浅拷贝。
//针对深拷贝,需要使用其他办法,因为 Object.assign()拷贝的是属性值。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。
let obj1 = a: 0 , b: c: 0;
let obj2 = Object.assign(, obj1);
console.log(JSON.stringify(obj2)); // a: 0, b: c: 0
obj1.a = 1;
console.log(JSON.stringify(obj1)); // a: 1, b: c: 0
console.log(JSON.stringify(obj2)); // a: 0, b: c: 0
obj2.a = 2;
console.log(JSON.stringify(obj1)); // a: 1, b: c: 0
console.log(JSON.stringify(obj2)); // a: 2, b: c: 0
obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // a: 1, b: c: 3
console.log(JSON.stringify(obj2)); // a: 2, b: c: 3
最后一次赋值的时候,b是值是对象的引用,只要修改任意一个,其他的也会受影响
// Deep Clone (深拷贝)
obj1 = a: 0 , b: c: 0;
let obj3 = JSON.parse(JSON.stringify(obj1));
obj1.a = 4;
obj1.b.c = 4;
console.log(JSON.stringify(obj3)); // a: 0, b: c: 0
5、lodash函数库实现深拷贝
多数时候,我会用lodash提供的函数库来调用,毕竟封装过的,健壮性应该还是ok的,哈哈~
lodash很热门的函数库,提供了 lodash.cloneDeep()
实现深拷贝
参考文档:
https://www.cnblogs.com/lijuntao/p/13066834.html
https://www.cnblogs.com/sweet-ice/p/10599011.html
以上是关于前端面试之js 中常见的深拷贝的方法的主要内容,如果未能解决你的问题,请参考以下文章