JS中陣列的一些筆記

今天工作時碰到乙個需求，有兩個陣列arraychild, arrayfather, 要求：

1、往陣列arraychild中放入乙個元素；

2、將當前的陣列arraychild放入arrayfather中；

3、清空陣列arraychild，將乙個新元素放進去；

4、將放了新元素的arraychild放入陣列arrayfather中。

剛開始是這麼寫的：

const arraychild = ;
const arrayfather = ;
arraychild.push(0, 1);
arrayfather.push(arraychild);
arraychild.splice(0);
arraychild.push(3, 4);
arrayfather.push(arraychild);
console.log(`arrayfather = $`);

預想結果是：  
arrayfather = [[0, 1], [3, 4]];  
實際結果：  
arrayfather = [[3, 4], [3, 4]];

為什麼呢？向公司老司機請教，才知道原來建立乙個陣列時，會在記憶體中開闢一塊堆記憶體a，我的arraychild是在另一塊棧記憶體中存入了指向堆記憶體a的位址，所以使用const宣告的陣列，還可以繼續向陣列內新增東西。在第一步，arrayfather.push(arraychild)，也是將arrayfather指向了arraychild指向的堆記憶體a，然後splice是清除arraychild中的資料，就是將堆記憶體a中的資料全部清除，所以這時arrayfather和arraychild都是空的。這時再往arraychild中新增新資料，那麼arrayfather = arraychild = [3, 4], 然後arrayfather又push了一次arraychild，所以最後arrayfather = [[3, 4], [3, 4]]

那想要實現需求怎麼辦呢？可以用這種方法：

let arraychild = ;
const arrayfather = ;
arraychild.push(0, 1);
arrayfather.push(arraychild);
arraychild = ;
arraychild.push(3, 4);
arrayfather.push(arraychild);
console.log(`arrayfather = $`);

預想結果是：  
arrayfather = [[0, 1], [3, 4]];  
實際結果：  
arrayfather = [[0, 1], [3, 4]];

這裡的arraychild = 就是重新開闢一片記憶體了，所以原來的值還會存在，相當於：

1、首先分配了一塊記憶體（陣列的值存放在堆中，索引存放在棧中），存了個陣列[0, 1]，索引是arraychild

2、將arrayfather(前兩個位址指標)指向這塊堆記憶體

3、另外分配一塊新記憶體，存了陣列[3, 4]，把索引arraychild重新指向這裡

4、將新記憶體的位址存入arrayfather（的arrayfather[2]和arrayfather[3]）中，因為原先的arraychild的值還在被arrayfather引用，所以這塊記憶體不會被**，所以最終的目的達成。

綜上所述，問題的根源在於對陣列的本質不了解。新建陣列，就是新分配一塊堆記憶體存放陣列的值。堆記憶體的位址存放在一塊棧記憶體中，組成陣列的索引。

更多專業前端知識，請上

【猿2048】www.mk2048.com

JS中陣列的一些筆記

JS陣列中的一些方法

JS中的陣列（關於陣列的一些基本操作與一些騷操作）

一些js陣列操作

JS中陣列的一些筆記

JS陣列中的一些方法

JS中的陣列（關於陣列的一些基本操作與一些騷操作）

一些js陣列操作

相關推薦