javascript fillでオブジェクトの配列を作成した際の注意点

javascript fillでオブジェクトの配列を作成した際の注意点

javascriptで、fillでオブジェクトの配列を作成した際の注意点を掲載してます。ブラウザはchromeを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.114

オブジェクトの配列を作成

「fill」を使用すると、任意の値で同じ値のオブジェクトの配列を作成することができます。

let arr = Array(3).fill({ a: 1, b: 2 })

console.log( arr )

実行結果

作成したオブジェクトの配列の値を変更してみます。

let arr = Array(3).fill({ a: 1, b: 2 })

arr[1].a = 10
arr[1].b = 20

console.log( arr )

実行結果をみると全ての値が変更されていることが確認できます。

これは、fillでオブジェクトの値を生成時に「{ a: 1, b: 2 }」を1度しか利用してないため、全て同じ値が
参照されているためです。

対処法

Mapを使用して作成する。

let arr = Array(3).fill().map( function(x){ return { a: 1, b: 2 } })

arr[1].a = 10
arr[1].b = 20

console.log( arr )

実行結果

もしくは、直接作成した新しいオブジェクトを代入します。

let arr = Array(3).fill({ a: 1, b: 2 })

arr[1] = { a: 10, b: 20 } 

console.log( arr )

実行結果