https://idea-hack.com/courses/arrange-and-remember-how-to-handle-arrays-in-javascript/lessons/check-if-there-is-a-specific-value-in-array-element-with-javascript/
https://idea-hack.com/courses/arrange-and-remember-how-to-handle-arrays-in-javascript/lessons/check-if-there-is-a-specific-value-in-array-element-with-javascript/

JavaScriptで配列の要素の中に特定の値があるかを確認するindexOf・lastIndexOf・includesメソッドの使い方

JavaScriptで配列を扱う際、複数の配列の要素の中に、特定の値があるか確認したいケースがあります。

やり方が 3つありますので、それぞれ紹介します。

構文

メソッド意味返り値
配列.indexOf(検索したい要素, [検索開始位置のインデックス番号(省略可能)] )要素が「検索開始位置のインデックス番号」から最初に見つかるインデックス番号を返す。数値
配列.lastIndexOf(検索したい要素, [検索終了位置のインデックス番号(省略可能)] )要素が「検索終了位置のインデックス番号」までの範囲で最後に見つかるインデックス番号を返す。数値
配列.includes(検索したい要素,[検索開始位置(省略可能)]要素が「検索開始位置」以降に含まれているかを返す。真偽値
indexOf・lastIndexOf・includesメソッド

サンプルコード

配列.indexOf(検索したい要素, [検索開始位置(省略可能)] )

Output
元となる配列 [ ‘りんご’, ‘みかん’, ‘ぶどう’,’いちご’, ‘レモン’ ]
検索開始位置を省略した時
検索開始位置を2に指定した時
検索開始位置を3に指定した時
Pug
.container.my-5
	table.table
		tbody
			tr
					th 元となる配列
					td [ 'りんご', 'みかん', 'ぶどう','いちご', 'レモン' ]
			tr
				th 検索開始位置を省略した時
				td#targetText
			tr
				th 検索開始位置を2に指定した時
				td#targetText1
			tr
				th 検索開始位置を3に指定した時
				td#targetText2
			
			
	
JavaScript
const targetText = document.getElementById( 'targetText' );
const targetText1 = document.getElementById( 'targetText1' );
const targetText2 = document.getElementById( 'targetText2' );

/*参照元となる配列*/
const sampleArray = [ 'りんご', 'みかん', 'りんご', 'ぶどう','いちご', 'レモン' ];
const sampleArray1 = [ 'りんご', 'みかん', 'りんご', 'ぶどう','いちご', 'レモン' ];
const sampleArray2 = [ 'りんご', 'みかん', 'りんご', 'ぶどう','いちご', 'レモン' ];

const arrayIndexOf = sampleArray.indexOf('りんご');
const arrayIndexOf1 = sampleArray1.indexOf('りんご', 2);
const arrayIndexOf2 = sampleArray2.indexOf('りんご', 3);

targetText.textContent = arrayIndexOf;
targetText1.textContent = arrayIndexOf1;
targetText2.textContent = arrayIndexOf2;

配列.lastIndexOf(検索したい要素, [検索開始位置(省略可能)] )

Output
元の配列 [ ‘りんご’, ‘みかん’, ‘ぶどう’,’いちご’, ‘レモン’ ]
検索終了位置を省略した時
検索終了位置を2に指定した時
検索終了位置を5に指定した時
Pug
.container.my-5
	table.table
		tbody
			tr
					th 元の配列
					td [ 'りんご', 'みかん', 'ぶどう','いちご', 'レモン' ]
			tr
				th 検索終了位置を省略した時
				td#targetText3
			tr
				th 検索終了位置を2に指定した時
				td#targetText4
			tr
				th 検索終了位置を5に指定した時
				td#targetText5
			
			
	
JavaScript
const targetText3 = document.getElementById( 'targetText3' );
const targetText4 = document.getElementById( 'targetText4' );
const targetText5 = document.getElementById( 'targetText5' );

/*参照元となる配列*/
const sampleArray3 = [ 'りんご', 'みかん', 'りんご', 'ぶどう', 'りんご', 'レモン' ];
const sampleArray4 = [ 'りんご', 'みかん', 'りんご', 'ぶどう', 'りんご', 'レモン' ];
const sampleArray5 = [ 'りんご', 'みかん', 'りんご', 'ぶどう', 'りんご', 'レモン' ];

const arrayLastIndexOf3 = sampleArray3.lastIndexOf('りんご');
const arrayLastIndexOf4 = sampleArray4.lastIndexOf('りんご', 2);
const arrayLastIndexOf5 = sampleArray5.lastIndexOf('りんご', 4);

targetText3.textContent = arrayLastIndexOf3;
targetText4.textContent = arrayLastIndexOf4;
targetText5.textContent = arrayLastIndexOf5;

配列.includes(検索したい要素,[検索開始位置(省略可能)]

Output
元の配列 [ ‘りんご’, ‘みかん’, ‘ぶどう’,’いちご’, ‘レモン’ ]
「りんご」含む?
「マスカット」を含む?
「みかん」を含むインデックス2以降で含む?
Pug
.container.my-5
	table.table
		tbody
			tr
					th 元の配列
					td [ 'りんご', 'みかん', 'ぶどう','いちご', 'レモン' ]
			tr
				th 「りんご」含む?
				td#targetText6
			tr
				th 「マスカット」を含む?
				td#targetText7
			tr
				th 「みかん」をインデックス2以降で含む?
				td#targetText8
			
			
	
JavaScript
const targetText6 = document.getElementById( 'targetText6' );
const targetText7 = document.getElementById( 'targetText7' );
const targetText8 = document.getElementById( 'targetText8' );

/*参照元となる配列*/
const sampleArray6 = [ 'りんご', 'みかん', 'りんご', 'ぶどう', 'りんご', 'レモン' ];
const sampleArray7 = [ 'りんご', 'みかん', 'りんご', 'ぶどう', 'りんご', 'レモン' ];
const sampleArray8 = [ 'りんご', 'みかん', 'りんご', 'ぶどう', 'りんご', 'レモン' ];

const arrayIncludes6 = sampleArray6.includes('りんご');
const arrayIncludes7 = sampleArray7.includes('マスカット');
const arrayIncludes8 = sampleArray8.includes('みかん', 2);

targetText6.textContent = arrayIncludes6;
targetText7.textContent = arrayIncludes7;
targetText8.textContent = arrayIncludes8;
インストラクター
コメント

コメントを残す