特性與用途

• 不會影響到原始陣列的資料
• 回傳符合條件的一筆資料的 index（索引）

直接進入寫法與範例

範例一：找出 >= 10 的 index

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

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

執行結果

範例二：找出 price < 200 的項目

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

const newDataList = dataList.findIndex(function(item){
  return item.price < 200;
});
console.log(newDataList);
console.log(dataList[newDataList]);

執行結果

最後來練習箭頭函式

• 第一種寫法：先拔 function ，再加上 => 魔法棒，完成！

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

const newDataList = dataList.findIndex((item) => {
  return item.price < 200;
});
console.log(newDataList);
console.log(dataList[newDataList]);

• 第二種寫法：因為拔掉不需要的括號後，也不需要 return 這個"媒介"，
  試想著把 => （魔法棒），後面當作魔法棒要直接執行的咒語（條件），那麼就完成了！

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

const newDataList = dataList.findIndex(item => item.price < 200);
console.log(newDataList);
console.log(dataList[newDataList]);

參考資料及學習資源

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

本日小節

今天小改了一下箭頭函式的記法，把他當魔法師用的法杖來形容感覺變簡單了！（自以為）
這是我的學習紀錄，有什麼建議和問題都可以跟我說，我們下次見！