配列は、JavaScript で最も一般的に使用されるデータ構造の 1 つです。これらを使用すると、複数の値を 1 つの変数に保存でき、データの操作と作業を簡単かつ効率的に行うための豊富な組み込み関数セットが付属しています。この記事では、JavaScript 配列関数について詳しく説明し、習得に役立つ説明、例、コメントを提供します。

JavaScript の配列の概要

配列は、数値、文字列、オブジェクト、さらにはその他の配列など、さまざまな種類のデータを保持できる、順序付けられた項目のコレクションです。

let fruits = ["Apple", "Banana", "Cherry"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "Apple", true, {name: "John"}, [1, 2, 3]];

配列の作成

配列は、配列リテラルまたは配列コンストラクターを使用して作成できます。

let arr1 = [1, 2, 3];
let arr2 = new Array(1, 2, 3);
console.log(arr1); // Output: [1, 2, 3]
console.log(arr2); // Output: [1, 2, 3]

配列のプロパティ

• length: 配列内の要素の数を返します。

let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // Output: 5

配列メソッド

1.プッシュ()

配列の末尾に 1 つ以上の要素を追加し、新しい長さを返します。

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

2.ポップ()

配列から最後の要素を削除し、その要素を返します。

let arr = [1, 2, 3];
let last = arr.pop();
console.log(arr); // Output: [1, 2, 3]
console.log(last); // Output: 3

3. シフト()

配列から最初の要素を削除し、その要素を返します。

let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // Output: [2, 3]
console.log(first); // Output: 1

4. unshift()

配列の先頭に 1 つ以上の要素を追加し、新しい長さを返します。

let arr = [2, 3];
arr.unshift(1);
console.log(arr); // Output: [1, 2, 3]

5. concat()

2 つ以上の配列を結合し、新しい配列を返します。

let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2);
console.log(merged); // Output: [1, 2, 3, 4]

6. join()

配列のすべての要素を文字列に結合します。

let arr = [1, 2, 3];
let str = arr.join("-");
console.log(str); // Output: "1-2-3"

7. リバース()

配列内の要素の順序を逆にします。

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // Output: [3, 2, 1]

8.スライス()

配列の一部の浅いコピーを新しい配列オブジェクトに返します。

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);
console.log(sliced); // Output: [2, 3]

9. スプライス()

要素を削除、置換、または追加して配列の内容を変更します。

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b");
console.log(arr); // Output: [1, "a", "b", 4, 5]

10. ソート()

配列の要素をその場でソートし、ソートされた配列を返します。

let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b);
console.log(arr); // Output: [1, 1, 3, 4, 5, 9]

11.フィルター()

提供された関数によって実装されたテストに合格したすべての要素を含む新しい配列を作成します。

let arr = [1, 2, 3, 4, 5];
let filtered = arr.filter(x => x > 2);
console.log(filtered); // Output: [3, 4, 5]

12.マップ()

呼び出し配列内のすべての要素に対して指定された関数を呼び出した結果を含む新しい配列を作成します。

let arr = [1, 2, 3];
let mapped = arr.map(x => x * 2);
console.log(mapped); // Output: [2, 4, 6]

13.reduce()

アキュムレータと配列内の各要素に対して関数を適用して、単一の値に削減します。

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 10

14.find()

指定されたテスト関数を満たす配列内の最初の要素の値を返します。

let arr = [1, 2, 3, 4, 5];
let found = arr.find(x => x > 3);
console.log(found); // Output: 4

15.findIndex()

指定されたテスト関数を満たす配列内の最初の要素のインデックスを返します。

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(x => x > 3);
console.log(index); // Output: 3

16. 毎()

配列内のすべての要素が、提供された関数によって実装されたテストに合格するかどうかをテストします。

let arr = [1, 2, 3, 4, 5];
let allBelowTen = arr.every(x => x 




  
  
  17. いくつか()


配列内の少なくとも 1 つの要素が、提供された関数によって実装されたテストに合格するかどうかをテストします。



let arr = [1, 2, 3, 4, 5];
let anyAboveThree = arr.some(x => x > 3);
console.log(anyAboveThree); // Output: true





  
  
  18. include()


配列のエントリに特定の値が含まれているかどうかを判断します。



let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3);
console.log(hasThree); // Output: true





  
  
  19.indexOf()


配列内で指定された要素が見つかる最初のインデックスを返します。要素が存在しない場合は -1 を返します。



let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // Output: 2





  
  
  20. lastIndexOf()


配列内で指定された要素が見つかる最後のインデックスを返します。要素が存在しない場合は -1 を返します。



let arr = [1, 2, 3, 4, 5, 3];
let index = arr.lastIndexOf(3);
console.log(index); // Output: 5





  
  
  21. フラット()


すべてのサブ配列要素が指定された深さまで再帰的に連結された新しい配列を作成します。



let arr = [1, [2, [3, [4]]]];
let flattened = arr.flat(2);
console.log(flattened); // Output: [1, 2, 3, [4]]





  
  
  22. flatMap()


まずマッピング関数を使用して各要素をマップし、次に結果を新しい配列にフラット化します。



let arr = [1, 2, 3];
let flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // Output: [1, 2, 2, 4, 3, 6]





  
  
  23.から()


配列のようなオブジェクトまたは反復可能なオブジェクトから、新しく浅くコピーされた配列インスタンスを作成します。



let str = "Hello";
let arr = Array.from(str);
console.log(arr); // Output: ["H", "e", "l", "l", "o"]





  
  
  24. isArray()


渡された値が配列であるかどうかを判断します。



console.log(Array.isArray([1, 2, 3])); // Output: true
console.log(Array.isArray("Hello")); // Output: false





  
  
  25.の()


を作成します

引数の数や型に関係なく、可変数の引数を持つ新しい Array インスタンス。



let arr = Array.of(1, 2, 3);
console.log(arr); // Output: [1, 2, 3]





  
  
  実践例



  
  
  例 1: 配列から重複を削除する




let arr = [1, 2, 3, 3, 4, 4, 5];
let unique = [...new Set(arr)];
console.log(unique); // Output: [1, 2, 3, 4, 5]





  
  
  例 2: 配列内のすべての値の合計




let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc   curr, 0);
console.log(sum); // Output: 15





  
  
  例 3: 深くネストされた配列のフラット化




let arr = [1, [2, [3, [4, [5]]]]];
let flattened = arr.flat(Infinity);
console.log(flattened); // Output: [1, 2, 3, 4, 5]





  
  
  例 4: 配列内の最大値を求める




let arr = [1, 2, 3, 4, 5];
let max = Math.max(...arr);
console.log(max); // Output: 5





  
  
  例 5: キーと値のペアの配列の作成




let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);
console.log(entries); // Output: [["a", 1], ["b", 2], ["c", 3]]





  
  
  結論


配列は JavaScript の重要な部分であり、データのコレクションを管理する強力な方法を提供します。配列関数をマスターすると、複雑なデータ操作を簡単に実行し、より効率的で読みやすいコードを作成できるようになります。この包括的なガイドでは、JavaScript の最も重要な配列関数を取り上げ、詳細な例と説明を備えています。これらの関数を実際に使用し、さまざまなユースケースを試して理解を深め、コーディング スキルを向上させてください。