JS淺拷貝和深拷貝原理與實現(xiàn)方法分析
本文實例講述了JS淺拷貝和深拷貝原理與實現(xiàn)方法。分享給大家供大家參考，具體如下：
淺拷貝只會拷貝一層，深層的引用類型改變還是會受到影響。
深拷貝是所有內(nèi)部的屬性還有值都被拷貝了一份，不管深層的引用類型怎么改都不會受到影響。
淺拷貝的實現(xiàn)方式
1、自定義函數(shù)
function shallowClone (initalObj) {
var obj = {};
for ( var i in initalObj) {
obj[i] = initalObj[i];
}
return obj;
}
2、ES6 的 Object.assign()
let newObj = Object.assign({}, obj);
3、ES6 的對象擴(kuò)展
let newObj = {...obj};
深拷貝的實現(xiàn)方式
1、JSON.stringify 和 JSON.parse
用 JSON.stringify 把對象轉(zhuǎn)換成字符串，再用 JSON.parse 把字符串轉(zhuǎn)換成新的對象。
可以轉(zhuǎn)成 JSON 格式的對象才能使用這種方法，如果對象中包含 function 或 RegExp 這些就不能用這種方法了。
let newObj = JSON.parse(JSON.stringify(obj));
2、jquery 和 zepto
jquery 和 zepto 里的 $.extend 方法可以用作深拷貝。
var $ = require('jquery');
var newObj = $.extend(true, {}, obj);
3、lodash
用 lodash 函數(shù)庫提供的 _.cloneDeep 方法實現(xiàn)深拷貝。
var _ = require('lodash');
var newObj = _.cloneDeep(obj);
4. 自己封裝
deepClone = (obj) => {
let objClone = Array.isArray(obj)?[]:{};
if(obj && typeof obj==="object"){
// for...in 會把繼承的屬性一起遍歷
for(let key in obj){
// 判斷是不是自有屬性，而不是繼承屬性
if(obj.hasOwnProperty(key)){
//判斷ojb子元素是否為對象或數(shù)組，如果是，遞歸復(fù)制
if(obj[key]&&typeof obj[key] ==="object"){
objClone[key] = this.deepClone(obj[key]);
}else{
//如果不是，簡單復(fù)制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}
參考：http://www.fzitv.net/article/99013.htm
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章介紹的是利用Javascript中的split方法來實現(xiàn)彩色文字背景效果，實現(xiàn)后的效果很好，有需要的可以參考借鑒。2016-08-08
這篇文章主要介紹了JavaScript設(shè)計模式中的橋接和中介者模式，橋接設(shè)計模式是一種偏向于組合的設(shè)計模式，而非繼承的設(shè)計模式，實現(xiàn)的細(xì)節(jié)從一個模塊推送給另一個具有單獨(dú)模塊的對象，而中介者設(shè)計模式是指通過一個中介者對象封裝一系列的對象交互2022-06-06
在JavaScript中可以用下面的幾種方法申明對象:(從"Truly"的文章中學(xué)到)2008-10-10
JavaScript實現(xiàn)加載導(dǎo)出CZML文件詳解
CZML是一種基于?JSON?的文件格式,用于描述地理空間數(shù)據(jù)和時間動態(tài)場景,這篇文章為大家詳細(xì)介紹了如何使用JavaScript實現(xiàn)CZML文件的加載與導(dǎo)出,需要的可以了解下2025-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)分享到朋友圈功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
微信小程序開發(fā)中的大部分知識點(diǎn)和前端開發(fā)是一模一樣的,這篇文章主要給大家介紹了關(guān)于微信小程序傳值常用的4種方式,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
JavaScript Reflect Metadata實現(xiàn)詳解
這篇文章主要介紹了JavaScript Reflect Metadata實現(xiàn)詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
下面小編就為大家?guī)硪黄狫S輸出空格的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了JS實現(xiàn)的base64加密解密操作,結(jié)合實例形式分析了基于javascript的base64加密與解密函數(shù)定義與使用相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
javascript實現(xiàn)點(diǎn)擊提交按鈕后顯示loading的方法
這篇文章主要介紹了javascript實現(xiàn)點(diǎn)擊提交按鈕后顯示loading的方法,涉及javascript動態(tài)設(shè)置頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2015-07-07