JavaScript 配列メソッド: `forEach`、`map`、`filter`、および `reduce`

JavaScript 配列メソッド: forEach、map、filter、reduce

JavaScript には、配列を操作するための強力なメソッドがいくつか用意されています。これらのメソッド (forEach、map、filter、reduce) を使用すると、コードがより効率的で読みやすくなります。簡単な例えと例を使用して、これらの方法を調べてみましょう。

それぞれに

例え: 箱の中のおもちゃで遊ぶ

おもちゃの入った箱があり、それぞれのおもちゃで 1 つずつ遊びたいと想像してください。それぞれのおもちゃを箱から取り出して遊んでから、元に戻します。

例:

let toys = ['car', 'doll', 'ball'];

toys.forEach(toy => {
  console.log('Playing with', toy);
});

説明:
箱の中のおもちゃをひとつひとつ見て、それで遊びます。

地図

例え: それぞれのおもちゃを新しいものに変える

おもちゃの入った箱があり、それぞれのおもちゃを別のものに変えたいとします。たとえば、各車をレースカーに、各人形をスーパーヒーローに、各ボールをバスケットボールに変えます。

例:

let toys = ['car', 'doll', 'ball'];

let newToys = toys.map(toy => {
  return toy + ' (new version)';
});

console.log(newToys);

説明:
それぞれのおもちゃを新しいバージョンに変換し、新しいおもちゃを新しい箱に入れます。

フィルター

例え: 特定のおもちゃだけを選んで遊ぶ

あなたはおもちゃの箱を持っていますが、今日は赤いおもちゃだけで遊びたいと思っています。そこで、箱を調べて赤いおもちゃだけを取り出します。

例:

let toys = ['red car', 'blue doll', 'red ball'];

let redToys = toys.filter(toy => toy.includes('red'));

console.log(redToys);

説明:
特定の条件 (この場合は赤) に一致するおもちゃのみを選択します。

減らす

例え: すべてのおもちゃを 1 つの巨大なおもちゃに結合する

すべてのおもちゃを組み合わせて、1 つの大きなおもちゃを作りたいと想像してください。各おもちゃを取り出して、メガおもちゃに 1 つずつ追加します。

例:

let toys = ['car', 'doll', 'ball'];

let megaToy = toys.reduce((combinedToys, toy) => {
  return combinedToys + ' ' + toy;
}, '');

console.log(megaToy);

説明:
空の巨大なおもちゃから始めて、大きなおもちゃが 1 つになるまで、おもちゃを追加し続けます。

すべてをまとめると

さまざまなおもちゃが入った箱があり、次のことを行いたいとします。

1. それぞれのおもちゃを見て、それが何であるか (それぞれについて) を確認してください。
2. 各おもちゃを新しいバージョン (マップ) に変換します。
3. 青色のおもちゃのみを選択します (フィルター)。
4. 選択したすべてのおもちゃを 1 つのメガおもちゃに結合します (減らす)。

let toys = ['blue car', 'red doll', 'blue ball'];

toys.forEach(toy => {
  console.log('Toy:', toy);
});

let newToys = toys.map(toy => {
  return toy + ' (new version)';
});

let blueToys = newToys.filter(toy => toy.includes('blue'));

let megaToy = blueToys.reduce((combinedToys, toy) => {
  return combinedToys + ' ' + toy;
}, '');

console.log(megaToy);

説明:

1. それぞれのおもちゃを見てください。
2. 各おもちゃを新しいバージョンに変更します。
3. 青いおもちゃだけを選択してください。
4. それらを組み合わせて 1 つの大きなおもちゃにします。

---

高度なオプションとテクニック

それぞれに

• forEach から抜け出す: forEach ループから抜け出すことはできません。この機能が必要な場合は、for ループまたは for...of の使用を検討してください。
• thisArg の使用: コールバック内で this として使用する thisArg を指定できます。

  toys.forEach(function(toy) {
    console.log(this.prefix + toy);
  }, { prefix: 'Toy: ' });

地図

• thisArg の使用: forEach と同様に、コールバック内で this として使用する thisArg を指定できます。

  let newToys = toys.map(function(toy) {
    return this.prefix + toy;
  }, { prefix: 'New: ' });

• 異なる型を返す: マップは異なる型の配列を返すことができます。

  let toyLengths = toys.map(toy => toy.length);

フィルター

• 複雑な条件: フィルタリングには複雑な条件を使用します。

  let complexFilter = toys.filter(toy => toy.includes('blue') && toy.length > 4);

減らす

• 初期値: 予期しない結果を避けるために、常に初期値を指定します。

  let sum = [1, 2, 3].reduce((total, num) => total + num, 0);

• オブジェクトへのリデュース: リデュースを使用してオブジェクトを作成できます。

  let toyCounts = toys.reduce((counts, toy) => {
    counts[toy] = (counts[toy] || 0) + 1;
    return counts;
  }, {});

---

これらのメソッドとその高度なオプションを理解することで、より効率的で読みやすい JavaScript コードを作成できます。コーディングを楽しんでください!

以上がJavaScript 配列メソッド: `forEach`、`map`、`filter`、および `reduce`の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。