JavaScript の配列強力をマスターする: forEach、マップ、フィルター、リデュース、スプレッド、レスト

Patricia Arquette
リリース: 2024-11-24 14:16:12
オリジナル
852 人が閲覧しました

Mastering JavaScript

forEach: 要素の反復

forEach メソッドは、配列内の各要素を反復処理し、各要素に対して提供されたコールバック関数を実行します。

const 数値 = [1, 2, 3, 4, 5];
numbers.forEach(num => {
console.log(num);
});

マップ: 要素の変換

map メソッドは、提供された関数を元の配列の各要素に適用することにより、新しい配列を作成します。

const 数値 = [1, 2, 3, 4, 5];
const doubledNumbers =numbers.map(num => num * 2);
console.log(doubledNumbers); // 出力: [2, 4, 6, 8, 10]

フィルター: 要素の選択

フィルター メソッドは、提供された関数によって実装されたテストに合格した要素のみを含む新しい配列を作成します。

const 数値 = [1, 2, 3, 4, 5];
const EvenNumbers =numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 出力:
[2, 4]

reduce: 値の累積

reduce メソッドは、アキュムレータと配列内の各要素に対して関数を適用することにより、配列を単一の値に削減します。

const 数値 = [1, 2, 3, 4, 5];
const sum =numbers.reduce((アキュムレータ, currentValue) => アキュムレータ
currentValue, 0);
console.log(合計); // 出力: 15

スプレッド演算子 (...): 要素の展開

スプレッド演算子は、反復可能 (配列、文字列、オブジェクト) を個々の要素に展開します。

const 数値 = [1, 2, 3];
const newArray = [...数値, 4, 5];
console.log(newArray); // 出力: [1, 2, 3, 4, 5]

残りのオペレータ (...): 要素の収集
残りの演算子は、残りの要素を配列に収集します。

関数 sum(...numbers) {
returnnumber.reduce((total, num) => 合計 num, 0);
}
console.log(sum(1, 2, 3, 4)); // 出力: 10

実際の例:

  1. 偶数のフィルタリング:

const 数値 = [1, 2, 3, 4, 5, 6];
const EvenNumbers =numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 出力: [2, 4, 6]

  1. 二乗数値を含む新しい配列の作成:

const 数値 = [1, 2, 3, 4, 5];
const squaredNumbers =numbers.map(num => num * num);
console.log(squaredNumbers); // 出力: [1, 4, 9, 16, 25]

  1. 配列要素の合計:

const 数値 = [1, 2, 3, 4, 5];
const sum =numbers.reduce((アキュムレータ, currentValue) => アキュムレータ
currentValue, 0);
console.log(合計); // 出力: 15

  1. 入れ子になった配列のフラット化:

constnestedArray = [[1, 2], [3, 4], [5]];
const flattenedArray =nestedArray. flat();
console.log(フラット化配列); // 出力: [1, 2, 3, 4, 5]

以上がJavaScript の配列強力をマスターする: forEach、マップ、フィルター、リデュース、スプレッド、レストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート