js數(shù)組直接賦值的問題(js數(shù)組的淺拷貝與深拷貝方法)
更新時(shí)間：2022年10月15日 09:02:56 作者：子夜_秋
JS數(shù)組在直接賦值時(shí)屬于數(shù)組的淺拷貝，新數(shù)組保存的是原數(shù)據(jù)的內(nèi)存地址，修改新數(shù)組或原數(shù)組其中一個(gè)數(shù)組，另一個(gè)數(shù)組也會(huì)相應(yīng)的變化，數(shù)組的直接賦值屬于數(shù)組的淺拷貝，JS存儲(chǔ)對(duì)象都是存內(nèi)存地址
1、數(shù)組的直接賦值屬于數(shù)組的淺拷貝，JS存儲(chǔ)對(duì)象都是存內(nèi)存地址，所以淺拷貝會(huì)導(dǎo)致新數(shù)組和舊數(shù)組共用同一塊內(nèi)存地址，其中一個(gè)數(shù)組變化，另一個(gè)數(shù)組也會(huì)相應(yīng)的變化。
var a =[1,2,3]; var b=a; a[0]=30; console.log(a,b); //結(jié)果： [30, 2, 3] [30, 2, 3]
2、數(shù)組內(nèi)部不含有引用類型，使用slice() 、concat() 和 assign() 方法都屬于數(shù)組的深拷貝，一個(gè)數(shù)組變化，另一個(gè)數(shù)組不受影響。
數(shù)組的concat方法
var a=[1,2,3]; var b=[].concat(a); a[0]=30; console.log(a,b); //結(jié)果：[30, 2, 3] [1, 2, 3]
使用es6的展開操作符： …arr
var a=[1,2,3]; var b=[].concat(a); var c=[...a]; a[0]=30; console.log(a,b,c); //結(jié)果：[30, 2, 3] [1, 2, 3] [1, 2, 3]
利用split join map方法
let arr1=[1,2,3];
var newArr4 = arr1.join(" ").split(" ").map(function(i){
return parseInt(i);
});
arr1[0]=30;
console.log(arr1,newArr4);
//VM1175:1 (3) [30, 2, 3] (3) [1, 2, 3]3、數(shù)組內(nèi)部含有引用類型，使用slice() 、concat() 和 assign() 方法，非引用類型的值屬于深拷貝，引入類型的值屬于淺拷貝，一個(gè)數(shù)組變化，另一個(gè)也會(huì)相應(yīng)的變化。
4、深拷貝就是指完全的拷貝一個(gè)對(duì)象，即使嵌套了對(duì)象，兩者也相互分離，修改一個(gè)對(duì)象的屬性，也不會(huì)影響另一個(gè)。
1、通過JSON.stringify轉(zhuǎn)化成字符串再通過JSON.parse()解析成原數(shù)組。
let arr=[{a:1,b:2},{a:3,b:4}];
let arr1=JSON.parse(JSON.stringify(arr));
arr[0].a=10;
console.log(arr,arr1);
//輸出結(jié)果如下
(2)?[{…}, {…}]
0: {a: 10, b: 2}
1: {a: 3, b: 4}
(2)?[{…}, {…}]
0: {a: 1, b: 2}
1: {a: 3, b: 4}2、利用jQuery的$.extend方法。
let arr=[{a:1,b:2},{a:3,b:4}];
let arr1=$.extend(true,[],arr);
arr[0].a=10;
console.log(arr,arr1);
//輸出結(jié)果如下
(2) [{…}, {…}]
0: {a: 10, b: 2}
1: {a: 3, b: 4}
(2) [{…}, {…}, contains: ?, each: ?, uniquelize: ?]
0: {a: 1, b: 2}
1: {a: 3, b: 4}更多關(guān)于js數(shù)組直接賦值的問題和js數(shù)組的淺拷貝，深拷貝方法請(qǐng)查看下面的相關(guān)文章
相關(guān)文章
JavaScript的函數(shù)式編程基礎(chǔ)指南
這篇文章主要介紹了JavaScript的函數(shù)式編程基礎(chǔ)指南,雖然JavaScript被許多人一再強(qiáng)調(diào)面向?qū)ο?但js中卻沒有類,而本文所展現(xiàn)的函數(shù)主導(dǎo)的js編程則同樣可以很爽,需要的朋友可以參考下2016-03-03
本文主要介紹javascript中的Math對(duì)象的用法，講解的很詳細(xì)，希望能給大家做一個(gè)參考。2016-06-06
js判斷兩個(gè)變量是否相等的一些操作符的比較。2009-03-03
對(duì)象的類型：本地對(duì)象(1)...2006-12-12
javascript中interval與setTimeOut的區(qū)別示例介紹
這篇文章主要介紹了javascript中interval與setTimeOut的區(qū)別,需要的朋友可以參考下2014-03-03
Javascript中的作用域鏈、閉包、原型繼承、eval等特性，在提供各種神奇功能的同時(shí)也帶來了各種效率問題，用之不慎就會(huì)導(dǎo)致執(zhí)行效率低下2013-11-11
這篇文章主要介紹了javascript 實(shí)現(xiàn)原路返回的方法,需要的朋友可以參考下2015-01-01
javaScript中兩個(gè)等于號(hào)和三個(gè)等于號(hào)之間的區(qū)別介紹
這篇文章主要介紹了javaScript中兩個(gè)等于號(hào)和三個(gè)等于號(hào)之間的區(qū)別，還不知道的朋友可以學(xué)習(xí)下2014-06-06
返回指定對(duì)象的原始值。2008-12-12
Javascript中eval函數(shù)的使用方法與示例
JavaScript有許多小竅門來使編程更加容易。其中之一就是eval()函數(shù)，這個(gè)函數(shù)可以把一個(gè)字符串當(dāng)作一個(gè)JavaScript表達(dá)式一樣去執(zhí)行它。以下是它的說明2007-04-04