8 JSのreduce使用例とreduce操作方法

8 JSのreduce使用例とreduce操作方法

reduceメソッドは配列の反復メソッドです。 mapfilterとは異なり、 reduceメソッドは変数をキャッシュできます。反復中に、この変数を操作して返すことができます。

これは平易な言葉で説明したものです。それでも理解しにくいかもしれません。以下の例を見てみましょう。

1. 配列の蓄積

配列の蓄積は、商品の合計価格の計算など、プロジェクトでよく発生します。reduce reduce使用すると、外部変数を定義せずに 1 行のコードで実行できます。reduce は副作用のない関数です。

// [1, 2, 3, 4, 5, 6, 7, 8] を累積します。reduce((a, i) => a + i);
// 出力: 36

// デフォルトの初期値 [1, 2, 3, 4, 5, 6, 7, 8] を使用して累積します。reduce((a, i) => a + i, 5);
// 出力: 41

// [1, 2, 3, 4, 5, 6, 7, 8] を累積します。reduce((a, i) => a * i);
// 出力: 40320

2. 配列の最大値を見つける

配列の各反復処理で、 Math.maxを使用して最大値を取得し、それを返します。最終的には、配列内のすべての項目の最大値を取得します。

[1, 2, 3, 4, 5, 6, 7, 8].reduce((a, i) => Math.max(a, i));

もちろん、配列内の各項目が数値の場合は、 Math.maxと組み合わせて ... スプレッド演算子を使用できます。

Math.max(...[1, 2, 3, 4, 5, 6, 7, 8]);

3. 不規則な配列の扱い

mapreduceを一緒に使用すると、各サブ配列の連結された結果が返されます。

データ = [
  ["赤","128g","iPhone"],
  ["南北","2LDK1リビング","128㎡","洋館"],
  ["Xiaomi","ホワイト","スマートスポーツウォッチ","心拍数、血圧、血中酸素","通話メッセージリマインダー"], 
  ["公式リリース","2020年秋","バスケットボール","スニーカー","ブランドダイレクトメール"]
]
dataConcat = data.map(item=>item.reduce((a,i)=>`${a} ${i}`)) とします。

// 出力:
[「レッド 128g Apple 携帯電話」
「南北2LDK1リビング128㎡の洋風住宅」
「Xiaomi ホワイト スマート スポーツ ウォッチ 心拍数、血圧、血中酸素、通話情報リマインダー」
「2020年秋バスケットボールシューズブランドダイレクトメールの公式販売」

4. データの重複を削除する

現在の反復項目が存在するかどうかを確認し、存在しない場合は配列に追加します。

配列を [1, 2, 3, 'a', 'b', 'c', 1, 2, 3, 'a', 'b', 'c'] とします。
配列.reduce((noDupes, curVal) => {
  noDupes.indexOf(curVal) === -1 の場合、noDupes.push(curVal) が返されます。
  noDupesを返す
}, [])

// 出力: [1, 2, 3, 'a', 'b', 'c']

5. 括弧が正しいことを確認する

これは dev.to で見た非常に賢い使い方です。結果が 0 の場合、括弧の数は正当であることを意味します。

[..."(())()(()())"].reduce((a,i)=> i === '(' ? a+1 : a-1 , 0);
// 出力: 0

// ループメソッドを使用する let status=0
(let i of [..."(())()(()())"]) {
  if(i === "(")
    ステータス = ステータス + 1
  そうでない場合(i === ")")
    ステータス = ステータス - 1
  (ステータス<0)の場合{
    壊す;
  }
}

6. 属性によるグループ化

指定されたキーでデータをグループ化します。ここでは、グループ化に国フィールドを使用します。各反復中に、現在の国が存在するかどうかを確認します。存在しない場合は、配列を作成し、データを配列に挿入します。そして配列を返します。

obj = [とする
  {名前: '张三', 職種: 'データアナリスト', 国: '中国'},
  {名前: 'エース'、職業: '科学者'、国: '中国'},
  {名前: 'Leir'、職業: '科学者'、国: 'アメリカ合衆国'},
  {名前: 'ボブ'、職業: 'ソフトウェア エンジニア'、国: 'インド'},
]

obj.reduce((グループ, curP) => {
  newkey = curP['country']とします。
  if(!group[新しいキー]){
    グループ[新しいキー]=[]
  }
  グループ[新しいキー].push(curP)
  リターングループ
}, [])
// 出力:
[ 中国: [{…}、 {…}]
  インド: [{…}]
  アメリカ: [{…}] ]

7. 配列の平坦化

ここで示されている配列は 1 レベルの深さのみです。配列が複数レベルの場合は、再帰を使用して処理できます。

[[3, 4, 5], [2, 5, 3], [4, 5, 6]].reduce((singleArr, nextArray) => singleArr.concat(nextArray), [])
// 出力: [3, 4, 5, 2, 5, 3, 4, 5, 6]

もちろん、代わりにES6の.flatメソッドを使用することもできます。

[ [3, 4, 5], 
 [2, 5, 3], 
 [4, 5, 6]
]。フラット();

8. 文字列を反転する

これはまた、達成するための非常に素晴らしい方法です

[..."こんにちは世界"].reduce((a,v) => v+a)

または

[..."こんにちは世界"].reverse().join('')

以下もご興味があるかもしれません:
  • JavaScript における Reduce() の 5 つの基本的な使用例
  • JavaScript 配列のreduce() メソッド
  • JS での Reduce() メソッドの使用の概要
  • jsはreduceメソッドを使用してコードをよりエレガントにします
  • JavaScript Reduceの詳しい説明
  • JavaScriptのreduceの基本的な使い方を詳しく説明します

<<:  Alibaba Cloud Server に MySQL データベースをインストールする詳細なチュートリアル

>>:  NavicatがMySQL8.0.11に接続するとエラー2059が発生する

推薦する

js配列forEachインスタンスの詳細な使用方法

1. forEach() は map() に似ています。これも渡された関数に各要素を順番に適用します...

Linux で特定のユーザーまたはユーザー グループに対して SSH を有効または無効にする方法

会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...

LayUI+Shiroは動的なメニューを実装し、メニュー拡張の例を記憶します

目次1. Maven 依存関係2. メニュー関連クラス1. メインメニュー2. サブメニュー3. S...

Linux リモート管理と sshd サービス検証の知識ポイントの詳細な説明

1. SSHリモート管理SSH の定義SSH (Secure Shell) は、主にキャラクタ イン...

NetEase ブログで使用されているシンプルな Web ページ コード

NetEase Blog でコードを使用する方法: まずブログにログインし、ブログのホームページの左...

MySQLの自己接続と結合の詳細な理解

1. MySQL 自己接続MySQL では、情報を照会するときに自分自身に接続 (自己接続) する必...

古い Vue プロジェクトに Vite サポートを追加する方法

1. はじめに会社のプロジェクトを引き継いで2年になります。今では毎回プロジェクトを起動するのに1分...

Webデザインチュートリアル(3):デザインの手順と考え方

<br />前のチュートリアル:Webデザインチュートリアル(2):模倣と盗作について。...

Vue Element フロントエンドアプリケーション開発の動的メニューとルーティングの関連付け処理

目次概要1. メニューとルーティング処理2. メニューとルートリスト3. ログインプロセスの処理概要...

Elementのメッセージポップアップウィンドウが繰り返しポップアップする問題の解決

目次1. 使用2. メッセージポップアップウィンドウが繰り返し表示される問題を解決する1. 使用Vu...

シェルを使用して複数のサーバーでバッチ操作を実行する方法

目次SSHプロトコルパスワード接続プロセスsshツールssh公開鍵ログインバッチ操作複数サーバーファ...

ウェブデザイン実践者必読のキャリアプラン

原文記事、転載の際は著者と出典を明記してください! Web デザインは間違いなくテクノロジーであり、...

MySQL学習記録: KEYパーティションが引き起こした血なまぐさい事件

需要背景ビジネス テーブル tb_image のデータの一部は次のとおりです。id は一意ですが、i...

js+ca​​nvas でコードレイン効果を実現

この記事では、js+ca​​nvasコードの雨効果の具体的なコードを参考までに共有します。具体的な内...

Pure CSS と Flutter はそれぞれブリージング ライト効果を実現します (サンプル コード)

前回、非常に熱心なファンから、月を呼吸する光の効果にできるかどうか尋ねられました。月の大きさの写真が...