検索

ES6でreduce()を使用する方法

Jan 29, 2023 pm 06:35 PM
es6reduce()

es6 では、reduce() 関数を使用して、ユーザー指定のコールバック関数を配列内の各要素に対して左から右に順番に実行し、その累積結果を 1 つの戻り値に要約します。構文 " arr .reduce(callback(accumulator, currentValue[,index[, array]])[,initialValue])"。 reduce() 関数は元の配列を変更しません。

ES6でreduce()を使用する方法

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

es6reduce() の概要

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

最初のパラメータ: コールバック関数

配列内の各値を実行します(2 番目のパラメータinitialValueが指定されていない場合、(例外を除く)

  • アキュムレータ: アキュムレータ累積コールバックの戻り値; これは、コールバックが最後に呼び出されたときに返された累積値、または、initialValue (以下を参照) )。

  • currentValue: 配列内で処理されている要素。

  • currentIndex オプション: 配列内で処理されている現在の要素のインデックス。 initialValue が指定されている場合、開始インデックス番号は 0 であり、それ以外の場合はインデックス 1 から始まります。

  • #配列オプション:reduce() の呼び出しに使用される元の配列

#2 番目のパラメーター:initialValue オプション

#コールバック関数を初めて呼び出すときの最初のパラメータの値として。初期値が指定されていない場合は、配列の最初の要素が使用されます。注: 初期値のない空の配列に対してreduceを呼び出すと、エラーが発生します。

これは少し混乱するように思えるかもしれませんが、実際には 2 つの状況があります: 1 つは 2 番目のパラメーターの初期値が指定されている場合、もう 1 つは初期値が指定されていない場合です。

これは、reduce の基本的な使用法です。
var arr = [1, 2, 3];
function reducer(parmar1, parmar2){
}
arr.reduce(reducer)
reduce は、配列の操作に役立つ配列プロトタイプ オブジェクトのメソッドです。これは、リデューサーと呼ばれる別の関数を引数として受け取ります。

reducer には 2 つのパラメータがあります。最初のパラメータ param1 は、最後の Reducer 実行の結果です。リデューサを初めて実行する場合、param1 のデフォルト値は配列の最初の要素の値です。

reduce メソッドは、for ループと同様に、配列内の各要素をループします。そして、現在の値をパラメータ 2 としてループに渡します。

配列を走査した後、reduce は最後のレデューサーによって計算された結果を返します。

詳細な例を見てみましょう。

var arr = ['a', 'b', 'c', 'd', 'e'];
function add(x, y) {
 return x + y;
}
arr.reduce(add)

次に、上記のコードがどのように実行されるかを見てみましょう。 ES6でreduce()を使用する方法

このコードでは、reducer は add です。

まず、add を初めて実行するため、配列の最初の要素 'a' が add の最初のパラメーターとして扱われ、ループは 2 番目の要素 ' から開始されます。配列 b' の a' が開始されます。今回、「b」は追加する 2 番目の引数です。

最初の計算の後、結果「ab」が得られます。この結果はキャッシュされ、次の加算計算で param1 として使用されます。同時に、配列の 3 番目のパラメーター 'c' が add の param2 として使用されます。 ES6でreduce()を使用する方法

同様に、reduce は追加する引数として 'abc' と 'd' を実行し、配列内の要素を反復処理し続けます。 ES6でreduce()を使用する方法

最後に、配列内の最後の要素を走査した後、計算結果を返します。 ES6でreduce()を使用する方法

結果は「abcde」になります。 ES6でreduce()を使用する方法

つまり、reduce も配列を走査する方法であることがわかります。配列内の各要素の値を順番に取得し、reducer 関数を実行します。

しかし、上記のループには調和のとれた美しさがないことがわかります。配列の最初の要素「a」を初期 param1 として取得し、配列の 2 番目の要素をループして param2 を取得するためです。

実際には、reduce 関数の param1 の初期値として、reduce の 2 番目のパラメーターを指定することができます。これにより、配列の最初の要素から始まるループで param2 が取得されます。

コードは次のとおりです:

var arr = ['a', 'b', 'c', 'd', 'e'];
function add(x, y) {
 return x + y;
}
arr.reduce(add, 's')

这一次,我们第一次调用reducer时将's'作为param1,然后从第一个元素开始依次遍历数组。

ES6でreduce()を使用する方法

所以我们可以使用这个语法来重写我们的第一个代码片段。

var arr = ['a', 'b', 'c', 'd', 'e'];
function add(x, y) {
   return x + y;
}
arr.reduce(add, '')

接下来,我们将进入实际编程章节,体验reduce的强大威力。

1、累加和累积乘法

如果我们想得到数组中所有元素的总和,你会怎么做?

一般来说,你可能会这样写:

function accumulation(arr) {
 let sum = 0;
 for (let i = 0; i < arr.length; i++) {
   sum = sum + arr[i];
 }
 return sum;
}

当然,你可能还有其他的写法,但是只要使用for循环,代码就会显得多余。

那我们看看上面的累加函数是做什么的:

  • 将初始总和设置为零
  • 取出数组中的第一个元素并求和
  • 在 sum 中缓存上一步的结果
  • 依次取出数组中的其他元素,进行上述操作
  • 返回最终结果

我们可以看到,当我们用文字描述上述步骤时,很明显它符合reduce的使用。所以我们可以使用reduce来重写上面的代码:

function accumulation(arr) {
 function reducer(x, y) {
   return x + y
 }
 return arr.reduce(reducer, 0);
}

如果你习惯使用箭头函数,上面的代码看起来会更简洁:

function accumulation(arr) {
 return arr.reduce((x, y) => x + y, 0);
}

一行代码搞定!

ES6でreduce()を使用する方法

当然,累积乘法和累加是完全一样的:

function multiplication(arr) {
   return arr.reduce((x, y) => x * y, 1);
}

很多时候,我们在求和的时候需要加上一个权重,这样更能体现reduce的优雅。

const scores = [
 { score: 90, subject: "HTML", weight: 0.2 },
 { score: 95, subject: "CSS", weight: 0.3 },
 { score: 85, subject: "JavaScript", weight: 0.5 }
];
const result = scores.reduce((x, y) => x + y.score * y.weight, 0); // 89

2、获取一个数组的最大值和最小值

如果要获取数组的最大值和最小值,可以这样写:

function max(arr){
 let max = arr[0];
 for (let ele of arr) {
   if(ele > max) {
     max = ele;
   }
 }
 return max;
}

这和以前一样,如果我们使用reduce,我们可以在一行代码中完成。

let arr = [3.24, 2.78, 999];
arr.reduce((x, y) => Math.max(x, y));
arr.reduce((x, y) => Math.min(x, y));

ES6でreduce()を使用する方法

3、计算数组中元素出现的频率

我们经常需要统计数组中每个元素出现的次数。reduce 方法可以帮助我们实现这一点。

function countFrequency(arr) {
 return arr.reduce(function(result, ele){
   // Judge whether this element has been counted before
   if (result.get(ele) != undefined) {
     /**
       * If this element has been counted before,
       * increase the frequency of its occurrence by 1
       */
     result.set(ele, result.get(ele) + 1)
   } else {
     /**
       * If this element has not been counted before,
       * set the frequency of its occurrence to 1
       */
     result.set(ele, 1);
   }
   return result;
 }, new Map());
}

注意,我们使用map对象而不是对象来存储统计后的频率,因为数组中的元素可能是对象类型,而对象的key只能是字符串或符号类型。

这里有两个例子:

ES6でreduce()を使用する方法

1ES6でreduce()を使用する方法

同样,如果要统计字符串中每个字符出现的频率,可以先将字符串转换为字符数组,然后按照上面的方法。

let str = &#39;helloworld&#39;;
str.split(&#39;&#39;).reduce((result, currentChar) => {
   result[currentChar] ? result[currentChar] ++ : result[currentChar] = 1;
    return result;                            
}, {})

1ES6でreduce()を使用する方法

因为字符类型可以用作对象的键,所以我们这里不使用 Map。

4、多个数组的展平

function Flat(arr = []) {
   return arr.reduce((t, v) => t.concat(Array.isArray(v) ? Flat(v) : v), [])
}

1ES6でreduce()を使用する方法

通过reduce依次访问数组中的每个元素。如果我们发现元素还是一个数组,就递归调用 flat 方法。

【相关推荐:javascript视频教程web前端

以上がES6でreduce()を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLとReact:マークアップとコンポーネントの関係HTMLとReact:マークアップとコンポーネントの関係Apr 12, 2025 am 12:03 AM

HTMLとReactの関係は、フロントエンド開発の中核であり、最新のWebアプリケーションのユーザーインターフェイスを共同で構築します。 1)HTMLはコンテンツ構造とセマンティクスを定義し、Reactはコンポーネントを介して動的インターフェイスを構築します。 2)ReactコンポーネントはJSX構文を使用してHTMLを埋め込み、インテリジェントなレンダリングを実現します。 3)コンポーネントライフサイクルは、状態および属性に従ってHTMLレンダリングと動的に更新を管理します。 4)コンポーネントを使用して、HTML構造を最適化し、保守性を向上させます。 5)パフォーマンスの最適化には、不必要なレンダリングの回避、重要な属性の使用、およびコンポーネントの単一の責任を維持することが含まれます。

ReactとFrontend:インタラクティブエクスペリエンスの構築ReactとFrontend:インタラクティブエクスペリエンスの構築Apr 11, 2025 am 12:02 AM

Reactは、インタラクティブなフロントエンドエクスペリエンスを構築するための好ましいツールです。 1)Reactは、コンポーネント化と仮想DOMを通じてUIの開発を簡素化します。 2)コンポーネントは、関数コンポーネントとクラスコンポーネントに分割されます。関数コンポーネントはよりシンプルで、クラスコンポーネントはより多くのライフサイクル方法を提供します。 3)Reactの作業原則は、パフォーマンスを改善するために仮想DOMおよび調整アルゴリズムに依存しています。 4)国家管理は、usestateまたはthis.stateを使用し、ComponentDidmountなどのライフサイクルメソッドが特定のロジックに使用されます。 5)基本的な使用には、コンポーネントの作成と状態の管理が含まれ、高度な使用にはカスタムフックとパフォーマンスの最適化が含まれます。 6)一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。

反応とフロントエンドスタック:ツールとテクノロジー反応とフロントエンドスタック:ツールとテクノロジーApr 10, 2025 am 09:34 AM

Reactは、コアコンポーネントと状態管理を備えたユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1)コンポーネントと州の管理を通じてUIの開発を簡素化します。 2)作業原則には和解とレンダリングが含まれ、React.memoとusememoを通じて最適化を実装できます。 3)基本的な使用法は、コンポーネントを作成およびレンダリングすることであり、高度な使用法にはフックとコンテキストアピの使用が含まれます。 4)不適切なステータスの更新などの一般的なエラーでは、ReactDevtoolsを使用してデバッグできます。 5)パフォーマンスの最適化には、React.MEMO、仮想化リスト、コードスプリッティの使用が含まれ、コードを読みやすく保守可能に保つことがベストプラクティスです。

HTMLにおけるReactの役割:ユーザーエクスペリエンスの向上HTMLにおけるReactの役割:ユーザーエクスペリエンスの向上Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1)JSXはHTMLを埋め込み、開発をより直感的にします。 2)仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3)保守性を向上させるコンポーネントベースの管理UI。 4)国家管理とイベント処理は、インタラクティブ性を高めます。

反応コンポーネント:HTMLで再利用可能な要素を作成します反応コンポーネント:HTMLで再利用可能な要素を作成しますApr 08, 2025 pm 05:53 PM

Reactコンポーネントは、機能またはクラスによって定義され、UIロジックのカプセル化、およびプロップを介して入力データを受け入れることができます。 1)コンポーネントの定義:関数またはクラスを使用して、反応要素を返します。 2)レンダリングコンポーネント:Reactコールレンダリングメソッドまたは機能コンポーネントを実行します。 3)マルチプレックスコンポーネント:データをプロップに渡して、複雑なUIを構築します。コンポーネントのライフサイクルアプローチにより、ロジックをさまざまな段階で実行でき、開発効率とコードメンテナビリティが向上します。

厳密なモードの目的を反応します厳密なモードの目的を反応しますApr 02, 2025 pm 05:51 PM

React Strictモードは、追加のチェックと警告をアクティブにすることにより、Reactアプリケーションの潜在的な問題を強調する開発ツールです。これは、レガシーコード、安全でないライフサイクル、および副作用を特定するのに役立ち、現代の反応の実践を促進します。

断片の使用法を使用します断片の使用法を使用しますApr 02, 2025 pm 05:50 PM

反応フラグメントにより、余分なDOMノードなしで子供をグループ化すること、構造、パフォーマンス、アクセシビリティが向上します。それらは、効率的なリストレンダリングの鍵をサポートしています。

反応調整プロセス反応調整プロセスApr 02, 2025 pm 05:49 PM

この記事では、Reactの和解プロセスについて説明し、DOMを効率的に更新する方法について詳しく説明しています。重要な手順には、調整のトリガー、仮想DOMの作成、拡散アルゴリズムの使用、最小限のDOM更新の適用が含まれます。また、Perfoをカバーしています

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。