js深拷貝的幾種方案(有更多意見的可以評論在下方,我可以整理在一起)
阿新 • • 發佈:2018-12-06
場景:物件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
有不同理解歡迎評論