JavaScript の配列メソッドを知っておくべき

このガイドでは、6 つの基本的な JavaScript 配列メソッド、filter、map、reduce、some、every、および includes について説明します。これらをマスターすると、JavaScript プログラミング スキルが大幅に向上します。

1. filter() メソッド:

filter() メソッドは、指定された条件を満たす要素のみを含む新しい配列を作成します。 条件を満たさない要素は省略されます。

仕組み:

• 各配列要素を反復処理します。
• 各要素にコールバック関数を適用します。
• コールバックが true を返す場合、要素は新しい配列に含まれます。それ以外の場合は除外されます。

<code class="language-javascript">let boxers = [
    { name: "Tyson Fury", weight: 280 },
    { name: "Mairis Briedis", weight: 199 },
    { name: "Artur Beterbiev", weight: 175 },
    { name: "Jermall Charlo", weight: 160 },
    { name: "Terence Crawford", weight: 146 }
];

// Filter boxers weighing over 170 pounds
let heavyweights = boxers.filter(boxer => boxer.weight > 170);

console.log(heavyweights);</code>

出力:

<code class="language-javascript">[
    { name: "Tyson Fury", weight: 280 },
    { name: "Mairis Briedis", weight: 199 },
    { name: "Artur Beterbiev", weight: 175 }
]</code>

2. map() メソッド:

map() メソッドは、配列の各要素を変換し、変換された要素を含む新しい配列を返します。

仕組み:

• 各配列要素を反復処理します。
• 各要素にコールバック関数を適用します。
• コールバックの戻り値は、新しい配列内の元の要素を置き換えます。

<code class="language-javascript">let decimalNumbers = [222, 354, 4684, 123, 5];

// Convert decimal numbers to hexadecimal
let hexNumbers = decimalNumbers.map(num => num.toString(16));

console.log(hexNumbers);</code>

3. reduce() メソッド:

reduce() メソッドは、コールバック関数を各要素に繰り返し適用し、単一の結果値を蓄積します。

仕組み:

• 配列を反復処理します。
• コールバックをアキュムレータと現在の要素に適用します。
• コールバックの結果が新しいアキュムレータ値になります。
• 最終的なアキュムレータ値が返されます。

<code class="language-javascript">let numbers = [1, 2, 3, 4, 5];

// Calculate the sum of all numbers
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum); // Output: 15</code>

4. some() メソッド:

some() メソッドは、少なくとも 1 つの要素が指定された条件を満たすかどうかを確認します。 一致するものが見つかった場合は true を返し、一致しない場合は false を返します。

仕組み:

• 配列を反復処理します。
• 条件を満たす要素が見つかるとすぐに停止して true を返します。
• 条件を満たす要素がない場合は、false を返します。

<code class="language-javascript">let ages = [16, 20, 14, 18];

// Check if at least one person is an adult (≥ 18)
let hasAdult = ages.some(age => age >= 18);

console.log(hasAdult); // Output: true</code>

5. every() メソッド:

every() メソッドは、すべての 要素が指定された条件を満たすかどうかをチェックします。 すべての要素が合格した場合にのみ true を返します。それ以外の場合、false.

仕組み:

• 配列を反復処理します。
• 要素が条件を満たさない場合は、すぐに false を返します。
• すべての要素が合格した場合にのみ、true を返します。

<code class="language-javascript">let scores = [80, 85, 90, 95];

// Check if all scores are above 75
let allAbove75 = scores.every(score => score > 75);

console.log(allAbove75); // Output: true</code>

6. includes() メソッド:

includes() メソッドは、配列に特定の値が含まれているかどうかを確認します。見つかった場合は true を返し、見つからない場合は false を返します。

仕組み:

厳密な等価性 (
• ) を使用して値を検索します。===
オプションの開始インデックスを指定できます。

以上がJavaScript の配列メソッドを知っておくべきの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。