序文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の起動に失敗する問題を解決する
この記事では、参考までに、簡単なメモ帳機能を実装するためのVueの具体的なコードを紹介します。具体的...
MySql でリモート接続を許可する方法この目標を達成するには、2つのことを行う必要がある。ユーザー...
目次1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、デ...
Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...
この記事では、ページング効果を実現するためのjquery+Ajaxの具体的なコードを参考までに紹介し...
目次1. 親コンポーネントが子コンポーネントに値を渡す1. 親コンポーネント.vue 2. サブコン...
目次1. 動的型付けとは何ですか? 2. データ型2.1 プリミティブ型 (6 つのプリミティブ型、...
目次1. コンポーネント切り替え方式方法1: v-ifとv-elseを使用する方法 2: 組み込みコ...
序文CSS で水平方向と垂直方向に中央揃えする方法はたくさんあります。この記事で紹介する方法は非常に...
目次序文テーブル コンポーネントをカプセル化する必要があるのはなぜですか?ステップ1: 共通コンポー...
要素に関するいくつかの属性フロントエンドの日常的な開発では、一部のページのプロパティを取得または監視...
目次チュートリアルシリーズ1. MySQL アーキテクチャクエリキャッシュキャッシュされないクエリ:...
日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...
目次クエリキャッシュの最適化概要クエリプロセスクエリキャッシュ構成クエリキャッシュの無効化メモリ管理...
目次リストレンダリングキーの原理と機能主要原則の分析キーの役割要約するリストレンダリングキーの原理と...