js對(duì)象拷貝

ymyang 發(fā)布于2019-08-26 10:34 / 852人閱讀

摘要：對(duì)象是的基本塊。和明紅明可以看到改變并沒(méi)有改變?cè)紝?duì)象，實(shí)現(xiàn)了基本的深拷貝。和能正確處理的對(duì)象只有等能夠被表示的數(shù)據(jù)結(jié)構(gòu)，因此函數(shù)這種不能被表示的類(lèi)型將不能被正確處理。

對(duì)象介紹

js中包含兩種不同數(shù)據(jù)類(lèi)型的值: 基本類(lèi)型值和引用類(lèi)型值。 基本類(lèi)型值指的是簡(jiǎn)單的數(shù)據(jù)段，而引用類(lèi)型值指的是那些由可能由多個(gè)值構(gòu)成的對(duì)象。

js對(duì)象都是引用類(lèi)型，對(duì)象是某個(gè)特定引用類(lèi)型的實(shí)例。對(duì)象是js的基本塊。對(duì)象是屬性的集合，屬性是鍵值對(duì)。js中看到的大多數(shù)引用類(lèi)型都是Object類(lèi)型的實(shí)例，Object也是js中使用最多的一個(gè)類(lèi)型。

按引用賦值

let obj1 = {
    name : "jack",
    number: 10
}
let obj2 = obj1 // 將obj1的引用賦值給obj2 此時(shí)obj1、obj2指向同一塊內(nèi)存空間
obj2.name = "tom"
console.log(obj1.name) // tom

但從一個(gè)變量像另一個(gè)變量復(fù)制引用類(lèi)型的值時(shí)，同樣也會(huì)將存儲(chǔ)在變量對(duì)象中的值復(fù)制一份放到位新的變量分配的空間中。不同的是，這個(gè)值的副本實(shí)際是一個(gè)指針，而這個(gè)指針指向存儲(chǔ)在堆中的一個(gè)對(duì)象。復(fù)制操作結(jié)束后，兩個(gè)變量實(shí)際上將引用同一個(gè)對(duì)象。因此改變其中一個(gè)變量就會(huì)改變另一個(gè)變量。

對(duì)象的拷貝方式 1. 復(fù)制對(duì)象的原始方法是循環(huán)遍歷原始對(duì)象，然后一個(gè)接一個(gè)地復(fù)制每個(gè)屬性。

let objCopy = {}; // objCopy 將存儲(chǔ) mainObj 的副本

function copy(mainObj) {
  let key;
 
  for (key in mainObj) {
    objCopy[key] = mainObj[key]; // 將每個(gè)屬性復(fù)制到objCopy對(duì)象
  }
  return objCopy;
}
 
const mainObj = {
  a: 2,
  b: 5,
  c: {
    x: 7,
    y: 4,
  },
}
 
console.log(copy(mainObj));
objCopy.c.x = 10086
console.log("mainObj.c.x", mainObj.c.x)  // 10086

上面的代碼只復(fù)制了 mainObj 的可枚舉屬性。

如果原始對(duì)象中的一個(gè)屬性本身就是一個(gè)對(duì)象，那么副本和原始對(duì)象之間將共享這個(gè)對(duì)象，從而使其各自的屬性指向同一個(gè)對(duì)象。

2.淺拷貝

淺拷貝是對(duì)象共用一個(gè)內(nèi)存地址，對(duì)象的變化相互影響。比如常見(jiàn)的賦值引用就是淺拷貝:

let obj1 = {
    name : "jack",
    number: 10
}
let obj2 = obj1 // 將obj1的引用賦值給obj2 此時(shí)obj1、obj2指向同一塊內(nèi)存空間
obj2.name = "tom"
console.log(obj1.name) // tom

Object.assign()

let obj = {
  a: 1,
  b: {
    c: 2,
  },
}
let newObj = Object.assign({}, obj);
console.log(newObj); // { a: 1, b: { c: 2} }
 
obj.a = 10;
console.log(obj); // { a: 10, b: { c: 2} }
console.log(newObj); // { a: 1, b: { c: 2} }
 
newObj.a = 20;
console.log(obj); // { a: 10, b: { c: 2} }
console.log(newObj); // { a: 20, b: { c: 2} }
 
newObj.b.c = 30;
console.log(obj); // { a: 10, b: { c: 30} }
console.log(newObj); // { a: 20, b: { c: 30} }
 
// 注意: newObj.b.c = 30; 為什么呢..

bject.assign 只是淺拷貝。 newObj.b 和 obj.b 都引用同一個(gè)對(duì)象，沒(méi)有多帶帶拷貝，而是復(fù)制了對(duì)該對(duì)象的引用。任何對(duì)對(duì)象屬性的更改都適用于使用該對(duì)象的所有引用。

注意：原型鏈上的屬性和不可枚舉的屬性不能復(fù)制。

let someObj = {
  a: 2,
}
 
let obj = Object.create(someObj, { 
  b: {
    value: 2,  
  },
  c: {
    value: 3,
    enumerable: true,  
  },
});
 
let objCopy = Object.assign({}, obj);
console.log(objCopy); // { c: 3 }

someObj 是在 obj 的原型鏈，所以它不會(huì)被復(fù)制。
屬性 b 是不可枚舉屬性。
屬性 c 具有可枚舉(enumerable) 屬性描述符，所以它可以枚舉。這就是為什么它會(huì)被復(fù)制。

使用展開(kāi)操作符(…)

ES6已經(jīng)有了用于數(shù)組解構(gòu)賦值的 rest 元素，和實(shí)現(xiàn)的數(shù)組字面展開(kāi)的操作符。

const array = [
"a", "c", "d", { four: 4 },
];
const newArray = [...array];
console.log(newArray);
// 結(jié)果 
// ["a", "c", "d", { four: 4 }]

只對(duì)淺拷貝有效

3.深拷貝

簡(jiǎn)單理解深拷貝是將對(duì)象放到一個(gè)新的內(nèi)存中，兩個(gè)對(duì)象的改變不會(huì)相互影響。

JSON.parse() 和 JSON.stringify()

srcObj = {"name": "明", grade: {"chi": "50", "eng": "50"} };
// copyObj2 = Object.assign({}, srcObj);
copyObj2 = JSON.parse(JSON.stringify(srcObj));
copyObj2.name = "紅";
copyObj2.grade.chi = "60";
console.log("JSON srcObj", srcObj); // { name: "明", grade: { chi: "50", eng: "50" } }

可以看到改變copyObj2并沒(méi)有改變?cè)紝?duì)象，實(shí)現(xiàn)了基本的深拷貝。
但是用JSON.parse()和JSON.stringify()會(huì)有一個(gè)問(wèn)題。
JSON.parse()和JSON.stringify()能正確處理的對(duì)象只有Number、String、Array等能夠被json表示的數(shù)據(jù)結(jié)構(gòu)，因此函數(shù)這種不能被json表示的類(lèi)型將不能被正確處理。比如

srcObj = {"name": "明", grade: {"chi": "50", "eng": "50"},
    "hello": function() {console.log("hello")}};
// copyObj2 = Object.assign({}, srcObj);
copyObj2 = JSON.parse(JSON.stringify(srcObj));
copyObj2.name = "紅";
copyObj2.grade.chi = "60";
console.log("JSON srcObj", copyObj2); //{ name: "紅", grade: { chi: "60", eng: "50" } }

可以看出，經(jīng)過(guò)轉(zhuǎn)換之后，function丟失了，因此JSON.parse()和JSON.stringify()還是需要謹(jǐn)慎使用。

數(shù)組的深拷貝和淺拷貝

最后在補(bǔ)充一點(diǎn)數(shù)組的深拷貝和淺拷貝，同對(duì)象一樣數(shù)組的淺拷貝也是改變其中一個(gè)會(huì)相互影響，比如:

let srcArr = [1, 2, 3];
let copyArr = srcArr;
copyArr[0] = "0";
console.log("srcArr", srcArr); // ["0", 2, 3]

但是數(shù)組的深拷貝方法要相對(duì)簡(jiǎn)單一些可以理解為數(shù)組方法中那些會(huì)改變?cè)瓟?shù)組的方法，比如

concat

slice

es6 的Array.from

博客參考

GPU云服務(wù)器云服務(wù)器 js拷貝內(nèi)存數(shù)據(jù)庫(kù) js 對(duì)象中添加對(duì)象 js對(duì)象 js 對(duì)象存儲(chǔ)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106404.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ymyang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorrt

閱讀 2822·2023-04-25 22:51
基于RabbitMQ的MQTT插件搭建MQTT服務(wù)，使用MQTTX進(jìn)行收發(fā)測(cè)試

閱讀 2067·2021-10-11 10:58
react-鼠標(biāo)滑過(guò)顯示編輯按鈕點(diǎn)擊顯示輸入框編輯內(nèi)容

閱讀 3319·2019-08-30 10:49
詳解css媒體查詢(xún)

閱讀 1884·2019-08-29 17:09
Flex 布局教程：語(yǔ)法篇

閱讀 3143·2019-08-29 10:55
js對(duì)象拷貝

閱讀 853·2019-08-26 10:34
等高布局常用幾種方式

閱讀 3499·2019-08-23 17:54
Web打印探秘

閱讀 990·2019-08-23 16:06

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

js對(duì)象拷貝

Object.assign()

使用展開(kāi)操作符(…)

JSON.parse() 和 JSON.stringify()

相關(guān)文章

JS專(zhuān)題之深淺拷貝

淺探js深拷貝和淺拷貝

一篇文章徹底說(shuō)清JS的深拷貝/淺拷貝

一篇文章徹底說(shuō)清JS的深拷貝/淺拷貝

一篇文章徹底說(shuō)清JS的深拷貝/淺拷貝

JavaScript系列--淺析JavaScript解析賦值、淺拷貝和深拷貝的區(qū)別

發(fā)表評(píng)論

0條評(píng)論

ymyang

男|高級(jí)講師

TA的文章

tensorrt

基于RabbitMQ的MQTT插件搭建MQTT服務(wù)，使用MQTTX進(jìn)行收發(fā)測(cè)試

react-鼠標(biāo)滑過(guò)顯示編輯按鈕點(diǎn)擊顯示輸入框編輯內(nèi)容

詳解css媒體查詢(xún)

Flex 布局教程：語(yǔ)法篇