JavaScript での配列の作成は基本的なタスクですが、経験豊富な開発者でも見落とす可能性のある微妙な点や落とし穴がいくつかあります。基本を掘り下げて、配列の作成と操作の興味深い側面を探ってみましょう。

基本的な配列の作成

配列を作成する最も簡単な方法は、配列リテラルを使用することです:

let arr = [];

ループを使用してこの配列にデータを入力できます:

for (let i = 0; i 



これにより、要素 [0, 1, 2, 3, 4] を含む配列が作成されます。ただし、値を設定せずに空の配列を作成すると、項目も空のスロットも含まれない配列が作成されます。


  
  
  配列コンストラクターの使用


配列を作成する別の方法は、配列コンストラクターを使用することです:



let arr = Array(5);




 単一の数値引数が渡されると、指定された長さを持つスパース配列が作成されますが、実際の要素は作成されません:



console.log(arr.length); // 5
console.log(arr); // [empty × 5]





  
  
  スパース配列


疎配列には「空のスロット」があり、map、filter、forEach などのメソッドを使用するときに予期しない動作が発生する可能性があります。これらのメソッドは空のスロットをスキップします:



let arr = Array(5);
arr = arr.map((x, i) => i); // Still [empty × 5]




このような配列に値を設定するには、値を手動で設定する必要があります:



arr[0] = 2;
arr[4] = 3;
console.log(arr); // [2, empty × 3, 3]





  
  
  スパース配列の処理


スパース配列を効果的に処理するには、fill などのメソッドを使用して値を初期化できます。



let arr = Array(5).fill(1);
console.log(arr); // [1, 1, 1, 1, 1]




ただし、オブジェクトや配列を入力する場合は注意してください:



let arr = Array(5).fill({});
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}]




各要素は同じオブジェクトを参照します。これを回避するには、map:
 を使用します。


let arr = Array(5).fill(0).map(() => ({}));
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {}, {}, {}, {}]





  
  
  Array.from メソッド


Array.from は、配列のようなオブジェクトまたは反復可能なオブジェクトから配列を作成する多用途の方法を提供します:



let arr = Array.from({ length: 5 }, (_, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]




このメソッドは、2 次元配列を作成する場合にも役立ちます:



let arr2D = Array.from({ length: 5 }, () => Array(5).fill(0));
arr2D[0][0] = 1;
console.log(arr2D); // [[1, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]]





  
  
  配列の反復処理


JavaScript には、配列を反復処理するいくつかの方法があり、それぞれが疎配列を異なる方法で処理します。

• for ループ: 空のスロットを未定義として扱い、すべてのインデックスを処理します。
• for...in: 空のスロットをスキップして、配列のインデックスを反復します。
• for...of: 空のスロットを未定義として扱い、値を反復処理します。

結論

JavaScript での配列の作成と操作の複雑さを理解すると、よくある落とし穴を回避し、より効率的なコードを作成するのに役立ちます。配列リテラル、Array コンストラクター、または Array.from や fill などのメソッドを使用しているかどうかにかかわらず、これらのツールがどのように機能するかを知ることで、プロジェクト内で配列を効果的に処理できるようになります。

このガイドが役に立ったと思われた場合は、お知らせください。私は、JavaScript の基本を徹底的に掘り下げたコンテンツをさらに作成したいと常に考えています。読んでいただきありがとうございます。コーディングを楽しんでください!