Array.merge - JavaScriptで2つの配列をマージ処理

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

JavaScriptには配列のマージ処理が用意されていない。Array.concatを利用した場合、指定した２つの配列に同じ値が存在してもそのまま連結される。JavaScriptからstyle.classNameなどを操作する場合を想定して、Array.merge処理を実装してみる。

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.merge = function(value, cap){
   var i = value.length;
   while(i){
      if(this.indexOf(value[--i]) == -1) this.push(value[i]);
   }
   return (cap)? this.join(cap) : this;
};
</script>

配列でclassNameを追加する
id="elem" class="left"に対して、下記のコードを実行すると、class="left right clear"となる。

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

Array.merge()を呼び出す際に、２つめのパラメータを指定できるようにしてあり、上記では配列を' '(スペース)で連結して、文字列として取得している。マージする際に、連結する配列に対しては重複チェックを行うが、元となる配列に対してはチェックしていない点は注意する必要がある。Array.removeとあわせて利用すれば、追加・削除を間単に実装できる。

さくらインターネット