JS對象復制(深拷貝和淺拷貝)
一、淺拷貝
1、Object.assign(target,source,source...)
a、可支持多個對象復制
b、如果source和target屬性相同 source會復制target的屬性
c、target只能為Object對象
var obj = {a:1,b:2}
undefined
Object.assign({c:3},obj)
{c: 3, a: 1, b: 2}
obj
{a: 1, b: 2}
兼容性寫法if(Object.assign){//兼容}else{//不兼容}
2、擴展運算符(spread)
支持將多個對象復制到一個對象上“
var obj1 = { foo: "foo" };
var obj2 = { bar: "bar" };
var copySpread = { ...obj1, ...obj2 }; // Object {foo: "foo", bar: "bar"}
copySpread
{foo: "foo", bar: "bar"}
var obj = {a:1,b:2,c:3}
var objs = {...obj}
objs
{a: 1, b: 2, c: 3}
objs.a=10
10
objs
{a: 10, b: 2, c: 3}
obj
{a: 1, b: 2, c: 3}
二、深拷貝
1、使用對象序列化 JSON.stringify()和JSON.parse()
注意:此方法僅在原對象包含可序列化值類型且沒有任何循環(huán)引用時才有效。不可序列化值類型的一個例子是Date對象 -JSON.parse只能將其解析為字符串而無法解析回其原始的Date對象 或者對象中屬性值為function
var obj = {a:1,b:[1,2,3],c:{e:3},bool:false}
undefined
var objs = JSON.parse(JSON.stringify(obj))
undefined
objs
{a: 1, b: Array(3), c: {…}, bool: false}
objs.bool = true
true
objs
{a: 1, b: Array(3), c: {…}, bool: true}
obj
{a: 1, b: Array(3), c: {…}, bool: false}
2、使用遞歸,對對象屬性進行判斷
function deepClone(obj) {
var copy;
// 如果 obj 是 null、undefined 或 不是對象,直接返回 obj
// Handle the 3 simple types, and null or undefined
if (null == obj || "object" != typeof obj) return obj;
// Handle Date
if (obj instanceof Date) {
copy = new Date();
copy.setTime(obj.getTime());
return copy;
}
// Handle Array
if (obj instanceof Array) {
copy = [];
for (var i = 0, len = obj.length; i < len; i++) {
copy[i] = clone(obj[i]);
}
return copy;
}
// Handle Function
if (obj instanceof Function) {
copy = function() {
return obj.apply(this, arguments);
}
return copy;
}
// Handle Object
if (obj instanceof Object) {
copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
}
return copy;
}
throw new Error("Unable to copy obj as type isn't supported " + obj.constructor.name);
}
以上就是JS對象復制(深拷貝和淺拷貝)的詳細內容,更多關于JS的資料請關注腳本之家其它相關文章!
相關文章
TypeScript中的類型斷言[as語法|<>語法]的使用
本文主要介紹了TypeScript中的類型斷言[as語法|<>語法]的使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
JavaScript靜態(tài)作用域和動態(tài)作用域實例詳解
這篇文章主要介紹了JavaScript靜態(tài)作用域和動態(tài)作用域的實例代碼,本文通過文字實例代碼相結合的形式給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
Webpack打包過程中處理ES6模塊的循環(huán)依賴問題小結
Webpack通過“暫時性引用”特性處理ES6模塊的循環(huán)依賴,即在模塊加載時創(chuàng)建占位符,確保模塊能夠正確加載,本文介紹Webpack打包過程中如何處理ES6模塊的循環(huán)依賴,感興趣的朋友一起看看吧2025-02-02
JS+DIV+CSS實現(xiàn)的經(jīng)典標簽切換效果代碼
這篇文章主要介紹了JS+DIV+CSS實現(xiàn)的經(jīng)典標簽切換效果代碼,涉及JavaScript基于鼠標事件針對頁面元素動態(tài)變換的實現(xiàn)技巧,頁面美觀實用,需要的朋友可以參考下2015-09-09
基于JS實現(xiàn)textarea中獲取動態(tài)剩余字數(shù)的方法
這篇文章主要介紹了基于JS實現(xiàn)textarea中獲取動態(tài)剩余字數(shù)的方法的相關資料,非常不錯,具有參考借鑒價值,感興趣的朋友一起看看吧2016-05-05

