1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

スプレッド演算子とArray.prototype.fill() の挙動

Last updated at Posted at 2019-08-10

2次元配列をarray.fill()で埋めた時の挙動が難しかったのでメモ

const row = [0, 0]
const table = new Array(2)
// 0埋め
table.fill([...row])
const table2 =[[0, 0],[0, 0]]

console.log(table) // [[0, 0], [0, 0]]
console.log(table2) // [[0, 0], [0, 0]]

table[1][1]++
table2[1][1]++

console.log(table) // [[0, 1], [0, 1]] ?????
console.log(table2) // [[0, 0], [0, 1]]

スプレッド演算子で配列コピーして中身の配列を埋めると値が共有される?
※コメントいただきましたが、参照を渡すだけのようです。
自分の勝手な予想では、arry.fill()にスプレッド演算子を渡すと、中身の数だけシャローコピーを作ってくれると思っていたけど、実際には、一つシャローコピーを作って、それを参照する模様。

0埋めを下記のように変更すると値渡しになる。
2次元配列にはarray.fill()は使わない方が良さげ

const row = [0, 0]
const table = new Array(2)
// 0埋め
table[0] = [...row]
table[1] = [...row]
const table2 =[[0, 0],[0, 0]]

console.log(table) // [[0, 0], [0, 0]]
console.log(table2) // [[0, 0], [0, 0]]

table[1][1]++
table2[1][1]++

console.log(table) // [[0, 0], [0, 1]] 
console.log(table2) // [[0, 0], [0, 1]] 想定どうり
1
1
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?