JavaScript の `Array.fill()` がコピーではなく共有参照を作成するのはなぜですか? `Array.from()` はこれをどのように修正できるのでしょうか?

Array.fill() は値ではなく参照によって非表示のコピーを作成します

JavaScript で Array.fill を利用する場合、複数の内部配列が存在する状況が発生する可能性があります。行列は、同じ基礎となる配列オブジェクトを参照します。これにより、個々の要素を変更しようとすると、予期しない動作が発生する可能性があります。

問題

たとえば、次のコード スニペットを考えてみましょう。

let m = Array(6).fill(Array(12).fill(0));

このコードの目的は、 6x12 行列。各要素は 0 に初期化されます。ただし、微妙な点があります。問題:

m[0][0] = 1;
console.log(m[1][0]); // Outputs 1 instead of 0

m[0][0] を 1 に設定した後、m[1][0] は 0 のままであると予想されます。しかし、コンソールには 1 が表示されます。これは次の事実によるものです。すべての内部配列が実際には同じ基になる配列オブジェクトを参照していること。

解決策: Array.from() から Rescue

この問題を解決するには、真の値によるコピーを実現するには、Array.from():

let m = Array.from({length: 6}, e => Array(12).fill(0));

を使用できます。このアプローチでは、外側の配列の要素ごとに新しい配列を作成し、すべての内側の配列が個別のオブジェクトになるようにします。その結果、1 つの要素を変更しても他の要素には影響しません:

m[0][0] = 1;
console.log(m[0][0]); // Expecting 1
console.log(m[0][1]); // Expecting 0
console.log(m[1][0]); // Expecting 0

以上がJavaScript の `Array.fill()` がコピーではなく共有参照を作成するのはなぜですか? `Array.from()` はこれをどのように修正できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。