前情提要

艾草：「不知不覺也累積了不少魔力總量了，我們今天透過魔法陣列來找出你適合的屬性值吧！」

「有哪些屬性呀？」

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

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

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

艾草：「好呀！沒關係！但如何尋找屬性的魔法陣列方法還是要學，來我重新引導你使用一次！」

只聽艾草小小聲碎念了一句：「要學火屬性是吧... 那就不能怪我了。」

常用陣列方法（二）

今天要來介紹可以拿來找出想要的值或索引值的實用陣列方法！

find()

find() 會回傳第一個符合條件的值，如果找不到會回傳 undefined。

find() 內會包含一個參數為函式。

而該函式可以帶入三個參數(參數名稱可自定義)：

1. element 陣列正在執行的值
2. index 正在執行值的索引值(選擇性)
3. 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() 內會包含一個參數為函式。

而該函式可以帶入三個參數(參數名稱可自定義)：

1. element 陣列正在執行的值
2. index 正在執行值的索引值(選擇性)
3. 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 錯在只會印出第一個符合的索引值，且不會建立新陣列

參考文獻

JavaScript 必修篇 - 前端修練全攻略(六角學院)

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/find

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex