JavaScript 配列をマスターするためのガイド-jsチュートリアル-php.cn

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

WBOY

リリース： 2024-07-19 16:34:11

オリジナル

991 人が閲覧しました

A Guide to Master JavaScript Arrays

配列は、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 サイトの他の関連記事を参照してください。