序文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の起動に失敗する問題を解決する
2日前に新しい会社に入社しました。その会社ではIntelli Ideaを使っています。Eclipse...
序文この記事は主にMySQLメタデータ生成Hiveテーブル作成ステートメントコメントスクリプトに関す...
Web プロジェクトでは、タイムライン コントロールをよく使用します。この記事では、項目ごとに展開で...
レンダリング原理フォーム要素には、正規表現(携帯電話番号、メールアドレス、IDカードなど)をカスタマ...
目次1. はじめに1.1 原則1.2 プロセス1.3 特徴1.4 githubアドレス2. テスト環...
ドロップテーブルドロップはテーブル情報を直接削除するため、最も高速ですが、データを取得することはでき...
次のようなシナリオがあります。円形のコンテナで、最も外側のコンテナの背景が円弧になっています。内側の...
ページが非常に長い場合は、下にさらにコンテンツがあることをユーザーに知らせるために矢印が必要になるこ...
序文最近CocosCreatorを学びたいと思ったので、エディターをダウンロードして起動しました。誰...
【コンテンツ】: 1.背景画像のグラデーションスタイルを使用する2. スケールを使ってズームできる...
序文最近、プロジェクトで :first-child を使用したのですが、すぐに思いつきました。これは...
フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...
まず、Vue-cli をインストールする必要があります。 npm インストール -g vue-cli...
序文MySQL スロー クエリ ログは、MySQL が提供するログ レコードの一種です。これは、応答...
HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...