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で関連テーブルを削除する実用的な方法

推薦する

MySQL ログトリガー実装コード

SQL文 ドロップトリガー もし sys_menu_edit が存在します。 各行のsys_menu...

JS で CSS 変数を使用する方法

JS で CSS 変数を使用する方法:export キーワードを使用して、js オブジェクトを le...

Ubuntu 20.04 では、隠し録音ノイズ低減機能が有効になります (推奨)

最近、 Ubuntu 20.04でkazamを使用して録音しているときに、問題が見つかりました。シス...

PHP スケジュールバックアップ MySQL および mysqldump 構文パラメータの詳細

まず、MySQL バックアップ コマンド mysqldump の一般的な操作例をいくつか紹介します。...

JavaScriptのスタックとコピーの詳細な説明

目次1. スタックの定義2. JSスタックの調査1. スタックとヒープ2. 基本型と参照型3. 値渡...

VMware Workstation16 と Navicat リモート接続での Centos7 での MySQL8.0 インストール プロセス

目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...

MySQL5.7.03 上位バージョンから MySQL 5.7.17 への置き換えインストール プロセスと見つかった問題の解決策

1. インストール方法は? 1. [実行] -> [cmd] と入力して、小さな黒いウィンドウ...

PostgreSQL データベースにおける varchar、char、text の比較に関する簡単な説明

以下のように表示されます。名前説明する文字可変(n)、varchar(n)長さ制限あり、可変長文字(...

Nginx の負荷分散アルゴリズムとフェイルオーバー分析

概要Nginx ロード バランシングは、アップストリーム サーバー (実際のビジネス ロジックによっ...

Centos7 での MySQL 5.7.20 のインストールと設定に関する詳細なチュートリアル

1. 公式 Web サイトから MySQL 5.7 インストール パッケージ (mysql-5.7....

MySQL のインストール方法と設定に関するいくつかの問題の概要

1. MySQL rpm パッケージのインストール # インストールソースをダウンロードします [r...

MySQL テーブルの読み取り、書き込み、インデックス作成、その他の操作の SQL ステートメントの効率最適化の問題を分析します。

前回は、Explain 実行プランの表示、インデックスの分析など、MySQL での SQL クエリの...

nginx をシャットダウン/再起動/起動する方法

閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...

Chrome プラグイン (拡張機能) 開発ガイド (完全デモ)

目次前面に書かれた序文ChromeプラグインとはChrome プラグイン開発を学ぶことの意義は何です...

Centos 7.4 サーバーの時刻同期設定方法 [NTP サービスに基づく]

この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...