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

const people = [
  {
    name: '小明',
    money: 500,
  },
  {
    name: '漂亮阿姨',
    money: 3000,
  },
  {
    name: '杰倫',
    money: 60000,
  },
];

那麼,以下進入正題:

forEach 與 map

forEach()

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

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

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

map()

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

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() 過濾資料。

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 的物件

const filterPeople = people.filter(function(item, index) {
  if (item.money < 5000) {
    return true;
  }
});
console.log(filterPeople);

find()

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

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

const findPeople = people.find(function(item, index) {
  if (item.money < 5000) {
    return true;
  }
});
console.log(findPeople);

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

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

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

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

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 元

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

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

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

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

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

reduce

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

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

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

範例:+500

const newNumber = people.reduce(function(prev, item, index) {
  console.log(prev); // 0
  return prev + 500;
}, 0);

// 0 500 1000

情境一:使用 reduce 來做加總

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

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) 這個方法,
它會將前後的值做比較,最終取一個比較大的值。

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

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

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