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