[ Day 26 ] - 阵列的资料处理 - findIndex

特性与用途

• 不会影响到原始阵列的资料
• 回传符合条件的一笔资料的 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()

本日小节

今天小改了一下箭头函式的记法，把他当魔法师用的法杖来形容感觉变简单了！（自以为）
这是我的学习纪录，有什麽建议和问题都可以跟我说，我们下次见！