JavaScript 陣列處理：找東西 - indexOf、$.inArray 與 filter

參考自:https://cythilya.github.io/2017/05/08/javascript-find-item-in-an-array/

整理了一些在陣列中找東西的方法。

尋找是否有符合的元素
方法一：indexOf
使用原生 JavaScript 的Array.prototype.indexOf()。

如下例，陣列 fruit 中有三種水果，分別是蘋果 (apple)、橘子 (orange) 和 葡萄 (grape)。

找「芒果」(mango)，回傳 -1，表示找不到。

找「葡萄」(grape)，回傳 2，表示在陣列中的第三個位置找到。

var fruits = ['apple', 'orange', 'grape'];

fruits.indexOf("mango"); // -1
fruits.indexOf("grape"); // 2

方法二：$.inArray
使用jQuery 的$.inArray。

如下例，在陣列 fruit 中找水果。

找「鳳梨」(pineapple)，回傳 -1，表示找不到。

找「葡萄」(grape)，回傳 2，表示在陣列中的第三個位置找到。

var fruits = ['apple', 'orange', 'grape'];

$.inArray('pineapple', fruits); // -1
$.inArray('grape', fruits); // 2

方法三：filter
使用 Array.prototype.filter() 回傳符合條件的元素，得到一個新陣列。

如下例，回傳大於 10 的數字。

var numbers = [1, 3, 6, 10, 99, 101];

var filteredNum = numbers.filter(function(value) {
    return value > 10
});

filteredNum //[99, 101]

找「鳳梨」(pineapple)，回傳空陣列，表示找不到。

var fruits = ['apple', 'orange', 'grape'];

var filtered = fruits.filter(function(value) {
    return value === 'pineapple'
});

filtered // []

找「葡萄」(grape)，回傳含有 grape 字串的陣列，表示找到。

filtered // ["grape"]
方法四：includes
ES2016 加入了 Array.prototype.includes()，可在陣列中尋找指定元素，回傳 true（找到） 或 false（沒找到）。注意，IE 不支援。

var fruits = ['apple', 'orange', 'banana'];

console.log(fruits.includes('orange')); // true

console.log(fruits.includes('pineapple')); // false

尋找是否有符合的物件：indexOf 與 $.map

由於無法直接在陣列中比對物件，因此必須先簡化這個含有許多物件的陣列，成為只含有單一欄位的陣列，再做尋找比對。其中欄位的內容可為字串、數字這種基礎型別的值。

如下例，想要在陣列 people 中尋找 Nina。陣列 people 含有許多物件 person，每個 person 含有 name 和 age 兩個欄位。由於目標「Nina」是 name，因此先把 people 簡化為只含 name 的新陣列。在這裡使用$.map回傳只含有特定欄位 name 的新陣列。

再來，使用上面提到的indexOf在新陣列中尋找是否有 Nina 這個字串。回傳 2 表示在陣列第三個元素中找到。

var people = [
  { name: 'Peter', age: 10 },
  { name: 'John', age: 3 },
  { name: 'Nina', age: 15 }
];

//find object in list
var result = $.map(people, function(item, index) {
  return item.name
}).indexOf('Nina');

result //2