---
# System prepended metadata

title: 'JavaScript陣列操作(map, filter and reduce)'
tags: [Front-end, Javascript]

---

# JavaScript陣列操作(map, filter and reduce)
1. map: 陣列中每一元素經過方程式運算後，回傳一個新的陣列
2. filter: 陣列中每一元素經過方程式運算結果為true才回傳
3. reduce: reduce裡方程式有兩個參數，第一個為前一次運算的結果，第二個為目前迭代到的元素，持續迭代陣列中的每一元素
```
let product = [
    {
        name: 'Apple',
        price: 13
    },
    {
        name: 'Banana',
        price: 8
    }
]
let lowerThanTen = product.filter(item => item.price < 10)
console.log(lowerThanTen)
//0: {name: "Banana", price: 16}

let doublePrice = product.map(function(item){
    item.price = item.price * 2
    return item
})
console.log(doublePrice)
//0: {name: "Apple", price: 26}
//1: {name: "Banana", price: 16}

let priceList = product.map(function(item){
    return item.price
})
//[26, 16]
let totalPrice = priceList.reduce(function(total, currentPrice){
    return total + currentPrice
})
console.log(totalPrice)
//42

```
###### tags: `Front-end` `Javascript`