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が発生する

推薦する

MySQL テーブルデータのインポートとエクスポートの例

この記事では、MySQL テーブル データのインポートおよびエクスポート操作について説明します。ご参...

Linux の一般的な基本コマンドと使用方法

この記事では、一般的な基本的な Linux コマンドとその使用方法を例を使って説明します。ご参考まで...

Nodejs がイントラネット侵入サービスを実装

目次1. LAN内のプロキシ2. イントラネットの浸透イントラネット侵入とは何ですか?橋プロキシサー...

CSS3を使用してフォントカラーグラデーションを実装する

Animation.css を使うと公式サイトのフォントがだんだんと変わっていくのが分かりました。c...

Intelli Idea で Tomcat 設定が見つからない問題の解決方法

2日前に新しい会社に入社しました。その会社ではIntelli Ideaを使っています。Eclipse...

VueはElementUIのフォームサンプルコードを模倣する

実装要件ElementUI を模倣したフォームは、インデックス コンポーネント、Form フォーム ...

DockerにJava環境をインストールするための実装手順

この記事は Linux centos8 をベースにして、docker をインストールし、イメージをプ...

hrefを使用すると、リンクをクリックするだけでページ上の特定の場所にジャンプできます。

ページ内の a タグをクリックした後、ページ内の対応する場所にジャンプするようにします。方法は非常に...

JavaScript メッセージ ボックスの例

JavaScript では、警告ボックス、確認ボックス、プロンプト ボックスの 3 種類のメッセージ...

Dockerのネットワークモードと設定方法

1. Dockerネットワークモードdocker run が Docker コンテナを作成するときに...

Docker 経由で wsl の tar ファイルを作成する方法

最近VScodeのリモート開発機能をいじっています。Dockerのコンテナに接続できるほか、WSLに...

初心者向け入門チュートリアル: ドメイン名の解決とバインディング

では、ドメイン名を登録して仮想ホストを購入した後、IE でドメイン名を入力して Web サイトを開く...

体験したい17 404ページ

404 を避けるべきだとどうして言えるのでしょうか? その理由は、ほとんどの 404 ページが粗雑す...

MySQL 5.7.22 バイナリパッケージのインストールとインストール不要版 Windows 設定方法

次のコードは、MySQL 5.7.22 バイナリ パッケージのインストール方法を紹介しています。具体...

HTML 形式の JSON 出力の例 (テスト インターフェース)

JSON データを美しいインデント形式で表示するには、最も単純な JSON.stringify 関...