JavaScriptの配列を理解するもう一つの方法.減らす

あなたがGuantletを走らせたならばarray methods JavaScriptでは、このロードブロックを何度かヒットしたでしょう.
どうやって使うのreduce 機能再び?
私は実際に私の大学のハック4インパクトの章では、このトピックでは、JSブートキャンプを率いましたmaterial 100% free-to-use here! ). に関する質問reduce 何度もやってきたし、最後にクリックする説明を見つけたんだと思う😁 それはあなたのために働く希望!

🎥 ビデオチュートリアル

あなたがビデオチュートリアルで学ぶことを好むならば、これはあなたのためです.あなたはfork this CodePen ソース材料に沿って🏃‍♂️

📝 段階的なシート

道を歩きましょうreduce 我々が知っているものを使用することによって:良いOLE ' forループ.
以下に例を示します.我々がCDの上で我々の大好きなアルバムを持っていると言ってください?💿), そして、我々のステレオは、我々に数分で各々のトラックの長さを教えます.今、我々はアルバム全体がどれくらい長くなるかを理解したい.
ここでは、私たちがやりたいことについて簡単に説明します.

// make a variable to keep track of the length, starting at 0
let albumLength = 0
// walk through the songs on the album...
album.songs.forEach(song => {
  // and add the length of each song to our running total
  albumLength += song.minutesLong
})

いいえ悪い!ちょうど曲をループし、曲を歩いている間、アルバムのランタイムを蓄積します.あなたがステレオでトラックをスキップするように、これは基本的にあなたが実生活で使用するプロセスです.
という単語はここではかなり重要です.本質的に、我々はトラックの長さのこのリストを取って、それらを1つの蓄積された数に減らしますalbumLength . アキュムレータに還元するこのプロセスは、あなたの頭の電球をオフに設定する必要があります:💡 私たちはarray.reduce !

foreachから減少すること

もっと早く機能を検証してみましょう.これは簡単な4ステッププロセスです.

チェンジforEach to reduce :

let albumLength = 0
album.songs.reduce((song) => {
  albumLength = albumLength + song.minutesLong
})

移動albumLength ループ関数の最初のパラメータと、reduce

// accumulator up here 👇
album.songs.reduce((albumLength, song) => {
  albumLength = albumLength + song.minutesLong
}, 0) // 👈 initial value here

チェンジalbumLength = を返します.これは私たちの“蓄積された”アルバムの長さにまだ私たちの曲の長さを追加しているので、これは概念的にはあまり異なりません

album.songs.reduce((albumLength, song) => {
  // 👇 Use "return" instead of our = assignment
  return albumLength + song.minutesLong
}, 0)

結果を取得するreduce ループ(別名我々の総アルバム長).これは返り値だけです.

const totalAlbumLength = album.songs.reduce((albumLength, song) => {
  return albumLength + song.minutesLong
}, 0)

そして、それ!🎉

だから待って、なぜ私も減少する必要がありますか？

結局その仕事.reduce 少し書くのが難しい方法のように感じるかもしれないfor ループ.ある意味でそれは一種の😆
しかし、それは1つの重要な利点を提供しますreduce 我々の合計を返します、機能連鎖はずっと簡単です.これはあなたがすぐに理解できる恩恵ではないかもしれませんが、このより複雑なシナリオを考えてください.

// Say we have this array of arrays,
// and we want to "flatten" everything to one big array of songs
const songsByAlbum = [
  ['Rap Snitches Knishes', 'Beef Rap', 'Gumbo'],
  ['Accordion', 'Meat Grinder', 'Figaro'],
  ['Fazers', 'Anti-Matter', 'Krazy World']
]
let songs = []
songsByAlbum.forEach(albumSongs => {
  // "spread" the contents of each array into our big array using "..."
  songs = [...songs, ...albumSongs]
})

これはあまり理解しにくい.しかし、私たちがそのリストの上でもう少し空想的な配列機能をしたいならばsongs ?

// Ex. Make these MF DOOM songs titles all caps
let songs = []
songsByAlbum.forEach(albumSongs => {
  songs = [...songs, ...albumSongs]
})
const uppercaseSongs = songs.map(song => song.toUppercase())

あなたが男性名を綴るとき、すべてのキャップ.部分を残すMF DOOM
これはすばらしいです、しかし、我々が一緒にこれらの2つの変更を「鎖」することができるならば、どうですか?

// grab our *final* result all the way at the start
const uppercaseSongs = [
  ['Rap Snitches Knishes', 'Beef Rap', 'Gumbo'],
  ['Accordion', 'Meat Grinder', 'Figaro'],
  ['Fazers', 'Anti-Matter', 'Krazy World']
]
// rewriting our loop to a "reduce," same way as before
.reduce((songs, albumSongs) => {
  return [...songs, ...albumSongs]
}, [])
// then, map our songs right away!
.map(song => song.toUppercase())

うーん!投げることreduce , 我々はスタンドアロン変数をsongsByAlbum and songs entirely 🤯
しかし、この例を塩の粒でください.このアプローチは、これらの配列関数にまだ新しいときにコードの読みやすさを損なうことがあります.だから、これを保つreduce あなたの後ろのポケットで機能し、それが本当にあなたのコードの質を向上させることができるときにそれを引き出します.

少し何かを学ぶ？

恐ろしい.あなたがそれを逃した場合はmy "web wizardry" newsletter このような知識ナゲットを探索する!
このことは"first principles" Web開発言い換えれば、すべてのJankyブラウザAPI、曲げられたCSS規則、およびすべてのWebプロジェクトをティックにするセミアクセス可能なHTMLは何ですか?あなたがフレームワークを越えて行くことを探しているならば、これはあなたのためです🔮
Subscribe away right here . 私はいつも教えて、決してスパム❤️