js中的深淺拷貝問題簡析
前言
在開發(fā)過程中，偶爾會遇到這種場景，拿到一個數(shù)據(jù)后，你打算對它進行處理，但是你又希望拷貝一份副本出來，方便數(shù)據(jù)對比和以后恢復數(shù)據(jù)。
那么這就涉及到了 JS 中對數(shù)據(jù)的深淺拷貝問題，所謂深淺拷貝，淺拷貝的意思就是，你只是復制了對象數(shù)據(jù)的引用，并沒有把內存里的值另外復制一份，那么深拷貝就是把值完整地復制一份新的值。
下面這篇文章就對js中的深淺拷貝進行了深入的講解，下面話不多說了，來一起看看詳細的介紹吧
問題描述：
因為在JavaScript中對象在賦值中存儲的是對象的地址（指針），所以會造成對象類型在復制過程中只復制對象的地址，從而導致以下問題
var people = {
name: "小明"
}
var peoplea = people;
peoplea.name = "小白";
console.log(peoplea.name)//小白
console.log(people.name)//小白
我們本來期望只改變peoplea的name，現(xiàn)在連people的name都改變了。根據(jù)情況的不同，可使用深拷貝或淺拷貝來解決。
解決方法：
我們在實現(xiàn)深淺拷貝之前，我們先看一看深、淺拷貝、賦值這三種的區(qū)別：
1、賦值
改變新對象時不管第幾層，老對象都會隨著變化。
var people = {
name: "小明",
act: ["吃飯","睡覺"]
}
var people1 = people;//賦值
people1.name = "小紅";
people1.act[1] = "打游戲";
console.log(people.name);//小紅
console.log(people.act);//["吃飯", "打游戲"]
2、淺拷貝
改變新對象第一層基本數(shù)據(jù)類型時，老對象不變。有子對象時，改變子對象，老對象會隨著變化。
var people = {
name: "小明",
act: ["吃飯", "睡覺"]
}
var people1 = Object.assign({}, people);//淺拷貝
people1.name = "小紅";
people1.act[1] = "打游戲";
console.log(people.name);//小明
console.log(people.act);// ["吃飯", "打游戲"]
3、深拷貝
不管改變新對象第幾層，老對象都不會隨之改變。
var people = {
name: "小明",
act: ["吃飯", "睡覺"]
}
var people1 = JSON.parse(JSON.stringify(people));//深拷貝
people1.name = "小紅";
people1.act[1] = "打游戲";
console.log(people.name);//小明
console.log(people.act);// ["吃飯", "睡覺"]
總結一下就是：
| 第一層為基本數(shù)據(jù)類型 | 多于一層含有子對象 | |
|---|---|---|
| 賦值 | 新老一起改變 | 新老一起改變 |
| 淺拷貝 | 新對象改變，老對象不變 | 新老一起改變 |
| 深拷貝 | 新對象改變，老對象不變 | 新對象改變，老對象不變 |
了解完了區(qū)別，下面介紹實現(xiàn)深淺拷貝的幾個方法。
一、淺拷貝
1、Object.assign（）
官方對這個函數(shù)的介紹是：Object.assign() 方法用于將所有可枚舉屬性的值從一個或多個源對象復制到目標對象。實際上就是會把屬性中的簡單數(shù)據(jù)類型直接復制，而對于對象屬性，只會拷貝地址（指針）,上邊介紹區(qū)別時用的就是這個；
var people1 = Object.assign({}, people);
需要注意的是，如果對象沒有子對象，Object.assign（）實現(xiàn)的就是深拷貝。
2、展開運算符（ES6新增）
var people = {
name: "小明",
act: ["吃飯", "睡覺"]
}
var people1 = {...people};
people1.name = "小紅";
people1.act[1] = "打游戲";
console.log(people.name);//小明
console.log(people.act);// ["吃飯", "打游戲"]
3、自己寫
var people = {
name: "小明",
act: ["吃飯", "睡覺"]
}
var people1 = shallowCopy(people);
people1.name = "小紅";
people1.act[1] = "打游戲";
console.log(people.name);//小明
console.log(people.act);// ["吃飯", "打游戲"]
function shallowCopy(obj) {
var res = {};
for (var index in obj) {
if (obj.hasOwnProperty(index)) {//不復制原型鏈上的屬性
res[index] = obj[index];
}
}
return res;
}
二、深拷貝
1、JSON.parse(JSON.stringify(obj))
上邊介紹區(qū)別時用的就是這個：
var people1 = JSON.parse(JSON.stringify(people));//深拷貝
這個方法比較簡便但也存在問題
1、不能復制對象中的函數(shù)。
2、會忽略對象中的undefind。
2、lodash函數(shù)
官方介紹是：lodash是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。官網(wǎng)是
www.lodashjs.com/ ，我推薦用其中的_.cloneDeep(value)方法。
ar objects = [{ "a": 1 }, { "b": 2 }];
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false
還有自己去寫一個遞歸，但是需要考慮的東西較多，不再贅述，也有用jq的$.extend（）方法實現(xiàn)的，但是性能不好，這里提一下。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。
相關文章
本文給大家分享的事tab切換的兩段js，均可實現(xiàn)標簽切換功能，大家根據(jù)自己的需求自由選擇2016-05-05
使用js的朋友對其中for in的并不陌生吧，下面用示例為大家介紹下其具體使用方法2013-12-12
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)美化滑塊效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
本文主要介紹了根據(jù)一張圖片的拍攝時間獲取到這個時間前二后三的一個五秒鐘的視頻信息的實例方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章幫助大家輕輕松松實現(xiàn)js圖片預覽功能，主要介紹了純JS實現(xiàn)本地圖片預覽的方法，具有一定參考借鑒價值,需要的朋友可以參考下2016-01-01
setTimeout在類中使用的問題！...2007-04-04
Javascript實現(xiàn)視頻輪播在pc端與移動端均可
用Javascript實現(xiàn)視頻輪播，畢竟是客戶的需求嗎？所以盡量實現(xiàn)下,下面有個實現(xiàn)視頻輪播的示例，pc端與移動端均可以實現(xiàn)，感興趣的朋友可以了解下2013-09-09
本篇文章主要介紹了JavaScript作用域和閉包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了淺談webpack性能榨汁機(打包速度優(yōu)化)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
uniapp常用路由跳轉的幾種方式(navigateTo、redirectTo...)
uni-app有兩種方式進行路由跳轉,下面這篇文章主要給大家介紹了關于uniapp常用路由跳轉的幾種方式(navigateTo、redirectTo...),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11