---
# System prepended metadata

title: '[JS] map/filter/reduce'
tags: [docs]

---

# [JS] map/filter/reduce

comment: 你再給我用 GPT 試試看

response:👉🏻👈🏻

# JavaScript 中的 `map`、`filter` 和 `reduce`

在 JavaScript 中，`map`、`filter` 和 `reduce` 是三個非常強大的陣列方法。它們可以幫助我們以簡潔且高效的方式處理和轉換陣列。本文將介紹這三個方法的基本用法和範例。
![image](https://hackmd.io/_uploads/BkzkRKPkyx.png)
map會回傳一個陣列
filter可以用來搜尋
reduce就是累加，混在一起

## `map` 

`map` 會建立一個新的陣列，其結果是對原陣列中的每個元素呼叫一次提供的函數後返回的結果。
(取得運算後的陣列)

### 語法

```javascript
const newArray = array.map(callback(element[, index[, array]])[, thisArg])
```

### 範例1

```javascript
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]
```

### 範例2

```javascript=
let arr = [1, 2, 3]
let newArr = arr.map(function(val, idx, array){
  return val * 2 //  建立一個新的陣列，並將 1, 2, 3 分別乘 2 後依序傳入到陣列當中
})

console.log(arr) // [1, 2, 3]
console.log(newArr) // [2, 4, 6]
```

## `filter` 

`filter` 會建立一個新的陣列，其包含了所有通過提供的函數實現的測試的原陣列元素。
（篩檢內容）

### 語法

```javascript=
const newArray = array.filter(callback(element[, index[, array]])[, thisArg])
```

### 範例1

```javascript
const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]
```

### 範例2

```javascript=
let arr = [1, 2, 3]
let newArr = arr.filter(function(val, index, array){
  return val > 1
})

console.log(arr) // [1, 2, 3]
console.log(newArr) // [2, 3]
```

## `reduce` 

`reduce` 對陣列中的每個元素執行提供的函數（從左到右），將其結果匯總為單一的返回值。
（依序取出與整理）

### 語法

```javascript
const result = array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
```

### 範例1

```javascript
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 10
```

### 範例2

```javascript=
let arr = [1, 5, 9]
let sumArrAddTwo = arr.reduce(function(total, val){
  return total + val + 10
}, 0) // 這裡的 0 代表累加器初始值為 0，

/* 分解開來就像是
第一次：0 + 1 + 10 = 11
第二次：11 + 5 + 10 = 26
第三次：26 + 9 + 10 = 45
*/ 

console.log(sumArrAddTwo) // 45
```