入门魔法 - 常用阵列方法（二）find、findIndex

前情提要

艾草：「不知不觉也累积了不少魔力总量了，我们今天透过魔法阵列来找出你适合的属性值吧！」

「有哪些属性呀？」

艾草：「金、木、水、火、土。喔喔喔，看到了你适合金属性！」

「不要，我要火属性！非火不可，我只要火的！」

(艾草露出欲言又止的表情．．)

艾草：「好呀！没关系！但如何寻找属性的魔法阵列方法还是要学，来我重新引导你使用一次！」

只听艾草小小声碎念了一句：「要学火属性是吧... 那就不能怪我了。」

常用阵列方法（二）

今天要来介绍可以拿来找出想要的值或索引值的实用阵列方法！

find()

find() 会回传第一个符合条件的值，如果找不到会回传 undefined。

find() 内会包含一个参数为函式。

而该函式可以带入三个参数(参数名称可自定义)：

element 阵列正在执行的值
index 正在执行值的索引值(选择性)
array 执行的阵列本身(选择性)

let num = [1, 2, 3];
//透过旧阵列 num 去执行 find()
//会回传第一个符合的值至变数
let newNum = num.find(function (item, index, array) {
  return item === 3;
});
//num = [1, 2, 3];
//newNum 3

find 实作

如果今天举行活动，活动标准是达到 90 分，想找到第一个达成标准的人，就可以透过 find() 来寻找：

let entryList = [
  {
    name: "艾草",
    score: 87
  },
  {
    name: "烙诗",
    score: 99
  },
  {
    name: "龟人",
    score: 92
  }
];
// 透过 find 找出符合 score >= 90 条件的值
let firstPlace = entryList.find(function (item, index, array) {
  return item.score >= 90;
});
console.log(firstPlace)

印出结果：

像这样就会回传第一个符合标准的值罗！

findIndex()

findIndex() 会回传第一个符合条件的索引值，如果找不到会回传 -1。

findIndex() 内会包含一个参数为函式。

而该函式可以带入三个参数(参数名称可自定义)：

element 阵列正在执行的值
index 正在执行值的索引值(选择性)
array 执行的阵列本身(选择性)

let num = [1, 2, 3];
//透过旧阵列 num 去执行 findIndex()
//会回传第一个符合的索引值至变数
let newNum = num.findIndex(function (item, index, array) {
  return item === 3;
});
//num = [1, 2, 3];
//newNum 2

findIndex 实作

findIndex() 可以搭配 splice 方法，删除特定资料，以顾客订单来举例。

const orders = [
  {
    name: "艾草",
    id: 123456789
  },
  {
    name: "筑茵",
    id: 987654321
  }
];
// 透过 findIndex 找出符合 id 为 123456789 条件的索引值
let index = orders.findIndex(function (item, index, array) {
  return item.id === 123456789;
});
console.log(index); // 输出结果为 0

使用时需要留意型别，如果型别错误将找不到该笔资料 (例如透过 HTML 内取出值的皆为字串型别)：

以下是错误的写法：

假设真的遇到需处理字串的型别建议使用双等於或是将资料转换成数字後再做比较

let indexError = orders.findIndex(function (item, index, array) {
  return item.id === "123456789";
});
console.log(indexError);// -1 找不到 因为两者型别不同

最终配合使用 splice 方法，透过回传的索引值去删除该笔资料即可。

orders.splice(index, 1);
console.log(orders);

印出结果：

总结

find() 会回传第一个符合的值
findIndex() 会回传第一个符合的索引值

小练习

请参考以下程序码，选出正确叙述的选项

let arr = [
  {
    name: "艾草",
    score: 87
  },
  {
    name: "烙诗",
    score: 99
  },
  {
    name: "龟人",
    score: 59
  }
];
let findArr = arr.find(function (item) {
  return item.score > 60;
});
let findIndexArr = arr.findIndex(function (item) {
  return item.score > 60;
});
console.log(findArr)//选项一
console.log(findIndexArr)//选项二

A 选项一会印出 [{name: "艾草", score: 87}] ，因为 find() 会回传值并建立新阵列

B 选项二会印出第一个符合的索引值 0

C 选项一会印出所有符合的值 {name: "艾草", score: 87},{name: "烙诗",score: 99}

D 选项二会印出所有符合的值的索引值并建立新阵列 [ 0,1 ]

解答：选项 B 正确，选项 A 错在会回传值但不会建立新阵列、选项 C 错在不会印出所有符合的值，仅会印出第一笔符合的值、选项 D 错在只会印出第一个符合的索引值，且不会建立新阵列