配列に JavaScript の値が含まれているかどうかを確認する
-
JavaScript で
.indexOf()関数を使用して配列に値が含まれているかどうかを確認する -
JavaScript で
.includes()関数を使用して配列に値が含まれているかどうかを確認する -
JavaScript で
.find()関数を使用して配列内の要素を検索する -
JavaScript で
.filter()関数を使用して配列内の要素を検索する -
単純な
forループを使用して要素を検索する - 注意
配列に JavaScript の値が含まれているかどうかを確認する状況に陥ることがよくあります。検索機能はループを使用して基本的な JavaScript 構文でコーディングできますが、JavaScript での配列検索に使用できる組み込みの機能、その使用法、戻り値の種類、および動作を知っておくとよいでしょう。コードを少なくする必要があるため、タスクがはるかに簡単になります。機能は効率的で、組み込み関数を使用するとバグが発生しにくくなります。配列内の要素を検索する方法を見てみましょう。
JavaScript で .indexOf() 関数を使用して配列に値が含まれているかどうかを確認する
.indexOf() 関数は、JavaScript で一般的に使用される関数です。配列または文字列内の要素を検索するときにうまく機能します。
構文
indexOf(element, index)
パラメータ
検索する要素をパラメータとして受け取ります。また、関数に検索を開始する必要のあるインデックス（0 から開始）を指示するオプションのパラメーター。負の値を指定すると、指定した位置で配列の末尾から検索することを意味します。
戻り値
この関数は、要素が見つかった場合、配列内の 0 から始まる検索要素のインデックスを返します。それ以外の場合は、-1 を返し、要素が見つからなかったことを示します。配列に複数の一致がある場合、.indexOf() 関数は最初の一致のインデックスを返します。
ブラウザのサポート
.indexOf() 関数は、すべての主要なブラウザバージョンでサポートされています。
使用法
配列での indexOf() 関数の使用法は次のとおりです。
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
console.log(fruits.indexOf('Pear'));
console.log(fruits.indexOf('Tomato'))
出力：
2
-1
検索機能については、.indexOf(searchText) の戻り型が -1 より大きいかどうかを確認します。その場合、検索結果は true、それ以外は false になります。上で説明したのと同じ例を見て、要素が配列に存在するかどうかを確認しましょう。
function isFruit(fruitName) {
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
if (fruits.indexOf(fruitName) > -1) {
return true;
} else {
return false;
}
}
isFruit('Pear');
isFruit('Cat');
出力：
true
false
JavaScript で .includes() 関数を使用して配列に値が含まれているかどうかを確認する
JavaScript の includes() 関数は、指定された要素が配列に存在するかどうかをチェックします。ブール値を返します。したがって、if 条件チェックに最適です。
構文
includes(keyword)
includes(keyword, index)
パラメータ
この関数は 2つのパラメーターを取ります。通常、この関数は .includes(searchString) の形式で使用します。searchString パラメーターは検索する要素であり、index パラメーターは検索の開始元となる配列インデックスを参照します。index パラメータはオプションです。
戻り値
.includes() は、searchString が配列の要素として見つかった場合、true を返します。見つからない場合、関数は false を返します。
ブラウザのサポート
.includes() 関数は、Internet Explorer を除くほとんどすべての Web ブラウザーで機能します。したがって、プロジェクトが IE でサポートされている場合は、indexOf() 関数を使用する必要があります。
使用法
配列に includes() を適用する方法を見てみましょう。
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
console.log(fruits.includes('Pear'));
console.log(fruits.includes('Tomato'))
出力：
true
false
includes() 関数は、出力としてブール値を返すため、if 条件で直接使用できます。上記の例は、次のように条件付き if で使用できます。.includes() がサポートされていないため、このコードは IE では機能しない可能性があることに注意してください。
function isFruit(fruitName) {
let fruits = ['Apple', 'Mango', 'Pear', 'Peach'];
if (fruits.includes(fruitName)) {
return true;
} else {
return false;
}
}
isFruit('Pear');
isFruit('Cat');
出力：
true
false
JavaScript で .find() 関数を使用して配列内の要素を検索する
要素が配列に存在するかどうかを確認する別の方法は、.find() 関数を使用することです。.indexOf() および .includes() 関数と比較すると、.find() は関数をパラメーターとして受け取り、配列の各要素で実行します。パラメータ関数で説明されている条件が満たされる最初の値を返します。
構文
.find((keyword) => {/* Some condition checks */})
.find((keyword, index) => {/* Some condition checks */})
パラメータ
Array.find() 関数は、入力パラメーターとして関数を取ります。通常、パラメータとして矢印関数を使用します。また、これらの矢印関数には、item => item > 21 のような条件チェックが含まれている場合があります。もう 1つのオプションのパラメーターは、現在の反復インデックスを表すインデックスです。.find() は、配列の各要素に対して矢印関数を実行します。したがって、それは、さらなる条件付きチェックを支援するための矢印関数への引数としてイテレーターを提供します。
戻り値
.find() は、javascript の indexOf()、includes() 関数とは少し異なります。見つかった場合は要素の値を返し、それ以外の場合は関数は undefined を返します。
ブラウザのサポート
.includes() 関数と同様に、.find() は Internet Explorer を除くほとんどすべての Web ブラウザーで機能します。したがって、配列操作にこのような関数を使用することを計画する前に、プロジェクトが IE でサポートされていないことを確認する必要があります。
使用法
配列内の次の使用法を参照してください。
let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.find(i => i > 20));
console.log(age.find(i => i > 21))
出力：
21
43
age.find(i => i > 21) の出力には少し驚かれるかもしれません。age の 21 の次に大きい数値である 23 ではなく 43 が返されるからです。アレイ。.find() 関数は、配列関数に記載されている条件を満たす次の要素を時系列で返すことに注意してください。if ブロックを持つ要素を検索するには、次のコードを使用できます。
function findPeerAge(myAge) {
let age = [21, 43, 23, 1, 34, 12, 8];
if (age.find(i => (i === myAge))) {
return true;
} else {
return false;
}
}
findPeerAge(23);
findPeerAge(40);
true
false
JavaScript で .filter() 関数を使用して配列内の要素を検索する
.filter() 関数は、主に配列処理操作で使用されます。特に、配列から、基準を満たす要素をフィルタリングする場合はそうです。引数として渡された関数で定義された条件を満たす要素の配列を返します。
構文
Array.find() と同じ構文に従います。
.filter((keyword) => {/* Some condition checks */})
.filter((keyword, index) => {/* Some condition checks */})
パラメータ
Array.filter() 関数は、インライン関数または矢印関数をパラメーターとして受け入れます。矢印関数はフィルター基準を保持します。.filter() 関数は、配列の各要素に対して矢印関数を実行し、矢印関数に記載されている条件を満たす要素を返します。矢印関数は、入力としてキーワードを持ち、インデックスとして現在の反復を持ちます。
戻り値
これまで見てきた配列検索関数とは異なり、.filter() は、矢印関数で説明されている条件を満たす要素を含む配列を返します。要素が見つかった場合、返される配列には必要な要素が含まれます。それ以外の場合は、関数によって空の配列が返されます。
ブラウザのサポート
.filter() 関数は、Internet Explorer を含むすべてのブラウザーでサポートされています。したがって、期待されるブラウザのサポートを気にすることなく、.filter() 関数を使用できます。
使用法：この関数の使用法は次のとおりです
let age = [21, 43, 23, 1, 34, 12, 8];
console.log(age.filter(i => i > 20));
console.log(age.filter(i => i > 21));
出力：
[21, 43, 23, 34]
[43, 23, 34]
結果からわかるように、filter() 関数は配列を返します。配列内の要素を検索する必要がある場合は、次のコードサンプルに示すように filter() 関数を使用できます。filter() 関数によって返される配列の .length 属性を使用して、要素を見つけることができるかどうかを判断します。関数が空の配列を返す場合は、検索キーワードが見つからなかったことを示します。
function findAge(myAge) {
let age = [21, 43, 23, 1, 34, 12, 8];
if (age.filter(i => (i === myAge)).length) {
return true;
} else {
return false;
}
}
findAge(23);
findAge(40);
出力：
true
false
単純な for ループを使用して要素を検索する
javascript の基本的なメソッド、if 条件、および for ループを使用して、配列内の要素を見つけることができます。次のコードは、要素が見つかった場合は true を返し、それ以外の場合は false を返します。同じ要素が複数出現する場合、関数は最初の一致のみを返します。
function findAge(myAge, ageAry) {
let elementFound = false;
for (let i = 0; i < ageAry.length; i++) {
if (ageAry[i] === myAge) {
return true;
}
}
return elementFound;
}
let srcArray = [21, 43, 23, 1, 34, 12, 8];
findAge(23, srcArray);
findAge(40, srcArray);
findAge(8, srcArray);
findAge(23, srcArray);
出力：
true
false
true
true
注意
.indexOf()、.includes()関数は、完全に一致する要素を探します。部分的な文字列の検索には使用できません。これは、検索パラメーターが機能しないため、要素の一部を提供することを意味します。Array.filter()関数とArray.find()関数を使用して部分要素検索を実装できます。これらの関数を使用すると、検索条件をカスタム定義できます。