配列の場合

/**
 * 配列の重複を削除する
 *
 * @param {array} ary*
 * @return {array} 処理後のary
 */
const getArrayDeleteDouble = (ary) => {
  let values = [];
  return ary.filter(e => {
    if (values.indexOf(e) === -1) {
      values.push(e);
      return e;
    }
  });
}

let a = [1, 2, 2, 3, 3, 4, 5, 1, 3, 5];
let result = getArrayDeleteDouble(a);

console.log(result);
// [1, 2, 3, 4, 5]

ArrayとSetを利用して、シンプルな記述で実装することもできる。

let a = [1, 2, 2, 3, 3, 4, 5, 1, 3, 5];
let result = Array.from(new Set(a));

console.log(result);
// [1, 2, 3, 4, 5]

これなら、ArrayとSetを積極的に利用して、filterとindexOfは使わないようにしようと思った。もちろん、それもアリなのだろうけど、処理する件数によって処理速度が変わるとしたらスルーできない。とくに次に連想配列で紹介するMapは便利だが、処理件数が多くないとその威力を発揮できないらしい。

連想配列の場合

たとえば、配列数が500程度ならfilterとindexOf 、数千とかになるとMapを使うとしたほうがいいかもしれない。

参考サイト：JavaScriptのArrayでuniqする8つの方法（と、その中で最速の方法） - ククログ(2018-12-27)

処理の件数が少ない場合

/**
 * 連想配列の指定キーの値が重複する場合は削除する
 *
 * @param {array} ary* 連想配列
 * @param {string} key* 重複判別するキー
 * @return {array} 処理後のary
 */
const getArrayDeleteDouble1 = (ary, key) => {
  let values = [];
  return ary.filter(e => {
    if (values.indexOf(e[key]) === -1) {
      values.push(e[key]);
      return e;
    }
  });
}

let a = [{id: 1}, {id: 2}, {id: 2}, {id: 3}, {id: 4}, {id: 4}, {id: 1}, {id: 5}];
let result = getArrayDeleteDouble1(a, "id");

console.log(result);
// [{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}]

処理の件数が多い場合

/**
 * 連想配列の指定キーの値が重複する場合は削除する
 *
 * @param {array} ary* 連想配列
 * @param {string} key* 重複判別するキー
 * @return {array} 処理後のary
 */
const getArrayDeleteDouble2 = (ary, key) => {
  let map = new Map(ary.map(o => [o[key], o]));
  return Array.from(map.values());
}

let a = [{id: 1}, {id: 2}, {id: 2}, {id: 3}, {id: 4}, {id: 4}, {id: 1}, {id: 5}];
let result = getArrayDeleteDouble2(a, "id");

console.log(result);
// [{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}]

最終的に用意した関数

/**
 * 連想配列の指定キーの値が重複する場合は削除する
 *
 * @param {array} ary* 配列
 * @param {string|null} key aryが連想配列の場合、重複判別するキー
 * @return {array} 処理後のary
 */
const arrayDelDouble = (ary, key) => {
  let result,
      map,
      values;
  
  // MEMO: 処理件数による処理速度を考慮
  if (ary.length > 1000) {

    // 連想配列の場合
    if (typeof key === "string") {
      map = new Map(ary.map(o => [o[key], o]));
      result = Array.from(map.values());      
      
    } else {  // 配列の場合
      result = Array.from(new Set(ary));
    }
  } else {
    values = [];
    
    // 連想配列の場合
    if (typeof key === "string") {
      result = ary.filter(e => {
        if (values.indexOf(e[key]) === -1) {
          values.push(e[key]);
          return e;
        }
      });      
    } else {  // 配列の場合
      result = ary.filter(e => {
        if (values.indexOf(e) === -1) {
          values.push(e);
          return e;
        }
      });      
    }
  }
  return result;
}

let a = [];
let result;

a = [1, 2, 2, 3, 3, 4, 5, 1, 3, 5];
result = arrayDelDouble(a);
console.log(result);
// [1, 2, 3, 4, 5]

a = [{id: 1}, {id: 2}, {id: 2}, {id: 3}, {id: 4}, {id: 4}, {id: 1}, {id: 5}];
result = arrayDelDouble(a, "id");
console.log(result);
// [{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}]

ブラウザの処理速度も日進月歩で速くなっているだろうし、数少ない処理はそもそもの差がはっきり分かれるわけではないので、Map一択にしてしまっても問題ないかもと思いつつ、一応1000件で判別して処理を切り分けています。

複数キーの値の重複を削除したい場合

ちなみに、同名だけど電話番号違う場合は削除しない、というような複数キーの値が重複した場合のみ削除したいケースも備忘録として書き残しておく。

let delimiter = String.fromCharCode("31");
let arr = [
  {name: "aaa",tel: 123},
  {name: "aaa",tel: 123},
  {name: "ccc",tel: 123},
  {name: "ccc1",tel: 23},
];
let map = new Map(arr.map(o => [o.name + delimiter + o.tel, o]));

name: ccc, tel: 123 と name: ccc1, tel: 23 を同一と見なさないために、キーの値同士の間に、delimiterを追加しているのがポイント。 delimiter はデータ上で絶対使わない値であれば安心。