JavaScript リスト内包表記

  1. JavaScript リスト内包表記の構文説明
  2. Map を使用した JavaScript リスト内包表記
  3. for..of 構文を使用してリストを反復処理する
  4. まとめ
JavaScript リスト内包表記

多くのプログラミング言語は、リスト内包表記と呼ばれる特定の言語構文をサポートしています。 このリスト内包表記を使用して、既存のリストから新しいリストを派生させることができます。

JavaScript 式であるリスト内包表記構文を使用すると、既存のリストに基づいて新しいリストを簡単に作成できます。 ただし、標準と Firefox の実装には含まれていません。

ECMAScript 2016 でのリスト内包表記の標準化は、既存のリストの内容に基づいて新しいリストを構築するための実用的なショートカットを提供するため、最初に提案されました。

リスト内包表記は、以前は JavaScript 委員会 TC39 によって JavaScript への追加が提案されていましたが、filter()map() などの他の JavaScript リスト手法を支持して放棄されました。

filter() または map() メソッドは、リスト内包構文の代わりにリストで使用できます。 JavaScript のリスト内包表記は、これの別名です。

JavaScript リスト内包表記の構文説明

filter() メソッドを使用して既存のリストに特定のフィルターを適用すると、元のリストから新しいリストを作成できます。

フィルターは、関数本体で定義したテスト関数を渡すと、リストの要素を返す JavaScript 式です。

例:

names = ["Rex", "Neon", "Jake", "Eid"] としてリストを取得して、JavaScript で filter() メソッドを示し、新しいリストを作成します。

コード:

let names = ['Rex', 'Neon', 'Jake', 'Eid'];

let new_list = names.filter(function(name) {
  return name.includes('e');
});

console.log(new_list);

以下に示すように、ここで出力を取得できます。

フィルタ方法

フィルターは新しいリストを作成して、元のリストが変更されないようにします。

ご覧のとおり、リスト内包表記フィルターの適切な代替は filter() メソッドです。

アロー関数構文を使用すると、メソッド本体を 1 行に凝縮することもできます。

コード:

let names = ['Rex', 'Neon', 'Jake', 'Eid'];

let new_list = names.filter(name => name.includes('e'));

console.log(new_list);

出力として、前の例と同じ出力を [ 'Rex', 'Neon', 'Jake' ] として受け取ることができます。

注: JavaScript の ES6 版の新しい関数の 1つは、矢印関数です。 従来の関数に比べ、より分かりやすく関数を作成することができます。

例えば:

これが元の関数の場合:

let testFunction = function(m, n) {
  return m * n;
}

アロー関数を使用すると、この関数のより単純なバージョンとして次のように記述できます。

let testFunction = (m, n) => m * n;

次に、map() メソッドがどのようにリスト全体をループできるかを見てみましょう。

Map を使用した JavaScript リスト内包表記

リスト内包表記は、各リスト要素で繰り返し使用することもできます。

map() メソッドを使用すると、filter() メソッドと同様に、既存のリストから新しいリストを作成できます。

ただし、map() メソッドはフィルタリングせずに既存のリスト全体を反復処理するため、コールバック関数内でコードを自由に実行できます。

例:

リストを names = ["Rex", "Neon", "Jake", "Eid"] と考えて、JavaScript の map() メソッドを示し、文字 "o" を追加して新しいリストを作成します。 リストの各要素へ。

コード:

let names = ['Rex', 'Neon', 'Jake', 'Eid'];

let new_list = names.map(function(name) {
  return name + 'o';
});

console.log(new_list);

ここでは、以下に示すように、結果を受け取ります。

アロー関数

map() 関数は、アロー関数を使用して 1 行に要約できます。

コード:

let names = ['Rex', 'Neon', 'Jake', 'Eid'];

let new_list = names.map(name => name + 'o');

console.log(new_list);

その結果、前の例と同じ出力を [ 'Rexo', 'Neono', 'Jakeo', 'Eido' ] として受け取ることができます。

map() メソッドを使用して、任意の JavaScript リストを繰り返し処理し、特定のコールバック関数を実行できます。

for..of 構文を使用してリストを反復処理する

別の方法として、以下に示すように、演算子 for..of を使用してリストを反復処理することもできます。

let names = ['Rex', 'Neon', 'Jake', 'Eid'];
let new_list = [];

for (const name of names) {
  new_list.push(name + 'o');
}

console.log(new_list);

ここでは、次のように出力を受け取ることができます。

for

上記の例を念頭に置いて、各反復は、リストに格納された要素を保持する新しい name 変数を作成します。

メソッド for..of 内で、各 name 要素を new_list にプッシュします。 各要素に対して、目的の演算子を自由に選択できます。

まとめ

この記事では、JavaScript のリスト内包表記で使用されるメソッドを、filter 関数、map 関数、for..of 反復などの関数を調べることによって表現します。

チュートリアルを楽しんでいますか? <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe
Migel Hewage Nimesha avatar Migel Hewage Nimesha avatar

Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.