BLOG

「reduce」を使って配列を値を処理する

| JavaScript

reduceは配列に対して関数を利用して、値を処理します。
理解するのがややこしいですが、覚えておくと便利です。

[1,2,3,4].reduce((previousValue, currentValue, index, array) => {
  return previousValue + currentValue
}, 0)
previousValue currentValue index array 返り値
1回目 0 1 1 [1,2,3,4] 1
2回目 1 2 2 [1,2,3,4] 3
3回目 3 3 3 [1,2,3,4] 6
4回目 6 4 4 [1,2,3,4] 10

わかりにくいので、表を作ってみました。
配列の値を順々に処理して行く感じですかね。

配列の中身の合計を出すのに使えるみたいです。

total = [1,2,3,4].reduce((previousValue, currentValue) => previousValue + currentValue, 0)

簡単ですね。
「reduce」以降はほぼ固定ですね。最後の0が初期値的なもんですね。
表で言うところの1回目のpreviousValueの値になりますかね。

こんな感じで、for文で回すより簡単ぽいですよね。

RECENT POSTS

【CSS】text-decorationのカスタマイズができるの知ってた?

CSSでフッターの下に隙間ができないように調整する

「reduce」を使って配列を値を処理する

data属性の取得・設定・更新【JavaScript】

変数のタイプを調べる、変換する 【Javascript】

VS CodeでLive Serverを使ってプレビューのリロードをしてみよう

メディアクエリでhoverが使えるデバイスかどうか

markdown-wasmというすごく高速なMarkdownパーサー

SNSシェアボタンをオリジナルで設置する

CSSでマスクする

CATEGORY

POPULAR POSTS

PAGE TOP