javascriptで最後に代入した要素で配列が埋まる問題

実現したいこと

javascriptで最後に代入した要素で配列が埋まる問題を解決したい

発生している問題・分からないこと

javascriptで２次元配列を使用する際に、すべての子配列が最後に親配列に代入した子配列で埋まってしまいます。これを通常の配列の挙動にしたいです。

該当のソースコード

javascript
1rowDates[rowDateCnt] = rowDate;
2    rowDateCnt++;
3    for(let i = 0; i < rowDateCnt; i++){
4        console.log(rowDates[i]);
5    }

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

上記のプログラムでは出力は以下の通りになります。
(4) [text, 1, 2, '#ff9b9b']　一回目の代入　rowDateCnt = 0 → 1

(4) [text, 1, 3, '#ff9b9b']　二回目の代入 rowDateCnt = 1 → 2
(4) [text, 1, 3, '#ff9b9b']

(4) [text, 2, 5, '#ff9b9b']　三回目の代入 rowDateCnt = 2 → 3
(4) [text, 2, 5, '#ff9b9b']
(4) [text, 2, 5, '#ff9b9b']

補足

rowDateが子配列でrowDatesが親配列です。rowDateCntはrowDatesのカウンタ変数として使っています。

int32_t

2025/04/15 06:25

rowDateを作っているコードを開示してください。

melian

2025/04/15 07:13 編集

同一の rowDate オブジェクトを使い回しているのではないでしょうか。今回は入れ子になっていないのでスプレッド構文でコピー(shallow copy)するか、structuredClone() でコピー(deep copy)してから配列要素の値を変更するとよいかと思います。 https://jsfiddle.net/24h5p1nL/ スプレッド構文 - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax Window: structuredClone() メソッド - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Window/structuredClone

matutake

2025/04/15 08:43

ご回答ありがとうございます。まさしく同一のオブジェクトの使いまわしが原因でした。

行動規範の内容に同意します

回答1件

ベストアンサー

ちょっと中途半端な命題なので予測するしかないですがrowDateがオブジェクトで、rowDatesに投入するときに流用しているからでは？

javascript
1const rowDates=[];
2const rowDate={hoge:0};
3rowDate.hoge=1;
4rowDates[0] = rowDate;
5rowDate.hoge=2;
6rowDates[1] = rowDate;
7rowDate.hoge=3;
8rowDates[2] = rowDate;
9for(let i = 0; i < rowDates.length; i++){
10  console.log(rowDates[i]);
11}
12// 結果：{hoge:3}が3回表じされる