iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
自我挑戰組

初心者解任務啦!JS 的 30 道任務系列 第 24

[ Day 24 ] - 陣列資料處理 - filter

特性與用途

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

直接進入寫法及範例

範例一:找出陣列中 >= 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);

參考資料及學習資源

本日小結

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


上一篇
[ Day 23 ] - 陣列資料處理 - map
下一篇
[ Day 25 ] - 陣列的資料處理 - find
系列文
初心者解任務啦!JS 的 30 道任務30

尚未有邦友留言

立即登入留言