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

推薦する

Vueはシンプルなメモ帳機能を実装します

この記事では、参考までに、簡単なメモ帳機能を実装するためのVueの具体的なコードを紹介します。具体的...

MySql でリモート接続を許可する方法

MySql でリモート接続を許可する方法この目標を達成するには、2つのことを行う必要がある。ユーザー...

Vueデータプロキシの詳細な説明

目次1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、デ...

UI を通じて Docker を管理する方法

Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...

シンプルなページング効果を実現するjQuery+Ajax

この記事では、ページング効果を実現するためのjquery+Ajaxの具体的なコードを参考までに紹介し...

Vue 父子価値移転、兄弟価値移転、子父価値移転の詳細な説明

目次1. 親コンポーネントが子コンポーネントに値を渡す1. 親コンポーネント.vue 2. サブコン...

この記事では、jsのデータ型とデータ構造の世界を紹介します。

目次1. 動的型付けとは何ですか? 2. データ型2.1 プリミティブ型 (6 つのプリミティブ型、...

Vue コンポーネントの切り替え、動的コ​​ンポーネント、コンポーネントのキャッシュについて

目次1. コンポーネント切り替え方式方法1: v-ifとv-elseを使用する方法 2: 組み込みコ...

垂直方向の中央揃えをエレガントに実現する方法を教えます(推奨)

序文CSS で水平方向と垂直方向に中央揃えする方法はたくさんあります。この記事で紹介する方法は非常に...

一般的なテーブルコンポーネントの Vue カプセル化の完全な手順記録

目次序文テーブル コンポーネントをカプセル化する必要があるのはなぜですか?ステップ1: 共通コンポー...

HTML 要素の高さ、offsetHeight、clientHeight、scrollTop などの詳細な説明。

要素に関するいくつかの属性フロントエンドの日常的な開発では、一部のページのプロパティを取得または監視...

MySQL シリーズ 9 MySQL クエリ キャッシュとインデックス

目次チュートリアルシリーズ1. MySQL アーキテクチャクエリキャッシュキャッシュされないクエリ:...

複数のフィールドをグループ化するMySQLグループ

日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...

Mysqlの同時パラメータ調整の詳細な説明

目次クエリキャッシュの最適化概要クエリプロセスクエリキャッシュ構成クエリキャッシュの無効化メモリ管理...

Vueリストレンダリングキーの原理と機能の詳細な説明

目次リストレンダリングキーの原理と機能主要原則の分析キーの役割要約するリストレンダリングキーの原理と...