JavaScript 配列をマスターするためのガイド

配列は、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]];

配列の作成

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

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 < 10);
console.log(allBelowTen); // Output: true

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]

Practical Examples

Example 1: Removing Duplicates from an Array

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

Example 2: Summing All Values in an Array

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

Example 3: Flattening a Deeply Nested Array

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

Example 4: Finding the Maximum Value in an Array

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

Example 5: Creating an Array of Key-Value Pairs

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

Conclusion

Arrays are an essential part of JavaScript, providing a powerful way to manage collections of data. By mastering array functions, you can perform complex data manipulations with ease and write more efficient and readable code. This comprehensive guide has covered the most important array functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

以上がJavaScript 配列をマスターするためのガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。