序文JavaScript 言語は過去数年間に何度か更新されてきました。技術革新のペースに遅れないようにするには、常に学習する姿勢を保つ必要があります。休憩時間を利用して、配列の include と Reduce の使い方を学習し、理解を深めてください。 配列.プロトタイプ.includesES7 では、このメソッドのサポートが追加されました。includes() メソッドは、配列に指定された値を持つ要素が含まれているかどうかを判定するために使用され、true または false のブール値を返します。含まれている場合は true を返し、含まれていない場合は false を返します。 文法
パラメータ
戻り値含まれている場合は 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 つの戻り値にまとめます。 文法
配列内の削除された要素や値が割り当てられていない要素を除いて、配列内の各要素に対してコールバック関数を順番に実行します。 パラメータ
戻り値関数は処理の結果を蓄積します。 例 定数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}) は、インデックス値をより直感的に確認するためのものです。 初期値が定義されていない場合、出力は次のようになります。
アキュムレータ初期値出力の 2 番目の定義は次のとおりです。
次に、何らかの理由で、ユーザーが 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: WindowsシステムでPhPStudy MySQLの起動に失敗する問題を解決する
SQL文 ドロップトリガー もし sys_menu_edit が存在します。 各行のsys_menu...
JS で CSS 変数を使用する方法:export キーワードを使用して、js オブジェクトを le...
最近、 Ubuntu 20.04でkazamを使用して録音しているときに、問題が見つかりました。シス...
まず、MySQL バックアップ コマンド mysqldump の一般的な操作例をいくつか紹介します。...
目次1. スタックの定義2. JSスタックの調査1. スタックとヒープ2. 基本型と参照型3. 値渡...
目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...
1. インストール方法は? 1. [実行] -> [cmd] と入力して、小さな黒いウィンドウ...
以下のように表示されます。名前説明する文字可変(n)、varchar(n)長さ制限あり、可変長文字(...
概要Nginx ロード バランシングは、アップストリーム サーバー (実際のビジネス ロジックによっ...
1. 公式 Web サイトから MySQL 5.7 インストール パッケージ (mysql-5.7....
1. MySQL rpm パッケージのインストール # インストールソースをダウンロードします [r...
前回は、Explain 実行プランの表示、インデックスの分析など、MySQL での SQL クエリの...
閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...
目次前面に書かれた序文ChromeプラグインとはChrome プラグイン開発を学ぶことの意義は何です...
この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...