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()

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

item、index、array 分別是：陣列裡的值、陣列的索引、陣列本身。
（最後一個參數 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 的結果則是只有 true 或 false。

而 filter() 會將 return 為 true 的值傳到前方的陣列。

範例：挑出金額少於 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()：所有結果都為 true，return 才會是 true
  • some()：部分結果為 true，return 就是 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

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

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