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

推薦する

FTP環境設定ソリューション(vsftpd)の詳細な説明

1. vsftpdコンポーネントをインストールするインストールコマンド: [root@ink4t ~...

Dockerコンテナでは、イメージを簡素化してサイズを縮小する方法を詳しく説明しています

目次1.画像レイヤーの数を減らす1. 命令の統合2. 多段階ビルド3. スクワッシュ機能を有効にする...

WiFi 開発 | WiFi ワイヤレス テクノロジーの紹介

目次WiFiワイヤレステクノロジーの紹介1. WiFiテクノロジーの概要2. ESP8266の紹介W...

uni-app で scss を使用するサンプル コード

遭遇した落とし穴私は午後中ずっと、uni-app で scss を使用する際の落とし穴を解決すること...

MySQL で制限を使用するとパフォーマンスに影響するのはなぜですか?

まず、MySQL のバージョンについて説明します。 mysql> バージョンを選択します();...

VMware CentOS 仮想マシンのインストールとネットワーク構成のグラフィックチュートリアル

1. CentOSイメージをダウンロードする1.1 ダウンロードウェブサイトhttp://mirro...

HTML テーブル マークアップ チュートリアル (43): テーブル ヘッダーの VALIGN 属性

垂直方向では、ヘッダーの配置を上、中央、下に設定できます。基本的な構文構文Top は上、Middle...

MySQLのサブクエリユニオンの効率性についての簡単な説明と

最近の製品テストでは、同時呼び出し数が 10 未満の場合に応答時間が 100 ミリ秒以内に維持できな...

Dockerコンテナの起動失敗を解決する方法

質問: コンピュータを再起動した後、docker の mysql コンテナを再起動できません。原因が...

JavaScript で Baidu Maps API にアクセスする方法と手順

目次1. Baidu Map API アクセス2. HTML で Baidu Map API を使用...

Linux ネットワークプログラミング機能の簡単な分析

目次1.ソケットを作成する2. ソケットをバインドする3. 聞き手を作る。聞く4. 接続が受け入れら...

MySQLクエリ文を書き換える3つの戦略

目次複雑なクエリとステップバイステップのクエリクエリステートメントを分割する共同クエリの分解問題のあ...

Vueはマルチタブコンポーネントを実装します

効果を直接確認するために、リロード、左を閉じる、右を閉じる、その他の機能を閉じるなどの右クリック メ...