2017.12.22

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本執筆しました！！！

CSS本出します！1/29発売予定
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs
— たかもそ＠CSS本1/29発売!! (@takamosoo) 2018年12月31日