1. 程式人生 > >一行程式碼完成js物件陣列的深拷貝

一行程式碼完成js物件陣列的深拷貝

1、對於普通陣列陣列元素為數字或者字串),深拷貝很簡單,拷貝之後兩個陣列指標指向的儲存地址不同,從而完成深拷貝

var _test = [1,2,3];//原陣列
var _testCopy =
[].concat(_test);//拷貝陣列
_testCopy[0]=4;
console.log(_test);// [1,2,3]
console.log(_testCopy);//[4,2,3]

2、對於物件陣列

//形如
var _objArr=[{"name":''weifeng"},{"name":"boy"}]

如果還是利用上述的[].concat()方法拷貝陣列,則獲取的結果仍然是淺拷貝,改變其一,統統改變,例子:

var _test = [{"name":"weifeng"},{"name":"boy"}];//原陣列
var _testCopy = [].concat(_test);//拷貝陣列
_testCopy[1].name="girl";
console.log(_test);// [{"name":"weifeng"},{"name":"girl"}]
console.log(_testCopy);//[{"name":"weifeng"},{"name":"girl"}]

從例子上可以看出,這種對於物件陣列的拷貝,由於陣列內部屬性值為引用物件,因此整個拷貝還是淺拷貝,拷貝之後陣列各個值的指標還是指向相同的儲存地址,
那麼,如何完成此類陣列的深拷貝,根據普通陣列的深拷貝得到啟發,我拷貝一個字串,不拷貝引用物件,拷貝字串會新闢一個儲存地址,這樣就切斷了引用物件的指標聯絡,因此,得到的方法為:

var _test = [{"name":"weifeng"},{"name":"boy"}];//原陣列
var _testCopy =
[].concat(JSON.parse(JSON.stringify(_test)));//拷貝陣列,注意這行的拷貝方法
_testCopy[1].name="girl";
console.log(_test);// [{"name":"weifeng"},{"name":"boy"}]
console.log(_testCopy);//[{"name":"weifeng"},{"name":"girl"}]

至此,大功告成,一行程式碼完成物件陣列的深拷貝!

相關推薦

一行程式碼完成js物件陣列拷貝

1、對於普通陣列(陣列元素為數字或者字串),深拷貝很簡單,拷貝之後兩個陣列指標指向的儲存地址不同,從而完成深拷貝 var _test = [1,2,3];//原陣列 var _testCopy = [].concat(_test);//拷貝陣列 _testCopy[0]=4

js物件拷貝及其的幾種方法

深拷貝和淺拷貝是javascript中一個比較複雜的問題,也是面試官最喜歡問的問題之一,通過這個為可以看出是否入門,深拷貝和淺拷貝也是初學者經常犯錯一個點。 簡單來說深拷貝是拷貝儲存在棧中的物件,而淺拷貝是從記憶體中拷貝,這就涉及到資料存放位置了,總所周知,資料大體可以分為兩種資料型別,一種是基

Java物件陣列拷貝

Java物件陣列深複製 1.今天做專案的時候遇到了一個java陣列深拷貝的問題,當時直接使用了Object物件的clone方法,結果不管用。 ArrayList<Cell> cells = ArrayList<Cell>(); A

js物件拷貝與淺拷貝詳解

一、淺拷貝例子:var Chinese = {     nation: '中國',     arr: [ 1, 2, 3],     obj: { name: 'yzs', age: 18     } }; function extendCopy (p) {     va

JS 陣列以及物件拷貝總結

javascript 陣列以及物件的深拷貝(複製陣列或複製物件)的方法前言在js中,陣列和物件的複製如果使用=號來進行復制,那只是淺拷貝。如下圖演示:  如上,arr的修改,會影響arr2的值,這顯然在絕大多數情況下,並不是我們所需要的結果。 因此,陣列以及物件的深拷貝就是javascript的一個基本功了。

陣列物件拷貝

在實際開發中,如果遇到稍微複雜一點的邏輯,經常會遇到要複製物件或陣列的場景。而在複製之後,我們會發現改了副本,原物件或陣列的資料也相應改變了。這就是深拷貝的問題。 其原理涉及到記憶體,簡單來說,我們的淺拷貝就是新建一個變數,指向目標變數,而不佔用新的記憶體,所有一旦改變,就是直接改變的記憶體中的值,所以原來

結合多個例項深入理解js拷貝和淺拷貝,多種方法實現物件拷貝

親們為什麼要研究深拷貝和淺拷貝呢,因為我們專案開發中有許多情況需要拷貝一個數組抑或是物件,但是單純的靠=“賦值”並不會解決所有問題,如果遇到引用型別的物件改變新賦值的物件會造成原始物件也發生同樣改變,而要去除影響就必須用到深拷貝,深拷貝,對於引用物件需要進行深拷貝才會去除影響。如果是值型別直接“=”

Js物件拷貝和淺拷貝

淺拷貝:只拷貝物件的基礎屬性值,對屬性值為物件或陣列的屬性則拷貝指標。  深拷貝:拷貝物件的所有屬性作為一個全新的物件。拷貝前後的物件互不影響。 淺拷貝僅僅是指向被複制的記憶體地址,如果原地址中物件被改變了,那麼深拷貝出來的物件也會相應改變。 一、物件引用 物件引用容易

JS物件陣列的深度拷貝

直接=是淺拷貝,對於想完全複製可以這樣: 途徑1  let arrObj2=JSON.parse(JSON.stringify(arrObj1)); 途徑2  var objDeepCopy = function (source) {     var sourceCop

vue 爬坑 之js 物件/陣列 賦值/拷貝 解決VUE中賦值引用後資料雙向改變的問題

淺拷貝這裡就不講了,我們直接講深拷貝 正常的陣列/物件拷貝可以直接用 const cloneObj = JSON.parse(JSON.stringify(Obj)); 這種方式可以解決相當多一部分的賦值問題,但是一些特殊屬性除外(undefined/function)

js物件的淺拷貝拷貝

物件複製分為深拷貝和淺拷貝。 淺拷貝只會將物件中的各個屬性依次複製,而不會遞迴複製,因為js儲存物件是存地址的,所以會造成複製物件和原物件指向同一記憶體地址。 淺拷貝的程式碼簡單實現: var

js實現陣列拷貝拷貝

// 陣列的淺拷貝,可用concat、slice返回一個新陣列的特性來實現拷貝 var arr = ['old', 1, true, null, undefined]; var new_arr = arr.concat(); // 或者var new_ar

Java陣列物件拷貝

ArrayList<Cell> cells = ArrayList<Cell>(); ArrayList<Cell> init_cells = new ArrayList<Cell>(); init_cells = (Array

陣列物件拷貝、淺拷貝

陣列的淺拷貝 首先看一下程式碼: let arr1=[1,3,3]; let arr2 = arr1; console.log(arr2);//[ 1, 3, 3 ] arr1[1]=8; console.log(arr2)//[ 1, 8, 3 ] 在

js中的拷貝和淺拷貝

所有 object 簡單的 col images new color 其他 java 深復制和淺復制只針對像 Object, Array 這樣的復雜對象的。簡單來說,淺復制只復制一層對象的屬性,而深復制則遞歸復制了所有層級。 深淺拷貝 的主要區別就是:復制的是引用(地址)還

js 淺與拷貝

blog urn key eof pre for deep obj clas 1、淺拷貝 let obj1 = { a: 1, b: 2 } let obj2 = obj1 obj2.b = 3 console.log(obj1) // { a: 1, b:

js對象拷貝拷貝

一次 aso type res create pro bject 數據結構 存在 對象的深拷貝於淺拷貝 對於基本類型,淺拷貝過程就是對值的復制,這個過程會開辟出一個新的內存空間,將值復制到新的內存空間。而對於引用類型來書,淺拷貝過程就是對指針的復制,這個過程並沒有開辟新的堆

js對象拷貝

target pro blog 上海 bject ann OS def html /** *對象深拷貝2018-3-2 *使用方法deepAssign(obj1,obj2...) **/ //測試 //var china = {

js中的拷貝與淺拷貝

nbsp 中一 局限性 深拷貝與淺拷貝 ext bsp post body extend 對於字符串類型,淺拷貝是對值的拷貝,對於對象來說,淺拷貝是對對象地址的拷貝,並沒有開辟新的棧,也就是拷貝的結果是兩個對象指向同一個地址,修改其中一個對象的屬性,則另一個對象的屬性也會改

使用JSON.parse(),JSON.stringify()實現對物件拷貝

  根據不包含引用物件的普通陣列深拷貝得到啟發,不拷貝引用物件,拷貝一個字串會新闢一個新的儲存地址,這樣就切斷了引用物件的指標聯絡。 測試例子: var test={ a:"ss", b:"dd", c:[ {dd:"css",ee:"c