JSで配列の重複を除く方法6コ

JSで 配列の重複 を除く方法をまとめてみました。モダンブラウザで使える方法からレガシーブラウザで使えるものまで紹介します。

filter() と indexOf()


function removeArrayDuplicates(array) {
  return array.filter(function(value, index, self) {
    return self.indexOf(value) === index;
  });
}

indexOf() は配列内で 最初に見つかった添え字 を返すので、一致する場合に filter() で値を返すようになっています。

reduce() と indexOf()


function removeArrayDuplicates(array) {
  return array.reduce(function(previous, current) {
    if (previous.indexOf(current) === -1) {
      previous.push(current);
    }

    return previous;
  }, []);
}

reduce() は配列の 現在の値と1つ前の値 を使って走査することができる関数です。第2引数に [] を渡すことで1回目の走査時、previous を空配列にしています。previous 配列に現在の値が存在しなければ、末尾に追加しています。

sort() してから reduce()


function removeArrayDuplicates(array) {
  return array.slice().sort(function(a, b) {
    return a > b;
  }).reduce(function(previous, current) {
    if (previous[previous.length-1] !== current) {
      previous.push(current);
    }

    return previous;
  }, []);
}

最初に slice() して元の配列を変更しないように複製し、sort() しています。その後、reduce()previous 配列の末尾の値が現在の値と異なれば、追加していくという風になっています。

for文で配列を走査


function removeArrayDuplicates(array) {
  var exist = {},
      result = [];

  for (var i = 0, l = array.length; i < l; i++) {
    var tmp = array[i];
    
    if (!exist[tmp]) {
      exist[tmp] = true;
      result.push(tmp);
    }
  }

  return result;
}

exist オブジェクトに初めて登場した値を格納していき、exist オブジェクトに現在の値が格納されていなければ result 配列に追加していく方法です。filter() が使えない IE8 などのブラウザでも使うことができます。

ES6の Array.from() と Set()


let removeArrayDuplicates = array => Array.from(new Set(array));

Set() で重複を除いた配列型オブジェクトを生成し、Array.from() で配列型オブジェクトを配列へ変換しています。

ES6のスプレッド演算子と Set()


let removeArrayDuplicates = array => [...new Set(array)];

Set() で重複を除いた配列型オブジェクトを生成し、...スプレッド演算子)で配列へ変換しています。

CSS本執筆しました!!!