JavaScript 配列の include と Reduce の基本的な使用法

JavaScript 配列の include と Reduce の基本的な使用法

序文

JavaScript 言語は過去数年間に何度か更新されてきました。技術革新のペースに遅れないようにするには、常に学習する姿勢を保つ必要があります。休憩時間を利用して、配列の include と Reduce の使い方を学習し、理解を深めてください。

配列.プロトタイプ.includes

ES7 では、このメソッドのサポートが追加されました。includes() メソッドは、配列に指定された値を持つ要素が含まれているかどうかを判定するために使用され、true または false のブール値を返します。含まれている場合は true を返し、含まれていない場合は false を返します。

文法

arr.includes(検索する値[, fromIndex])

パラメータ

  • valueToFind (必須): 検索する要素の値。文字列と文字の比較では大文字と小文字が区別されます。
  • fromIndex (オプション): 配列インデックス fromIndex から valueToFind の検索を開始します。
    • 負の数の場合、検索は array.length + fromIndex のインデックスから昇順で開始されます (つまり、末尾から開始し、fromIndex の絶対値だけ前方にジャンプしてから、後方に検索します)。
    • デフォルト値は 0 です。

戻り値

含まれている場合は true を返し、含まれていない場合は false を返します。


// ES5 コード
const numbers = ["1", "2", "3", "4"];
console.log(numbers.indexOf("一") > -1); // 真
console.log(numbers.indexOf("六") > -1); // false

// ES7 コード
console.log(numbers.includes("一")); // true
console.log(numbers.includes("六")); // false

console.log(numbers.includes("一",1)); // false、配列のインデックス 1 から逆方向に検索console.log(numbers.includes("一", -3)); // true、array.length + fromIndex から逆方向に検索、上記のインデックス 1 から開始するのと同じ

include メソッドを使用すると、コードを短くして理解しやすくすることができます。次のコードに示すように、include メソッドは値を比較するのにも便利です。

// 過去 const day = "Tuesday";
if (day === "火曜日" || day === "水曜日" || day === "木曜日") {
    コンソールログ(日);
}

// Nowif (["火曜日", "水曜日", "木曜日"].includes(day)) {
    コンソールログ(日);
}

配列プロトタイプの削減

Reduce() メソッドは、配列内の各要素に対してリデューサー関数を(昇順で)実行し、結果を 1 つの戻り値にまとめます。

文法

Array.reduce(コールバック(アキュムレータ、現在の値[、インデックス[、配列]])[、初期値])

配列内の削除された要素や値が割り当てられていない要素を除いて、配列内の各要素に対してコールバック関数を順番に実行します。

パラメータ

  • コールバック(必須):配列内の各値(initialValueが指定されていない場合は最初の値を除く)に対して4つのパラメータを含むリデューサー関数を実行します。
    • accumulator (必須): accumulator はコールバックの戻り値を累積します。これはコールバックが最後に呼び出されたときに返された累積値です。初期値は initialValue で定義できます。デフォルトでは配列の最初の要素の値になります。accumulator は静的変数と同様に、前の操作の値を保持します。
    • currentValue (必須): 処理中の配列内の要素
    • index (オプション): 配列内で処理されている現在の要素のインデックス。 initialValue が指定されている場合、開始インデックスは 0 になります。それ以外の場合は、インデックス 1 から始まります。
      注: initialValue が指定されていない場合、reduce は最初のインデックスをスキップして、インデックス 1 からコールバック メソッドの実行を開始します。 initialValue が指定されている場合は、インデックス 0 から開始します。
    • 配列(オプション):reduce() を呼び出す配列
  • initialValue (オプション): コールバック関数が最初に呼び出されたときに最初の引数として使用される値。 初期値が指定されていない場合は、配列の最初の要素が使用されます。 初期値のない空の配列に対してreduceを呼び出すと、エラーが発生します。

戻り値

関数は処理の結果を蓄積します。

定数arrNumbers = [1, 2, 3, 4, 5];
const ReduceNumbers = (arrayNumbers、accumulatorInitVal = false) => {
    const ReduceCallback = (アキュムレータ、現在の値、現在のインデックス) => {
        console.log(`現在のインデックス: ${currentIndex}`);
        累積器 + currentVal を返します。
    };
    accumulatorInitValを返す
        ? arrayNumbers.reduce(reduceCallback、accumulatorInitVal)
        : arrayNumbers.reduce(reduceCallback);
};

console.log(reduceNumbers(arrNumbers)); // 15、アキュムレータの初期値は配列1の最初の要素の値です
console.log(reduceNumbers(arrNumbers, 10)); // 25、アキュムレータの初期値は10です

console.log(current index: ${currentIndex}) は、インデックス値をより直感的に確認するためのものです。

初期値が定義されていない場合、出力は次のようになります。

現在のインデックス: 1
現在のインデックス: 2
現在のインデックス: 3
現在のインデックス: 4

アキュムレータ初期値出力の 2 番目の定義は次のとおりです。

現在のインデックス: 0
現在のインデックス: 1
現在のインデックス: 2
現在のインデックス: 3
現在のインデックス: 4

次に、何らかの理由で、ユーザーが 20 代でフルネームが 3 文字の場合のみ、すべてのユーザーのフルネーム (姓と名) を含む新しい配列が必要になるという奇妙な要件があります。なぜこのような奇妙なデータ サブセットが必要なのかは聞かないでください。製品マネージャーが尋ねたので、喜んでお手伝いします。^_^

const ユーザー = [
    {
        ファーストネーム: "Jian",
        姓: "Sun",
        年齢: 37歳
    },
    {
        firstName: "策",
        姓: "Sun",
        年齢: 21,
    },
    {
        ファーストネーム: "Ge Liang",
        姓: "朱",
        年齢: 28歳
    },
    {
        firstName: "備",
        姓: "Liu",
        年齢: 44歳
    },
    {
        firstName: "统",
        姓: "パン",
        年齢: 22歳
    },
    {
        firstName: "维",
        姓: "姜",
        年齢: 19,
    },
    {
        firstName: "博文",
        姓: "Liu",
        年齢: 22歳
    },
];
const getFullName = (user) => `${user.lastName}${user.firstName}`;
const filterByAge = (user) => user.age >= 20 && user.age < 30;

// 従来の実装 const getFilterResult = users
    // 最初のステップは、20 歳から 30 歳のユーザーをフィルタリングすることです。filter((user) => filterByAge(user))
    // フルネームを連結します。map((user) => getFullName(user))
    // Filter.filter((fullName) => fullName.length === 3);

console.log(getFilterResult); // ['諸葛亮', '劉伯温']

// 反復の実装 const iterationsFilterResult = (arrayResult, currentUser) => {
    現在のユーザーの名前を取得します。
    if (filterByAge(currentUser) && fullname.length === 3) {
        arrayResult.push(フルネーム);
    }
    配列の結果を返します。
};
console.log(users.reduce(iterationsFilterResult, [])); // [ '諸葛亮', '劉博文' ]

要約する

これで、JavaScript 配列の include と Reduce の基本的な使用法に関するこの記事は終了です。JavaScript 配列の include と Reduce に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JS での Reduce() メソッドの使用の概要
  • jsはreduceメソッドを使用してコードをよりエレガントにします
  • JavaScript 配列の Reduce() メソッドの構文と例の分析
  • js配列のfind、some、filter、reduceの違いの詳細な説明
  • 知っておくべき JS 配列削減の高度な使い方 25 選
  • JSはreduce()メソッドを使用してツリー構造データを処理します
  • JS での Reduce Fold Unfold の使用法の詳細な説明
  • JavaScript Reduceの詳しい説明
  • JavaScript Array.reduce ソースコードの詳細な説明
  • 8 JSのreduce使用例とreduce操作方法

<<:  WindowsシステムでPhPStudy MySQLの起動に失敗する問題を解決する

>>:  MySQLで関連テーブルを削除する実用的な方法

推薦する

Intelli Idea で Tomcat 設定が見つからない問題の解決方法

2日前に新しい会社に入社しました。その会社ではIntelli Ideaを使っています。Eclipse...

MySQL メタデータで Hive テーブル作成ステートメントのコメント スクリプトを生成する方法

序文この記事は主にMySQLメタデータ生成Hiveテーブル作成ステートメントコメントスクリプトに関す...

ccs3に基づくタイムライン実装方法

Web プロジェクトでは、タイムライン コントロールをよく使用します。この記事では、項目ごとに展開で...

CSS フォーム検証機能の実装コード

レンダリング原理フォーム要素には、正規表現(携帯電話番号、メールアドレス、IDカードなど)をカスタマ...

MySQL オンライン DDL ツール gh-ost 原理分析

目次1. はじめに1.1 原則1.2 プロセス1.3 特徴1.4 githubアドレス2. テスト環...

MySQL でテーブルを削除する 3 つの方法 (要約)

ドロップテーブルドロップはテーブル情報を直接削除するため、最も高速ですが、データを取得することはでき...

CSSは、他のレイヤーを変更せずに、多層ネスト構造の最外層を回転させる効果を実現します。

次のようなシナリオがあります。円形のコンテナで、最も外側のコンテナの背景が円弧になっています。内側の...

CSS と Bootstrap アイコンを使用して、上下にジャンプするインジケーター矢印のアニメーション効果を作成します。

ページが非常に長い場合は、下にさらにコンテンツがあることをユーザーに知らせるために矢印が必要になるこ...

CocosCreatorゲームにおける魚群アルゴリズムの詳細な説明

序文最近CocosCreatorを学びたいと思ったので、エディターをダウンロードして起動しました。誰...

CSS はモバイル互換性の問題を解決するために 0.5px の線を実装します (推奨)

【コンテンツ】: 1.背景画像のグラデーションスタイルを使用する2. スケールを使ってズームできる...

CSSは親要素の下の最初の子要素を選択します(:first-child)

序文最近、プロジェクトで :first-child を使用したのですが、すぐに思いつきました。これは...

フロントエンド開発に必須:推奨されるブラウザ互換性テストツール 12 選

フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...

Vue-cli を使用して Vue プロジェクトを構築する手順の詳細な説明

まず、Vue-cli をインストールする必要があります。 npm インストール -g vue-cli...

MySQL スロークエリログの役割と公開

序文MySQL スロー クエリ ログは、MySQL が提供するログ レコードの一種です。これは、応答...

React 高階コンポーネント HOC 使用方法の概要

HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...