[Javascript] Check if value exists in Array

一般常見的需求像是：

當 array 找到此 value 时，即停止輸入新的 value 到數組裡
當 array 包含特定 value 时，即執行某個 script
等等不勝凡舉

rails 在處理 value 是否存在 array 裡很容易，運用 include or exists
而在 javascript 是怎麼檢查 value 是否存在 array 裡？

使用 Loop 循環檢查

var names_arr = ['jimmy','nic','stan','kurt'];
 
function checkValue(value,arr){
  var status = 'Not exist';
 
  for(var i=0; i < arr.length; i++){
    var name = arr[i];
    if(name == value){
      status = 'Exist';
      break;
    }
  }
  return status;
}

執行：

console.log('status : ' + checkValue('jimmy', names_arr));
// status : Exist
console.log('status : ' + checkValue('wayne', names_arr));
// status : Not exist

使用 jQuery.inArray()

1 2	var names_arr = ['jimmy','nic','stan','kurt']; var text = 'jimmy is cool boy';

使用方法是： jQuery.inArray('你想查的值', your_array)
執行：

// Searching in Array
console.log( 'Index : ' + jQuery.inArray('stan', names_arr));
// Index : 2
console.log( 'Index : ' + jQuery.inArray('wayne', names_arr));
// Index : -1

// Searching in String
console.log( 'Index : ' + jQuery.inArray( 'c', text ));
// Index : 9

使用 your_array.indexOf()

1 2	var names_arr = ['jimmy','nic','stan','kurt']; var text = 'jimmy is cool boy';

執行：

// Search in Array
console.log( 'Index : ' + names_arr.indexOf('stan'));
// Index : 2
console.log( 'Index : ' + names_arr.indexOf('wayne'));
// Index : -1

// Search in String
console.log( 'Index : ' + text.indexOf('c'));
// Index : 9

使用 your_array.includes()

1 2	var names_arr = ['jimmy','nic','stan','kurt']; var text = 'jimmy is cool boy';

執行：

// Searching in Array
console.log( 'Index : ' + names_arr.includes('stan', names_arr));
// Index : true
console.log( 'Index : ' + names_arr.includes('wayne', names_arr));
// Index : false

// Searching in String
console.log( 'Index : ' + text.includes('c'));
// Index : true

屬於 ES6 (es2017) 的方法
使用時得格外小心，因為不兼容 IE ( Can I use )，这也是跟 indexOf() 最大的差别。

indexOf() vs includes() 两者比较

indexOf() 存在返回該 index，不存在返回 -1
includes() 存在返回 true，不存在返回 false
includes() 不兼容瀏覽器 ex: IE
indexOf() 不支持檢查 NaN , undefined

const arr = [1, 2, 3, 4, NaN];

// 常用的判斷
// es5
if (arr.indexOf(3) >= 0) {
  // run your script
}

// es2016
if (arr.includes(1)) {
  // run your script
}

// 註：indexOf 不支持檢查 NaN
console.log(arr.indexOf(NaN))
// -1
console.log(arr.includes(NaN))
// true

Ref

Includes() vs indexOf() in JavaScript - by John Samuel Obinna

Summary

The includes method finds NaN and undefined whereas the indexOf method doesn’t.

The includes() methodÂ does not distinguish between -0 and +0(This is not a bug, but clearly how javascript works. Check javascript Number type)

Read more from MDN about Array.prototype.includes()

IE does not support includes()