js深拷贝的几种方案(有更多意见的可以评论在下方,我可以整理在一起)

场景:对象content为 {}类型,将其拷贝到ctx中

方案一:

let ctx = {};
for (let key in content) {
    ctx[key] = content[key];
}

方案二:

借助lodash的cloneDeep方法来做深拷贝

import '_' from 'lodash'

const ctx = _.cloneDeep(content);

方案三:

 借助JQ的extend方法

const ctx=$.extend(true, {}, content); 

对extend 参数介绍

$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷贝,为true为深拷贝,为false,则为浅拷贝

target Object类型 目标对象,其他对象的成员属性将被附加到该对象上。

object1  objectN可选。 Object类型 第一个以及第N个被合并的对象。

对于深浅拷贝的更深层次的理解,可以查看堆栈,参考这篇文章

1) https://www.cnblogs.com/echolun/p/7889848.html 

2) https://www.cnblogs.com/ginowang42/archive/2013/04/11/3014419.html

方案四:

借助React中Immutable库

// 使用 immutable.js 后
import Immutable from 'immutable';
foo = Immutable.fromJS({a: {b: 1}});
bar = foo.setIn(['a', 'b'], 2);   // 使用 setIn 赋值
console.log(foo.getIn(['a', 'b']));  // 使用 getIn 取值,打印 1
console.log(foo === bar);  //  打印 false
// 使用  seamless-immutable.js 后
import SImmutable from 'seamless-immutable';
foo = SImmutable({a: {b: 1}})
bar = foo.merge({a: { b: 2}})   // 使用 merge 赋值
console.log(foo.a.b);  // 像原生 Object 一样取值,打印 1
console.log(foo === bar);  //  打印 false

参考文档: https://www.cnblogs.com/3body/p/6224010.html

有不同理解欢迎评论 

猜你喜欢

转载自blog.csdn.net/qq_33358062/article/details/83620694
今日推荐