轉自 https://cythilya.github.io/2017/05/08/javascript-find-item-in-an-array/
--
整理了一些在陣列中找東西的方法。
尋找是否有符合的元素
方法一:indexOf
使用原生 JavaScript 的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
使用 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"]
尋找是否有符合的物件: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
indexOf
vs $.inArray
以下是 jQuery 的原始碼。若瀏覽器支援,則預設是使用原生 JavaScript 的indexOf
。
inArray: function( elem, array, i ) {
var len;
if ( array ) {
if ( indexOf ) {
return indexOf.call( array, elem, i );
}
len = array.length;
i = i ? i < 0 ? Math.max( 0, len + i ) : i : 0;
for ( ; i < len; i++ ) {
// Skip accessing in sparse arrays
if ( i in array && array[ i ] === elem ) {
return i;
}
}
}
return -1;
}
--
留言列表