JavaScript - 配列に追加する前に重複チェックを行う

JavaScript で配列にデータを追加する前に、 重複チェックを行う場合は、indexOf() メソッドを利用すると便利です。

ここでは、重複しないデータのみを「配列の末尾に追加する関数」と、 「配列の先頭に追加する関数」のサンプルコードを紹介します。

indexOf() メソッドの機能

indexOf() メソッドは、「指定した値を持つ要素」を配列中から検索します。

見つかった場合は最初に見つかった要素のインデックスを返し、 見つからなかった場合は -1 を返します。

var arr = [1, 3, 5, 7, 9];

console.log(arr.indexOf(5));   // 2
console.log(arr.indexOf(10));  // -1  重複していない場合

この indexOf() メソッドの機能を重複チェックに利用します。

重複してないデータを配列の末尾に追加

重複していないデータを配列の「末尾」に追加する関数のサンプルコードは次のようになります。

indexOf() メソッドで重複チェックをし、push() メソッドで末尾に追加します。

// 重複してないデータを配列の末尾に追加
function pushData(array, value){
	
	if (array.indexOf(value) == -1){
		array.push(value);
	}
	return true;
}

使用例

var arr = [1, 3, 5, 7, 9];

pushData(arr, 2);
pushData(arr, 5);

console.log(arr);  // Array [ 1, 3, 5, 7, 9, 2 ]

重複してないデータを配列の先頭に追加

重複していないデータを配列の「先頭」に追加する関数のサンプルコードは次のようになります。

indexOf() メソッドで重複チェックをし、unshift() メソッドで末尾に追加します。

// 重複してないデータを配列の先頭に追加
function unshiftData(array, value){
	
	if (array.indexOf(value) == -1){
		array.unshift(value);
	}
	return true;
}

使用例

var arr = [1, 3, 5, 7, 9];

unshiftData(arr, 1);
unshiftData(arr, 4);

console.log(arr);   // Array [ 4, 1, 3, 5, 7, 9 ]