特性與用途

• 不會影響到原始陣列的資料
• 可以篩選符合條件的內容，並且回傳至新的陣列

直接進入寫法及範例

範例一：找出陣列中 >= 10 的資料

const dataList = [5, 7, 10, 99];

const newDataList = dataList.filter(function(item){
  return item >= 10;
});
console.log(newDataList);

執行結果

範例二：找出長度為 3 碼的資料

const dataList = ['food', 'good', 'english', 'cat'];

const newDataList = dataList.filter(function(item){
  return item.length === 3;
});
console.log(newDataList);

執行結果

範例三：找出 price 超過 200 的項目

const dataList = [
    {
      goodsName: '帆布提袋',
      price: 499
    },
    {
      goodsName: '文青斜背包',
      price: 399
    },
    {
      goodsName: '簡約風飲料提袋',
      price: 39
    },
]

const newDataList = dataList.filter(function(item){
  return item.price > 200;
});
console.log(newDataList);

執行結果

最後來練習箭頭函式

• 第一種方式：先把 function 拔掉跟他說再見，再補上 =>

const dataList = [5, 7, 10, 99];

const newDataList = dataList.filter((item) => {
  return item >= 10;
});
console.log(newDataList);

• 第二種方式

const dataList = [5, 7, 10, 99];

const newDataList = dataList.filter(item => item >= 10);
console.log(newDataList);

參考資料及學習資源

• 六角學院 - JavaScript 必修篇 - 前端修練全攻略
• Array.prototype.filter()

本日小結

雙十連假還是要努力學習！
這是我的學習紀錄，我們下次見 ~