Array.remove - JavaScriptで指定した値を配列から削除処理

2007年6月21日(木) 19:20

JavaScriptには配列中の特定の値を削除する処理が用意されていない。Array.shiftを利用した場合、先頭要素しか削除できないので何かと不便。JavaScriptからstyle.classNameなどを操作する場合を想定して、特定の値を配列中から削除できるArray.remove処理を実装してみる。

1つ注意しておきたいのは、すでに実装済みのコード中にfor(x in array){..}を利用している場合、下記のprototypeが追加されることで弊害が出る。配列オブジェクトのプロパティをすべて参照してしまうので、追加されたfunctionも参照される結果となり、エラーとなる。この場合、Array.lengthを参照する形式に変更すればよい。

配列内の検索と削除処理の実装
配列オブジェクトに対してprototypeとして作成する。

<script type="text/javascript">
Array.prototype.indexOf = function(value){
   var i = this.length;
   while(i){
      if(this[--i] == value) return i;
   }
   return -1;
};
Array.prototype.remove = function(value, cap){
   var i = this.length; var a;
   while(i--){
      if(value.indexOf(a = this.pop()) == -1) this.unshift(a);
   }
   return (cap)? this.join(cap) : this;
};
</script>

classNameから配列指定した値を削除する
id="elem" class="left right clear"に対して、下記のコードを実行すると、class="left"となる。

<script type="text/javascript">
var obj = document.getElementById('elem');
obj.className = obj.className.split(/\s+/).remove(['right','clear'], ' ');
</script>

Array.remove()を呼び出す際に、２つめのパラメータを指定できるようにしてあり、上記では配列を' '(スペース)で連結して、文字列として取得している。非常に単純なコードだが、JavaScriptからclassNameを操作する際に利用しやすくしてある。Array.mergeとあわせて利用すれば、追加・削除を間単に実装できる。

さくらインターネット