【javascript】配列の指定要素を削除する

公開日：2014/06/19

更新日：2014/06/05

カテゴリー: javascript

javascriptで配列内の指定要素を削除する方法とまとめています。

delete演算子を使う方法

delete演算子は要素の値のみを削除してくれます（要素の数は変化しません）。

なお、削除した要素の値は「undefined」になります。

<script type="text/javascript">
<!--
//フルーツの名前を格納した配列を作成
var fruits_array = ['apple','orenge','cherry','banana'];
//delete演算子で3番目の要素を削除
delete fruits_array[2];
//出力
document.write(fruits_array);
// -->
</script>

これを実行すると以下のようになります。

apple,orenge,,banana

配列の要素数を変化させず値のみを削除したいときにdelete演算子は有効ですが、要素数も削除したい場合は使えません。

spliceメソッドを使う方法

spliceメソッドは配列の指定箇所から何個の要素を削除するか？を指定できるメソッドです（本来は置換を行うメソッドです）。

ここに配列の変数.splice(削除を開始する要素, そこから何個削除するか);

複数の配列の要素を削除するときに有効ですが、このようにすると指定の要素を1つだけ削除できます。

ここに配列の変数.splice(削除を開始する要素, 1);

また、値のみでなく要素そのものを削除するので、要素数も減ります。

<script type="text/javascript">
<!--
//フルーツの名前を格納した配列を作成
var fruits_array = ['apple','orenge','cherry','banana'];
//spliceメソッドで3番目の要素を削除
fruits_array.splice(2, 1);
//出力
document.write(fruits_array);
// -->
</script>

これを実行するとこのようになります。

apple,orenge,banana

「指定の値」をもつ要素を削除する

これまでは要素のインデックスを指定して配列の要素を削除しましたが、spliceメソッドを使って指定の値をもつ要素を削除してみたいと思います。

値の連続した重複がない場合

配列の要素の値に連続した重複がない場合、簡単にその要素を削除できます。

例として、「cherry」という値をもつ要素を削除します。

<script type="text/javascript">
<!--
//フルーツの名前を格納した配列を作成
var fruits_array = ['apple','orenge','cherry','banana', 'apple','cherry'];
//配列をループして値を照合して要素を削除
for(i=0; i<fruits_array.length; i++){
	if(fruits_array[i] == "cherry"){
		//spliceメソッドで要素を削除
		fruits_array.splice(i, 1);
	}
}
//出力
document.write(fruits_array);
// -->
</script>

これを実行するとこのようになります。

apple,orenge,banana,apple

値の連続した重複がある場合

値の連続した重複がある場合、削除漏れが発生します。

上のスクリプトの配列を以下のようにすると

var fruits_array = ['apple','orenge','cherry','cherry','banana', 'apple','cherry'];

次のように出力されて削除漏れが発生していることがわかります。

apple,orenge,cherry,banana,apple

この原因ですが、指定した値（ここでは「cherry」）に合致すると、その要素が削除されるので要素数が減少するからです。

つまり次のループ処理で配列の要素数が現象下にも関わらず、変数「i」がインクリメントされるからです。

そのため次のように、削除を行ったら変数「i」をデクリメントすれば削除漏れを防げます。

<script type="text/javascript">
<!--
//フルーツの名前を格納した配列を作成
var fruits_array = ['apple','orenge','cherry','cherry','banana', 'apple','cherry'];
//配列をループして値を照合して要素を削除
for(i=0; i<fruits_array.length; i++){
	if(fruits_array[i] == "cherry"){
		//spliceメソッドで要素を削除
		fruits_array.splice(i--, 1);
	}
}
//出力
document.write(fruits_array);
// -->
</script>

出力結果は以下。

apple,orenge,banana,apple

Tips

このページでは配列の指定要素を削除する方法を書きましたが、オブジェクトの場合は【javascript】オブジェクト（連想配列）の要素を削除するを参考にしてください。

 

あわせて読んでほしい！

• ニートになってパソコンの電気代を心配してたけど、全然たいしたことなかった
• ３年８カ月運営してきた私のブログのアクセス数

Follow @ysklog_net