āđāļāļ·āđāļāļ āđ āļŦāļĢāļ·āļāđāļāļĢāļŦāļĨāļēāļĒāđ āļāļāļāļāļāđāļēāļāļ°āļāļļāđāļāļŦāļāđāļēāļāļļāđāļāļāļē Array Method āļāļąāļāļĄāļēāļāđāļēāļ āļāļķāđāļāđāļāđāļāļŠāđāļ§āļāļŦāļāļķāđāļāļāļāļ Javascript āļāļĩāđāļāļ·āđāļāļ§āđāļē Reduce āđāļāđāļŠāļģāļŦāļĢāļąāļāđāļāļĢāļāļĩāđāļĒāļąāļāđāļĄāđāļĢāļđāđāļ§āđāļēāļĄāļąāļāļāļ·āļāļāļ°āđāļĢāļāđāļŠāļēāļĄāļēāļĢāļāļāđāļēāļāđāļ āļāļāļāļ§āļēāļĄāļāļĩāđ āđāļāđāđāļĨāļĒāļāļĢāļąāļ
āļāļķāļāđāļĄāđāļāļ°āđāļāđāļ method āļāļĩāđāļāļ§āļāļāļāđāļĨāđāļāļāđāļāļĒ āđāļāđāļŠāļģāļŦāļĢāļąāļāđāļāļĢāļŦāļĨāļēāļĒāļāļāđāļāļāļēāļĢāđāļāđāļāļēāļāļāļāļāđāļĢāļ Reduce āļāđāđāļāđāļ method āļāļĩāđāļŠāļēāļĄāļēāļĢāļāļāļģāđāļāļāļĢāļ°āļĒāļļāļāļāđāđāļāđāđāļāđāļŦāļĨāļēāļāļŦāļĨāļēāļĒāļĄāļēāļāļāļąāļ§āļŦāļāļķāđāļ āļāļāļāđāļŦāļāļ·āļāļāļēāļāļāļēāļĢāļŦāļēāļāļĨāļĢāļ§āļĄāđāļĨāđāļ§āđāļāļāļāļāļ§āļēāļĄāļāļĩāđāđāļĢāļēāļāļ°āļĄāļēāđāļāđ Reduce āļāļąāļāđāļāļīāđāļĄāđāļāļīāļĄāļāļąāļ āļāļĢāļīāļāļāļēāļĢāđāļāđāļāļēāļ .reduce āđāļ javascript āļāļ°āļĄāļĩāļāļ°āđāļĢāļāļąāļāļāđāļēāļ āđāļāļāļđāļāļąāļ
āđāļāļĩāļĒāļāđāļāļĒ
Thanawat Udchachon
Internship @ borntoDev
āđāļĢāļēāļĄāļēāļāļđāļāļēāļĢāļāļģāļāļēāļāļāļāļ Reduce āļāļąāļāļāđāļāļ
Reduce āđāļāđāļ Array Method āļāļĩāđāļāļ°āļĄāļĩāļāļēāļĢ return āļāđāļēāļāļāļāļĄāļēāđāļāđāļāļāđāļēāđāļāļĩāļĒāļ§ āļāđāļēāļāļāļēāļ Map āđāļĨāļ° Filter āļāļĩāđāļāļ° return āļāļāļāļĄāļēāđāļāđāļ Array āđāļŦāļĄāđāļāļĩāļāļāļąāļ§
Reduce āļāļ°āļĄāļĩ 4 arguments āļāļąāļāļāļĩāđ
āļāđāļēāļāđāļāļāļŦāļāđāļē
āļāđāļēāļāļąāļāļāļļāļāļąāļ
āļāļģāđāļŦāļāđāļāļāļąāļāļāļļāļāļąāļ (index)
Array āļāļĩāđāđāļĢāļēāđāļĢāļĩāļĒāļāđāļāđ
āļāļ°āđāļŦāđāļāđāļāđāļ§āđāļēāļāļ°āļĄāļĩ argument āļāļĩāđāđāļāļīāđāļĄāļĄāļēāļāļēāļ Map āđāļĨāļ° Filter āļāļ·āļ āļāđāļēāļāđāļāļāļŦāļāđāļē
āļāļķāđāļāļĄāļąāļāļāļģāļāļēāļāđāļāļĒāļāļēāļĢāđāļāđāļēāđāļāļāļĩāđ element āđāļāđāļĨāļ°āļāļąāļ§āđāļĨāļ°āļāļģāļāļĢāļ°āļāļ§āļāļāļēāļĢāļāļēāļāļāļĒāđāļēāļ āđāļĨāđāļ§āļāļģāļāđāļēāļāļĩāđ return āļāļāļāļĄāļēāđāļāđāļāđāļ§āđāđāļāļ·āđāļāđāļāļēāđāļāđāļāđāļāļēāļāđāļāļāļēāļĢāļāļģāļāļēāļāđāļ element āļāļąāļāđāļ āđāļĨāļ°āļāļģāđāļāđāļĢāļ·āđāļāļĒ āđ āļāļāļāļ§āđāļēāļāļ°āļāļĢāļāļāļļāļ element āļāļāļīāļāļēāļĒāđāļāļĒ āđ āļāļēāļāļāļ°āđāļĄāđāđāļāđāļēāđāļāđāļĢāļēāļĄāļēāļāļđāļāļąāļ§āļāļĒāđāļēāļāļāļąāļāđāļĨāļĒāļāļĩāļāļ§āđāļē
let price = [42, 32, 20] let sum = price.reduce(function (prev, curr) { return prev + curr; }, 0); console.log(sum); //94
āđāļāļ·āđāļāļ§āđāļēāļāļĩāđāļāļāđāļŦāđāļāđāļāđāļāļāļĩāđāļŦāļĨāļēāļĒāļāļāđāļāļĒāđāļŦāđāļ āļ§āđāļēāđāļāđāļĄāļąāļāļāļģāļāļēāļāļĒāļąāļāđāļ
āļāļąāđāļāđāļĢāļ sum āļāļāļāđāļĢāļēāļāļ°āļĄāļĩāļāđāļēāđāļĢāļīāđāļĄāļāđāļāđāļāđāļ 0 āļāļķāđāļāđāļāđāļāļāđāļēāļāļĩāđāđāļĢāļēāđāļāđāđāļŠāđāđāļāļēāđāļ§āđ
āđāļĄāļ·āđāļāļĄāļēāļāļķāļ element āđāļĢāļāđāļ array āđāļĢāļēāļāđāļāļāļāļ§āđāļē āđāļŦāđāļāđāļēāļāđāļāļāļŦāļāđāļēāļāļķāđāļāđāļāļāļĩāđāļāļĩāđāļāļ·āļ 0 āļāļĩāđāļĄāļēāļāļēāļāļāđāļēāđāļĢāļīāđāļĄāļāđāļ āļāļ§āļāļāļąāļāļāđāļē element āļāļąāļāļāļļāļāļąāļāļāļķāđāļāļāļ·āļ 42 āđāļĨāđāļ§āđāļĢāļēāļāđ return āļāļĨāļĢāļ§āļĄāļāļąāđāļāļāļāļāļĄāļē āļāļķāđāļāđāļāđāļāļāļēāļĢāđāļāđāļāļāđāļē prev āļāļąāđāļāđāļāļ āļāļģāđāļŦāđāļāļāļāļāļĩāđ prev āļĄāļĩāļāđāļē 42
āļāđāļāļĄāļēāđāļĄāļ·āđāļāļĄāļēāļāļķāļ element āļāļąāļ§āļāļąāļāļĄāļēāđāļ array āļāđāļāļ°āļāļģāđāļāļāđāļāļīāļĄāļāļ·āļ return āļāļĨāļĢāļ§āļĄāļāļāļ prev āļāļķāđāļāļāļāļāļāļĩāđāļāļ·āļ 42 āļāļ§āļāļāļąāļ element āļāļąāļāļāļļāļāļąāļāļāļķāđāļāļāļ·āļ 32 āđāļĢāļēāļāđāļāļ°āđāļāđāļāđāļēāđāļŦāļĄāđāļāļāļ prev āđāļāđāļ 74
āđāļĨāļ°āđāļĄāļ·āđāļāļĄāļēāļāļķāļ element āļāļąāļ§āļŠāļļāļāļāđāļēāļĒāđāļ array āļāđāļāļ°āļāļģāđāļāļāđāļāļīāļĄāđāļāđāļāļāļąāļāļāļ·āļ return 74 āļāļ§āļ 20 āđāļĨāļ°āđāļĄāļ·āđāļāđāļĢāļē console.log(sum) āļāļāļāļĄāļēāđāļĢāļēāļāđāļāļ°āđāļāđ 94 āļāļāļāļĄāļēāļāļąāđāļāđāļāļāļāļĢāļąāļ
āļŦāļĢāļ·āļāđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļāļĩāļĒāļāļāļēāļĢāļāļģāļāļēāļāđāļāļĩāļĒāļ§āļāļąāļāļāļĩāđāđāļŦāđāļŠāļąāđāļāļāļ§āđāļēāđāļāļīāļĄāđāļāļĒāđāļāđ Arrow function āļāđāļŠāļēāļĄāļēāļĢāļāđāļāļĩāļĒāļāđāļāđāļāļąāļāļāļĩāđāļāļĢāļąāļ
let price = [42, 32, 20] let sum = price.reduce((prev, curr) => prev + curr, 0); console.log(sum); //94
āļŦāļĨāļēāļĒāļāļāļāļēāļāļāļ°āļŠāļāļŠāļąāļĒāļ§āđāļēāļāđāļēāđāļĢāļēāđāļĄāđāđāļāđāļāļģāļŦāļāļāļāđāļēāđāļĢāļīāđāļĄāļāđāļāļāļ°āđāļāđāļāļĒāļąāļāđāļ āļāđāļēāđāļĢāļēāđāļĄāđāđāļāđāļāļģāļŦāļāļāļāđāļēāđāļĢāļīāđāļĄāļāđāļ āļāđāļēāļāđāļāļāļŦāļāđāļēāļāļ°āđāļāđāļ element āđāļĢāļāđāļ array āļāļĢāļąāļ āļāļķāđāļāđāļāļāļĩāđāļāļĩāđāļāđāļāļ·āļ 42 āļāļķāđāļāļāđāļēāļāļēāļĄāļ§āđāļēāļĄāļąāļāļāļ°āđāļāđāļāļĨāļĨāļąāļāļāđāļāļĩāđāļāđāļēāļāļāļąāļāđāļŦāļĄ āļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļ§āļāđāļĨāļāđāļāļāļāļĩāđāļāļ°āđāļāđāļāļĨāļĨāļąāļāļāđāļāļĩāđāđāļĄāđāļāđāļēāļāļāļąāļāļāļĢāļąāļ āđāļāđāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļģāļāļēāļāđāļāļāļāļ·āđāļ āđ āļāđāļŠāļēāļĄāļēāļĢāļāļāļģāđāļŦāđāļāļĨāļĨāļąāļāļāđāļāđāļēāļāļāļāļāđāļāđāļāđāđāļĨāļ°āļāļēāļāļāļ°āļāļģāđāļŦāđāļāļĨāļāļĩāđāļāļāļāļĄāļēāļāļĨāļēāļāđāļāļĨāļ·āđāļāļāđāļāļāļēāļāļāļĩāđāđāļĢāļēāļāđāļāļāļāļēāļĢāđāļāđāļāļĢāļąāļ āļāļąāļāļāļąāđāļāļāđāļāļ§āļĢāļĢāļ°āļ§āļąāļāđāļāļēāđāļ§āđāļāđāļ§āļĒāļāļ°āļāļĢāļąāļ
āļāļāļāļāļēāļ Reduce āļāļāļāļīāļāļĩāđāļāļ°āđāļāđāļāļāļēāļĢāđāļĨāđ array āļāļēāļāļāđāļēāļĒāđāļāļāļ§āļēāđāļĨāđāļ§ āļĒāļąāļāļĄāļĩāļāļĩāļ method āļāļĩāđāļāļ·āđāļāļ§āđāļē reduceRight āļāļĩāđāļāļ°āļāļģāļāļēāļāđāļāļāđāļāļĩāļĒāļ§āļāļąāļāļāļąāļ Reduce āļāļāļāļīāđāļĨāļĒ āđāļāļĩāļĒāļāđāļāđāļāļ°āđāļĨāđ array āļāļēāļāļāļ§āļēāđāļāļāđāļēāļĒāļāļĢāļąāļāđāļĨāļ°āļāļąāđāļāļāđāļāļ·āļāļāļēāļĢāļāļģāļāļēāļāļāļāļ Reduce āļāļĢāļąāļ
āļāļ°āđāļŦāđāļāđāļāđāļ§āđāļē Reduce āđāļĄāđāđāļāđāļāļģāđāļāđāđāļāļĩāļĒāļāļāļēāļĢāļĢāļ§āļĄāļāđāļēāđāļāđāļāļĒāđāļēāļāđāļ āļĄāļąāļāļŠāļēāļĄāļēāļĢāļāļāļĩāđāļāļ° return āļāđāļēāđāļāļāđāđāļāđāļāļĩāđāļāđāļēāļāļĄāļēāļāļēāļāļāļēāļĢāļāļģāļāļēāļāļāļąāļ array āļāļĩāđāđāļĢāļēāđāļĢāļĩāļĒāļāđāļāđ āļāļķāđāļāļāļĒāļđāđāļāļąāļāđāļĢāļēāļ§āđāļēāđāļĢāļēāļāđāļāļāļāļēāļĢāļāļ°āđāļĢ āļāļķāđāļāļĄāļąāļāļāđāļāļ·āļāļāļēāļĢāļĨāļāļāļēāļ array āļĄāļēāđāļāđāļāļāđāļēāđāļāļĩāļĒāļ§āļāļēāļĄāļāļ·āđāļāļāļąāđāļāđāļāļāļāļĢāļąāļ
āļ§āđāļēāđāļĨāđāļ§āđāļĢāļēāļāđāļĨāļāļāđāļāļāļđāļāļēāļĢāđāļāđāļāļēāļ Reduce āđāļāļāļāļ·āđāļ āđ āļāđāļēāļāļāļąāļāđāļĨāļĒāļāļĩāļāļ§āđāļē
āļŦāļēāļāđāļē min max
āđāļĢāļēāļĄāļēāđāļĢāļīāđāļĄāļāļąāļāļāļąāļāļāļ°āđāļĢāļāđāļēāļĒ āđ āļāļąāļāļāđāļāļāļāļąāļāļāļēāļĢāļŦāļē element āļāļĩāđāļĄāļĩāļāđāļēāļĄāļēāļāļāļĩāđāļŠāļļāļāđāļĨāļ°āļāđāļāļĒāļāļĩāđāļŠāļļāļ
let price = [42, 32, 20] let max = price.reduce(function (prev, curr) { return curr > prev ? curr : prev; }); console.log(max); //42
āļāļēāļāđāļāđāļāļāļ°āđāļāđāļāļŦāļēāļĢāļŦāļēāļāđāļēāļāļĩāđāļĄāļēāļāļāļĩāđāļŠāļļāļ āļāļēāļĢāļāļģāļāļēāļāļāļĩāđāļāđāļāļ°āļāļĨāđāļēāļĒāļāļąāļāļāļēāļĢāļāļģāļāļēāļāđāļāļŦāļąāļ§āļāđāļāļāđāļāļāļŦāļāđāļēāļāļĩāđ āđāļāļĩāļĒāļāđāļāđāđāļāļĨāļĩāđāļĒāļāļāļēāļāļāļēāļĢ return āļāļĨāļĢāļ§āļĄ āđāļāđāļāļāļēāļĢāļāļĢāļ§āļāļŠāļāļāļ§āđāļē element āđāļāļāļąāļāļāļļāļāļąāļāļĄāļĩāļāđāļēāļĄāļēāļāļāļ§āđāļēāļāļąāļ§āļāđāļāļāļŦāļāđāļēāļŦāļĢāļ·āļāđāļĄāđ āļāđāļēāļĄāļēāļāļāļ§āđāļēāļāđāđāļŦāđ return element āļāļąāļāļāļļāļāļąāļ āđāļāđāļāđāļēāđāļĄāđāļāđāđāļŦāđ return āļāđāļēāļāđāļāļāļŦāļāđāļē āđāļĨāđāļ§āļāļģāđāļāļāļāļĩāđāđāļāđāļĢāļ·āđāļāļĒ āđ āļāļāļāļĢāļ element āļāļļāļāļāļąāļ§āļāļĢāļąāļ
āđāļĨāļ°āļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļŦāļēāļāđāļēāļāļĩāđāļāđāļāļĒāļāļĩāđāļŠāļļāļāļāđāļāļ°āđāļŦāļĄāļ·āļāļāļāļąāļāļāļēāļĢāļŦāļēāļāđāļēāļāļĩāđāļĄāļēāļāļāļĩāđāļŠāļļāļāđāļĨāļĒāļāļĢāļąāļ āđāļāđāđāļāļĨāļĩāđāļĒāļāļāļēāļāļŠāļąāļāļĨāļąāļāļĐāļāđāļāļēāļāļĄāļēāļāļāļ§āđāļē (>) āđāļāđāļāļāđāļāļĒāļāļ§āđāļē (<) āđāļĢāļēāļāđāļāļ°āđāļāđāđāļāđāļāļāļāļāļĄāļēāļāļąāļāļāļĩāđāļāļĢāļąāļ
let price = [42, 32, 20] let min = price.reduce(function (prev, curr) { return curr < prev ? curr : prev; }); console.log(min); //20
āļāļ°āđāļŦāđāļāđāļāđāļāļēāļāđāļāđāļāļāļąāđāļāļŠāļāļāļ§āđāļē āđāļĄāđāđāļāđāļĄāļĩāļāļēāļĢāļāļģāļŦāļāļāļāđāļēāđāļĢāļīāđāļĄāļāđāļ āđāļāđāļāđāļāļĢāļēāļ°āļ§āđāļēāđāļĢāļēāļāđāļāļāļāļēāļĢāđāļāļĢāļĩāļĒāļāđāļāļĩāļĒāļāļāđāļēāđāļ array āļāļĩāđāļĄāļĩāļāļĒāļđāđāđāļĨāđāļ§āļāļĢāļąāļ āļāļķāļāđāļĄāđāļāļģāđāļāđāļāļāļĩāđāļāđāļāļāļāļģāļŦāļāļāļāđāļēāđāļĢāļīāđāļĄāļāđāļ
āļŠāļēāļĄāļēāļĢāļāđāļāđāđāļāļ Map āđāļĨāļ° Filter āđāļāđāļāļ°
āđāļĢāļ·āđāļāļāļŦāļāļķāđāļāļāļĩāđāļāđāļēāļŠāļāđāļāļāļāļ Reduce āļāļ·āļāļĄāļąāļāļŠāļēāļĄāļēāļĢāļāđāļāđāđāļāļ Map āđāļĨāļ° Filter āđāļāđ! āđāļāļĒāļāļēāļĢāļāļģāļŦāļāļāļāđāļēāđāļĢāļīāđāļĄāļāđāļāđāļāđāļ Array āđāļāļĨāđāļē āđāļāđāļāļĒāļąāļāđāļ āđāļāļāļđāļāļąāļ
let map = price.reduce(function (prev, curr) { return [...prev, curr]; }, []); console.log(map); //[ 42, 32, 20 ]
āļāļēāļāđāļāđāļāļāđāļāļ·āļ āđāļĄāļ·āđāļāļāđāļēāļāđāļāđāļēāđāļāđāļ element āđāļāđāļĨāļ°āļāļąāļ§āļāđāđāļŦāđāļāļģāļāļēāļĢ return āļāđāļāļĄāļđāļĨāļāļĩāđāļāļĒāļđāđāđāļ array āđāļāļīāļĄāļāļąāđāļāļŦāļĄāļ (āļŠāļģāļŦāļĢāļąāļ element āđāļĢāļ āļāļąāđāļāļāļāļāļāļĩāđ prev āļāļ°āļĒāļąāļāđāļĄāđāļĄāļĩ āđāļāļĢāļēāļ°āļĒāļąāļāđāļāđāļ array āđāļāļĨāđāļēāļāļĒāļđāđ) āđāļĨāđāļ§āļāđāļāļāđāļ§āļĒ element āđāļāļāļąāļāļāļļāļāļąāļ āđāļĨāđāļ§āļāđāļāļģāļāļĒāđāļēāļāļāļĩāđāđāļāđāļĢāļ·āđāļāļĒ āđ āļāļāļāļĢāļāļāļļāļ element āđāļāļĒāđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļŦāđāđāļāļīāļāļāļĢāļ°āļāļ§āļāļāļēāļĢāļāļēāļāļāļĒāđāļēāļāđāļŦāđāļāļąāļāđāļāđāļĨāļ° element āđāļāđāđāļāđāļāđāļāļĩāļĒāļ§āļāļąāļ Map āđāļĨāļĒ
āđāļāđāļŠāļģāļŦāļĢāļąāļāđāļāļŠāđāļ§āļāļāļāļ Performance āļāļąāđāļ Map āļŠāļēāļĄāļēāļĢāļāļāļģāļāļēāļāđāļāđāđāļĢāđāļ§āļāļ§āđāļēāđāļĨāđāļāļāđāļāļĒāļāļĢāļąāļ
āđāļĨāļ°āļŠāļģāļŦāļĢāļąāļ Filter āļāđāļāļĨāđāļēāļĒāļāļąāļ Map āđāļĨāļĒ āđāļāļĩāļĒāļāđāļāđāđāļāļīāđāļĄ if āđāļāđāļēāđāļ
let filter = price.reduce(function (prev, curr) { if (curr > 20) { return [...prev, curr]; //āđāļāđ prev.push(curr) āđāļāļāđāļāđāđāļāļĢāļēāļ°āđāļĄāđāđāļāđ return āļŠāļļāļāļāđāļēāļĒ } return [...prev]; }, []); console.log(filter); //[ 42, 32 ]
āļāļģāļāļēāļāļāđāļāļ·āļ āđāļĄāļ·āđāļāļāđāļēāļāđāļāđāļēāđāļāđāļ element āđāļāđāļĨāļ°āļāļąāļ§āļāđāļāļ°āļāļģāļāļēāļĢāļāļĢāļ§āļāļŠāļāļāļ§āđāļē element āļāļąāļāļāļĨāđāļēāļ§āđāļāđāļēāđāļāļ·āđāļāļāđāļāļāļĩāđāļāļąāđāļāđāļ§āđāļŦāļĢāļ·āļāđāļĄāđ āļāđāļēāđāļāđāļēāļāđāļāļ° return āļāđāļāļĄāļđāļĨāļāļĩāđāļāļĒāļđāđāđāļ array āđāļāļīāļĄāļāļąāđāļāļŦāļĄāļ (āļŠāļģāļŦāļĢāļąāļ element āđāļĢāļ āļāļąāđāļāļāļāļāļāļĩāđ prev āļāļ°āļĒāļąāļāđāļĄāđāļĄāļĩ āđāļāļĢāļēāļ°āļĒāļąāļāđāļāđāļ array āđāļāļĨāđāļēāļāļĒāļđāđ) āđāļĨāđāļ§āļāđāļāļāđāļ§āļĒ element āđāļāļāļąāļāļāļļāļāļąāļ āđāļāđāļāđāļēāđāļĄāđāļāđāļāļ° return āđāļāļĩāļĒāļāđāļāđ āļāđāļāļĄāļđāļĨāļāļĩāđāļāļĒāļđāđāđāļ array āđāļāļīāļĄāļāļąāđāļāļŦāļĄāļ āļāļķāđāļāļāđāļāļ·āļāđāļĄāđāđāļāđāļĄāļĩāļāļēāļĢāđāļāļīāđāļĄāļāļ°āđāļĢāđāļāđāļēāđāļāļāļąāđāļāđāļāļ
āđāļĨāļ°āļŠāļģāļŦāļĢāļąāļāđāļāļŠāđāļ§āļāļāļāļ Performance āļāļąāđāļ Filter āļāđāļŠāļēāļĄāļēāļĢāļāļāļģāļāļēāļāđāļāđāđāļĢāđāļ§āļāļ§āđāļēāđāļĨāđāļāļāđāļāļĒāļāļĢāļąāļ
āđāļāđāļĒāļąāļāđāļĄāđāļāļāđāļāļĩāļĒāļāđāļāđāļēāļāļĩāđ!
āđāļāļĢāļēāļ°āđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļŦāđ reduce āļāļģāļāļēāļāđāļŦāļĄāļ·āļāļāļāļąāļāļāļēāļĢāļāļģ Filter āđāļĨāļ° Map āļĄāļē chain āļāđāļāļāļąāļāđāļāđāļāđāļ§āļĒāđāļāđāļāļāļąāļ!
āđāļāļāļĩāđāļāļĩāđāļāļ°āđāļĢāļīāđāļĄāļāļēāļāļāđāļāļĄāļđāļĨāļāļāļāđāļĢāļēāļāļąāļāļāđāļāļāļāļĩāđāļāļ°āđāļāđāļāļāđāļāļĄāļđāļĨāļāļ·āđāļāļŠāļīāļāļāđāļēāđāļĨāļ°āļĢāļēāļāļēāļāļąāļāļāļĩāđ
let receipt = [ { name: "sausage", price: 42 }, { name: "coffee", price: 32 }, { name: "orange", price: 20 } ]
āđāļĨāđāļ§āđāļĢāļēāļāđāļāļāļāļēāļĢāļĢāļđāđāļāļ·āđāļāļĢāļēāļĒāļāļēāļĢāļāļēāļŦāļēāļĢāļāļĩāđāļĄāļĩāļĢāļēāļāļēāļĄāļēāļāļāļ§āđāļē 20 āļāđāļēāđāļāļĩāļĒāļāđāļāļĒāđāļāđ Map āļāļĩāđ chain āļāļąāļ Filter āļāđāļāļ°āđāļāđāļāļąāļāļāļĩāđ
let realFilterMap = receipts.filter(function (receipt) { return receipt.price > 20; }).map(function (receipt) { return receipt.name; }); console.log(realFilterMap); //[ 'sausage', 'coffee' ]
āđāļāļĒāđāļĢāļēāļŠāļēāļĄāļēāļĢāļāđāļāļĩāļĒāļāļāļēāļĢāļāļģāļāļēāļāđāļāļĩāļĒāļ§āļāļąāļāļāļĩāđāļāđāļ§āļĒ Reduce āđāļāđāļāļąāļāļāļĩāđ
let filterMap = receipts.reduce(function (prev, curr) { if (curr.price > 20) { prev.push(curr.name) } return prev }, []); console.log(filterMap); //[ 'sausage', 'coffee' ]
āļĄāļēāļāļķāļāđāļĢāļ·āđāļāļāļāļĩāđāļāļļāļāļāļāļĢāļāļāļāļĒ! (āļĢāļķāļāđāļēāļ§) Performance āļāļąāđāļāđāļāļ!! āļāļĨāļāđāļāļ·āļ āļāļąāđāļāļŠāļāļāļ§āļīāļāļĩāđāļāđāđāļ§āļĨāļēāđāļāļāļēāļĢāļāļģāļāļēāļāļāļĩāđāđāļāļĨāđāđāļāļĩāļĒāļāļāļąāļāļĄāļēāļāļāļĢāļąāļ
āļĄāļĩāļāđāļēāđāļĢāļīāđāļĄāļāđāļāđāļāđāļĄāļēāļāļāļ§āđāļē 1 āļāļąāļ§ !?
Reduce āļŠāļēāļĄāļēāļĢāļāļĄāļĩāļāđāļēāđāļĢāļīāđāļĄāļāđāļāđāļāđāļĄāļēāļāļāļ§āđāļē 1 āļāļąāļ§ āđāļāļĒāļāļēāļĢāļāļģāļŦāļāļāđāļāđāļ Object āļāļķāđāļāļāļĢāļ°āđāļĒāļāļāđāļāļāļāļĄāļąāļāļāļĩāđāđāļŦāđāļāđāļāđāļāļąāļāļāļĩāđāļŠāļļāļāļāļąāļ§āļŦāļāļķāđāļāļāđāļāļ·āļāđāļāđāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāđāļāđāļāļāļĨāļļāđāļĄ āđāļāļĒāđāļāļāļąāļ§āļāļĒāđāļēāļāļāļĩāđāđāļĢāļēāļāđāļāļ°āđāļāđāļāđāļāļĄāļđāļĨāļāļ·āđāļāļŠāļīāļāļāđāļēāđāļĨāļ°āļĢāļēāļāļēāđāļāļīāļĄāļāļąāļāļāļĩāđ
let receipt = [ { name: "sausage", price: 42 }, { name: "coffee", price: 32 }, { name: "orange", price: 20 } ]
āđāļāļĒāđāļĢāļēāļāđāļāļāļāļēāļĢāđāļāđāļāļāļĨāļļāđāļĄāļĢāļēāļĒāļāļēāļĢāļāļēāļŦāļēāļĢāļĢāļēāļāļēāļāļđāļāđāļĨāļ°āļĢāļēāļāļēāđāļāļ āđāļāļĒāļāļēāļŦāļēāļĢāļāļĩāđāļĄāļĩāļĢāļēāļāļēāļĄāļēāļāļāļ§āđāļē 20 āļāļ°āļāļĒāļđāđāđāļāļāļĨāļļāđāļĄāļāļēāļŦāļēāļĢāđāļāļ
let multipleInit = receipts.reduce(function (prev, curr) {
if (curr.price > 20) {
prev.expensive.push(curr);
} else {
prev.cheap.push(curr);
}
return prev;
}, {
expensive: [], //Array āļŠāļģāļŦāļĢāļąāļāđāļāđāļāļĢāļēāļĒāļāļēāļĢāļāļēāļŦāļēāļĢāļāļĩāđāļĄāļĩāļĢāļēāļāļēāļŠāļđāļāļāļ§āđāļē 20
cheap: [], //Array āļŠāļģāļŦāļĢāļąāļāđāļāđāļāļĢāļēāļĒāļāļēāļĢāļāļēāļŦāļēāļĢāļāļĩāđāļĄāļĩāļĢāļēāļāļēāļāđāļģāļāļ§āđāļē 20 āļŦāļĢāļ·āļāļāđāļģāļāļ§āđāļē
});
console.log(multipleInit)
// {
// expensive: [ { name: 'sausage', price: 42 }, { name: 'coffee', price: 32 } ],
// cheap: [ { name: 'orange', price: 20 } ]
// }
āļāļēāļĢāļāļģāļāļēāļāļāđāļāļ·āļ āđāļĄāļ·āđāļāļāđāļēāļāđāļāđāļēāđāļāđāļ element āđāļāđāļĨāļ°āļāļąāļ§āļāđāļāļ°āļāļģāļāļēāļĢāļāļĢāļ§āļāļŠāļāļāļ§āđāļē element āļāļąāļāļāļĨāđāļēāļ§āļāļąāđāļāļĄāļĩāļĢāļēāļāļēāļĄāļēāļāļāļ§āđāļē 20 āļŦāļĢāļ·āļāđāļĄāđ āļāđāļēāđāļāđāđāļŦāđ push element āļāļąāđāļāđāļāđāļēāđāļāđāļ array expensive āļāđāļēāđāļĄāđāļāđāđāļŦāđ push element āļāļąāđāļāđāļāđāļēāđāļāđāļ array cheap āđāļāļ āđāļĨāđāļ§āļŠāļļāļāļāđāļēāļĒāļāđ return āļāđāļē prev āļāļĩāđāļĄāļĩāļāļēāļĢāđāļāļīāđāļĄāļāđāļāļĄāļđāļĨāđāļāļīāđāļĄāđāļāļīāļĄāđāļāđāļēāđāļāđāļĨāđāļ§ āđāļĨāđāļ§āļāđāļāļģāļāļĒāđāļēāļāļāļĩāđāļāļāļāļĢāļāļāļļāļ element āđāļĢāļēāļāđāļāļ°āđāļāđāļāļēāļĢāđāļāđāļāļāļĨāļļāđāļĄāļāļāļāļĄāļēāļāļąāđāļāđāļāļ
āļĄāļĩāļāļ·āđāļāļāđāļāļāļĄāļĩāļĢāļēāļāļē
āđāļāļāļēāļāđāļāļĢāđāļāļĢāļĄāļāļāļāđāļĢāļēāļāļĩāđāļāđāļāļāļĄāļĩāļāļēāļĢāļāļĢāļāļāļāđāļāļĄāļđāļĨāļŠāļāļāļāļĒāđāļēāļāļāļķāđāļāđāļāļāļĩāđāđāļāļĩāđāļĒāļ§āļāđāļāļāļāļąāļ āļāļēāļāļāļĢāļąāđāļāđāļĢāļēāļāđāļāđāļāļāļĄāļĩāļāļēāļĢāļāļĢāļ§āļāļŠāļāļāļ§āđāļēāļāļđāđāđāļāđāļāļēāļāđāļāđāđāļŠāđāļāđāļāļĄāļđāļĨāļāļĢāļāļŦāļĢāļ·āļāđāļĄāđ āļŦāļĢāļ·āļāļāđāļēāđāļĄāđāļāļĢāļāļ āļāđāđāļĄāđāļāļ§āļĢāļāļĢāļāļāļāļąāđāļāļŠāļāļāļāđāļāļ āļāļāļīāļāļēāļĒāļāļēāļāļāļ°āļāļ āļāļąāđāļāđāļĢāļēāđāļāļāļđāļāļąāļ§āļāļĒāđāļēāļāļāļąāļāđāļĨāļĒāļāļĩāļāļ§āđāļē āđāļĨāļ°āđāļāđāļāđāļāļīāļĄ āđāļĢāļēāļāđāļāļ°āđāļāđāļāđāļāļĄāļđāļĨāļĢāļēāļĒāļāļēāļĢāļāļēāļŦāļēāļĢāđāļŦāļĄāļ·āļāļāđāļāļīāļĄāđāļāđāļāļąāļāđāļāļĨāļāđāļĨāđāļāļāđāļāļĒ
let receipt = [ { name: "sausage", price: 42 }, { name: "coffee", price: 32 }, { name: "", price: "" } ]
āđāļāļĒāđāļĢāļēāļāđāļāļāļāļēāļĢāļāļĢāļ§āļāļŠāļāļāļ§āđāļēāđāļāđāļāđāļĨāļ° Object āļĄāļĩāļāđāļāļĄāļđāļĨāļāļĢāļāļāļąāđāļ 2 āļāđāļāļāļŦāļĢāļ·āļāđāļĄāđ āļŦāļĢāļ·āļāļāđāļēāđāļĄāđāļĄāļĩāļāđāđāļĄāđāļāļ§āļĢāļĄāļĩāļāļąāđāļ 2 āļāđāļāļ
let fullfill = receipts.reduce((prev, curr) => ((curr.name !== '' && curr.price !== '') || (curr.name === '' && curr.price === '') ? prev : prev + 1), 0) console.log(fullfill)
āļāļēāļĢāļāļģāļāļēāļāļāđāļāļ·āļ āđāļĄāļ·āđāļāļāđāļēāļāđāļāđāļēāđāļāđāļ element āđāļāđāļĨāļ°āļāļąāļ§āļāđāļāļ°āļāļģāļāļēāļĢāļāļĢāļ§āļāļŠāļāļāļ§āđāļē element āļāļąāļāļāļĨāđāļēāļ§āļāļąāđāļāļĄāļĩāļāđāļāļĄāļđāļĨāļāļąāđāļāļŠāļāļāļāđāļāļ āļŦāļĢāļ·āļ āđāļĄāđāļĄāļĩāļāļąāđāļāļŠāļāļāļāđāļāļāļŦāļĢāļ·āļāđāļĄāđ āļāđāļēāđāļāđāļāļ° return āļāļāļāļĄāļēāđāļāđāļ 0 āđāļĨāļ°āļāđāļēāđāļĄāđ āļŦāļĢāļ·āļāļāđāļāļ·āļāļĄāļĩāļāđāļāļĄāļđāļĨāđāļāđ name āļŦāļĢāļ·āļ price āļāļēāļĄāļāđāļāļĄāļđāļĨāļāļąāļ§āļāļĒāđāļēāļāļāļąāļāļāļēāļāļāļĩāđ āļāđāļāļ° return āļāļāļāļĄāļēāđāļāđāļ 1 āļŦāļĢāļ·āļāļĄāļēāļāļāļ§āđāļē āđāļĨāđāļ§āđāļĢāļēāļāđāļŠāļēāļĄāļēāļĢāļāđāļāļēāļāļąāļ§āđāļĨāļāđāļŦāļĨāđāļēāļāļĩāđāđāļāđāļāđāļāđāļāđāļāļāļąāđāļāļāļāļāļāļ·āđāļ āđ āđāļāđāļāđāļāļāļāļāđāļĢāļēāđāļāđāļāļĢāļąāļ
let receipt = [ { name: "sausage", price: 42 }, { name: "coffee", price: "" }, { name: "", price: "" } ]
āļŠāļĢāļļāļāļŠāļļāļāļāđāļēāļĒāļŠāļīāđāļāļāļĩāđāļāļđāđāļāđāļēāļāļāļ°āđāļāđāļĢāļąāļ
āđāļāđāļāļĒāļąāļāđāļāļāļąāļāļāđāļēāļāļāļĢāļąāļāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāđāļāđāļāļēāļ Reduce āļāļĩāđāļāļāļāđāļŦāļāļ·āļāļāļēāļāļāļēāļĢāļŦāļēāļāļĨāļĢāļ§āļĄ āđāļĢāļĩāļĒāļāļ§āđāļēāđāļāđāļ Array Method āļāļąāļ§āļŦāļāļķāđāļāļāļĩāđāļāļēāļāļāļ°āļāļāđāļāđāđāļāđāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāđāļāđāļāļēāļāđāļāļāļāļāđāļĢāļ āđāļāđāđāļāļāļāļ°āđāļāļĩāļĒāļ§āļāļąāļāļāđāđāļāđāļ method āļāļĩāđāļŠāļēāļĄāļēāļĢāļāļāļĢāļ°āļĒāļļāļāļāđāđāļāđāđāļāđāļŦāļĨāļēāļāļŦāļĨāļēāļĒāđāļāđāļāļāļąāļ āđāļāļāļāļāļ§āļēāļĄāļāļĩāđāđāļāđāļāđāļāļĩāļĒāļāļāļąāļ§āļāļĒāđāļēāļāļāļĩāđāļĒāļāļĄāļēāļāļģāđāļŠāļāļāđāļāļĩāļĒāļāļāļēāļāļŠāđāļ§āļāđāļāđāļēāļāļąāđāļ āđāļĨāļ°āđāļāđāļāļāļāļ§āđāļēāđāļĢāļēāļĒāļąāļāļŠāļēāļĄāļēāļĢāļāļāļĢāļ°āļĒāļļāļāļāđāđāļāđāļĄāļąāļāđāļāđāļāļĩāļāļĄāļēāļāļĄāļēāļĒāđāļĨāļĒ āđāļĄāđāđāļāđāļ§āđāļēāđāļāļĢāđāļāļĢāļĄāļāļĩāđāđāļāļ·āđāļāļ āđ āļāļģāļĨāļąāļāđāļāđāļāļāļĒāļđāđāļāđāļāļēāļāļāļ°āļŠāļēāļĄāļēāļĢāļāļāļģ Reduce āđāļāđāļēāļĄāļēāļāđāļ§āļĒāđāļāđāļāđāđāļāđāļāļ°
āļāđāļēāļāļāļīāļāļāļēāļ
- How to Use Map, Filter, and Reduce in JavaScript, āļŠāļ·āļāļāđāļāđāļĄāļ·āđāļ 22 āđāļĄāļĐāļēāļĒāļ 2565 āļāļēāļ: https://code.tutsplus.com/tutorials/how-to-use-map-filter-reduce-in-javascript–cms-26209
- JavaScript reduce behavior with/without an initial value, āļŠāļ·āļāļāđāļāđāļĄāļ·āđāļ 2 āļāļĪāļĐāļ āļēāļāļĄ 2565 āļāļēāļ: https://stackoverflow.com/questions/50826718/javascript-reduce-behavior-with-without-an-initial-value
- Array.prototype.reduce(), āļŠāļ·āļāļāđāļāđāļĄāļ·āđāļ 2 āļāļĪāļĐāļ āļēāļāļĄ 2565 āļāļēāļ: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
- 13 āļāđāļē Reduce Array āļŠāļĒāļāļ, āļŠāļ·āļāļāđāļāđāļĄāļ·āđāļ 2 āļāļĪāļĐāļ āļēāļāļĄ 2565 āļāļēāļ: https://medium.com/dev-it/13-āļāđāļē-reduce-array-āļŠāļĒāļāļ-a619e65b1984
- .map(), .filter() āđāļĨāļ° .reduce() āļŠāļēāļĄāļāļŦāļēāļĢāđāļŠāļ·āļāđāļāļāļēāļĢāļāļąāļāļāļēāļĢāļāļąāļ Array[âĶ], āļŠāļ·āļāļāđāļāđāļĄāļ·āđāļ 2 āļāļĪāļĐāļ āļēāļāļĄ 2565 āļāļēāļ: https://medium.com/@rennerwin/map-filter-reduce-āļŠāļēāļĄāļāļŦāļēāļĢāđāļŠāļ·āļāđāļāļāļēāļĢāļāļąāļāļāļēāļĢāļāļąāļ-array-49b2cd966e79
- JavaScript, Tricks with Reduce, āļŠāļ·āļāļāđāļāđāļĄāļ·āđāļ 2 āļāļĪāļĐāļ āļēāļāļĄ 2565 āļāļēāļ: https://stephengalvan.medium.com/javascript-tricks-with-reduce-9c3a6f5d6168
- [JavaScript] Array .reduce() āđāļāđāļāļēāļāļĒāļąāļāđāļ?, āļŠāļ·āļāļāđāļāđāļĄāļ·āđāļ 2 āļāļĪāļĐāļ āļēāļāļĄ 2565 āļāļēāļ: https://www.kotenarok.com/2020/12/javascript-array-reduce.html
āļŦāļēāļāļāļļāļāļŠāļāđāļāļāļąāļāļāļē āļŠāļāļēāļĢāđāļāļāļąāļ āđāļāļāļāļĨāļīāđāļāļāļąāļ
āđāļĨāļ° āđāļāļāđāļāđāļĨāļĒāļĩāļāļāļāļāļąāļ§āđāļāļ ?
āļāļĒāđāļēāļĢāļāļāđāļē ! āđāļĢāļĩāļĒāļāļĢāļđāđāļāļąāļāļĐāļ°āļāđāļēāļāļāļīāļāļīāļāļąāļĨāđāļāļ·āđāļāļāļąāļāđāļāļĢāļāļāļ§āļēāļĄāļŠāļēāļĄāļēāļĢāļāļāļāļāļāļļāļ
āđāļĢāļīāđāļĄāļāļąāđāļāđāļāđāļāļ·āđāļāļāļēāļ āļāļĢāđāļāļĄāļāļāļīāļāļąāļāļīāļāļĢāļīāļāđāļāļĢāļđāļāđāļāļāļŦāļĨāļąāļāļŠāļđāļāļĢāļāļāļāđāļĨāļāđāļ§āļąāļāļāļĩāđ