JavaScript ES6 - 陣列處理方法整理

ES6 的章節差不多也要告一段落了,最後來整理一下幾個常用的陣列方法吧!
本文介紹的陣列方法有 forEach、map、filter、find、every、some、reduce 等。

在開始之前,先定義一下這次會用到的資料集。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const people = [
{
name: '小明',
money: 500,
},
{
name: '漂亮阿姨',
money: 3000,
},
{
name: '杰倫',
money: 60000,
},
];

那麼,以下進入正題:

forEach 與 map

forEach()

將陣列內的每個元素都傳入並執行給定的函式一次。

itemindexarray 分別是:陣列裡的值、陣列的索引、陣列本身。
(最後一個參數 array 通常不太會用到)

1
2
3
4
people.forEach(function (item, index, array) {
// 可以直接新增欄位
item.icash = item.money + 500;
});

map()

雖然 map()forEach() 很像,但是他們兩者有一個最大的不同之處,就是 map()return 一個值。

1
2
3
4
5
6
const newPeople = people.map(function (item, index, array) {
return {
...item,
icash: item.money + 500,
};
});

上方範例是把物件的內容 return 回去,並且加上一個 icash 的值。

因為 return 需要一個變數去接收,所以我們新宣告一個變數叫做 newPeople

所以 forEach()map() 的差異就在於:
forEach() 不會做 return,但是 map() 會做 return 並成為一個新的陣列,而新舊陣列之間並無關係。

練習:過濾資料

加上條件式,透過 map() 過濾資料。

1
2
3
4
5
6
7
8
9
const newPeople = people.map(function (item, index, array) {
if (item.money > 2000) {
return {
...item,
icash: item.money + 500,
};
}
});
console.log(newPeople);

結果發現有些資料因為不符合條件,所以沒有 return。然而 map() 的資料如果沒有 return,該筆資料會呈現 undefined

因此,map() 其實不太適合用來做過濾。

map 觀念整理

  • map() 就是將 return 的結果一個一個塞回去變數裡面 (newpeople)。
  • 這個變數 (newpeople) 基本上是用陣列方式呈現。
  • map() 會做 return,然後成為一個新的陣列,此新陣列與舊陣列毫無關係。

filter 與 find

filter()

如果要過濾資料,還是推薦用 filter() 方法。

filter() 方法的參數一樣是帶值的本身 item 與索引 index,而 return 的結果則是只有 truefalse

filter() 會將 returntrue 的值傳到前方的陣列。

範例:挑出金額少於 5000 的物件

1
2
3
4
5
6
const filterPeople = people.filter(function (item, index) {
if (item.money < 5000) {
return true;
}
});
console.log(filterPeople);

find()

只會回傳符合條件的第一筆資料

我們沿用剛才的範例,把 filter() 改成 find()

1
2
3
4
5
6
const findPeople = people.find(function (item, index) {
if (item.money < 5000) {
return true;
}
});
console.log(findPeople);

結果不太一樣,剛才使用 filter() 過濾出兩筆資料,但現在使用 find() 卻只有一筆。

這是 find()filter() 不同的地方,也就是 find() 只會回傳一次!

所以 find() 比較適合用來搜尋特定的值。

例如:找到金額等於 500 的物件

1
2
3
4
5
6
const findPeople = people.find(function (item, index) {
if (item.money == 500) {
return true;
}
});
console.log(findPeople);

every 與 some

  • every():所有結果都為 truereturn 才會是 true
  • some():部分結果為 truereturn 就是 true

範例一:所有物件是否都超過 10000 元

1
2
3
const ans = people.every(function (item, index) {
return item.money > 10000;
});

如果有物件的 money 沒有超過 10000 元,結果就會是 false

範例二:是否有物件超過 10000 元

1
2
3
4
const ans = people.some(function (item, index) {
return item.money > 10000;
});
console.log(ans);

只要有一個物件的 money 超過 10000 元,結果就會是 true

reduce

reduce() 滿適合用來做一些 “數字” 的操作。
寫法與參數都與剛才的幾個方法不太一樣。

首先,第一個參數是 prev,就是指「前一個參數」。
如果沒有前一個參數,就會以逗號後面的數值作為前一個參數。

第二個就是當前的參數 item,第三個參數就是索引 index

範例:+500

1
2
3
4
5
6
const newNumber = people.reduce(function (prev, item, index) {
console.log(prev); // 0
return prev + 500;
}, 0);

// 0 500 1000

情境一:使用 reduce 來做加總

依序是 +500, +3000, +60000:

1
2
3
4
5
6
7
8
9
10
const newNumber = people.reduce(function (prev, item, index) {
console.log(prev);
return prev + item.money;
}, 0);
console.log(newNumber);

// 0
// 500
// 3500
// 63500

情境二:比大小

比大小的話會使用到 Math.max(a, b) 這個方法,
它會將前後的值做比較,最終取一個比較大的值。

1
2
3
4
5
6
7
8
9
10
const newNumber = people.reduce(function (prev, item, index) {
console.log(prev);
return Math.max(prev, item.money);
}, 0);
console.log('最大的:', newNumber);

// 0
// 500
// 3000
// 最大的: 60000

那麼,以上幾個就是在處理陣列時,比較常應用的方法!

以上資源是我自己整理過後的筆記,若有錯誤歡迎隨時和我聯繫。