JavaScriptのincludes()・same()・find()・findIndex()を使ってみる

JavaScriptで配列内の検索方法を検討することがあったので、その際に試したincludes()・same()・find()・findIndex()についてメモ。

includes()

まずはincludes()です。
includes()は配列内に指定した値があるかどうかをtrue/falseで返します。

const arr1 = [1, 2, 3, 4, 5];
console.log(arr1.includes(2)); // true

const arr2 = ['cat', 'dog', 'bat'];
console.log(arr2.includes('cat')); // true
console.log(arr2.includes('at')); // false

includes()のデモページ
IEで非対応なので使う際は注意が必要です。

some()

some()は配列内で指定した条件を満たす値があるかどうかをtrue/falseで返します。

const arr = [5, 12, 8, 130, 44];

const result1 = arr.some(function(element) {
	return element > 10;
});
console.log(result1); // true

const result2 = arr.some(function(element) {
	return element > 1000;
});
console.log(result2); // false

some()のデモページ
対応ブラウザは特に問題ありません。

find()・findIndex()

find()は配列内で指定した条件を満たす最初の値を返します。

const arr = [5, 12, 8, 130, 44];

const result1 = arr.find(function(element) {
	return element > 10;
});
console.log(result1); // 12

const result2 = arr.find(function(element) {
	return element > 1000;
});
console.log(result2); // undefined

10より大きい数字という条件なので、2番目の12が返されました。
条件を満たす値が見つからなかった場合はundefinedを返します。
find()のデモページ
IEで非対応なのでご注意ください。

findIndex()はfind()と近いですが、返す内容が値ではなく値の位置という点が異なります。

const arr = [5, 12, 8, 130, 44];

const result1 = arr.findIndex(function(element) {
	return element > 10;
});
console.log(result1); // 1

const result2 = arr.findIndex(function(element) {
	return element > 1000;
});
console.log(result2); // -1

先ほどと同じ配列と条件で、値の位置が返されました。
条件を満たす値が見つからなかった場合は-1を返します。
findIndex()のデモページ
こちらもfind()と同じくIEで非対応となっています。