关于javascript:11种前端数据去重方式你都知道吗

本文总结了 JavaScript 去重的多种形式，各有优缺点，依据需要正当应用吧。

• 应用 for 循环和 indexOf 办法，复杂度 O(n^2)

function uniqueArray(arr) {const result = []
  for (let i = 0; i < arr.length; i++) {if (result.indexOf(arr[i]) === -1) {result.push(arr[i])
    }
  }
  return result
}

• 应用 for 循环和对象，复杂度 O(n^2)

function uniqueArray(arr) {const result = []
  const obj = {}
  for (let i = 0; i < arr.length; i++) {if (!obj[arr[i]]) {result.push(arr[i])
      obj[arr[i]] = true
    }
  }
  return result
}

• 应用 filter 办法和 indexOf 办法，复杂度 O(n^2)

function uniqueArray(arr) {return arr.filter((item, index, arr) => arr.indexOf(item) === index)
}

• 应用 filter 办法和对象，复杂度 O(n)

function uniqueArray(arr) {const obj = {}
  return arr.filter((item) => obj.hasOwnProperty(item) ? false : (obj[item] = true))
}

• 应用 Set 数据结构，复杂度 O(n)

function uniqueArray(arr) {return Array.from(new Set(arr))
}

// 应用解构 + Set
function uniqueArray(arr) {return [...new Set(arr)]
}

• 应用 Map 数据结构，复杂度 O(n)

function uniqueArray(arr) {const map = new Map();
  const result = [];
  for (let i = 0; i < arr.length; i++) {if (!map.has(arr[i])) {map.set(arr[i], true);
      result.push(arr[i]);
    }
  }
  return result;
}

// or
function uniqueArray(arr) {const map = new Map();
  return arr.filter(function(item) {return !map.has(item) && map.set(item, true);
  });
}

• 应用双重循环和 splice 办法，复杂度 O(n^2)

function uniqueArray(arr) {for (var i = 0; i < arr.length; i++) {for (var j = i + 1; j < arr.length; j++) {if (arr[i] === arr[j]) {arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

• 应用排序和双指针

应用排序和双指针能够实现 O(nlogn) 的工夫复杂度。先对数组进行排序，而后应用双指针遍历数组，如果左指针和右指针指向的值雷同，就把右指针向右挪动，直到找到不同的值，而后把左指针向右挪动，持续遍历。

function uniqueArray(arr) {arr.sort();
  var left = 0, right = 1;
  var result = [];
  while (right <= arr.length) {if (arr[left] === arr[right]) {right++;} else {result.push(arr[left]);
      left = right;
      right++;
    }
  }
  return result;
}

• 应用 reduce 办法和 includes，复杂度 O(n^2)

function uniqueArray(arr) {return arr.reduce(function(prev, cur) {if (!prev.includes(cur)) {prev.push(cur);
    }
    return prev;
  }, []);
}

• 应用递归和 includes，复杂度 O(n^2)

function uniqueArray(arr) {if (arr.length === 1) {return arr;} else {const first = arr[0];
    const rest = uniqueArray(arr.slice(1));
    if (rest.includes(first)) {return rest;} else {return [first].concat(rest);
    }
  }
}

• 双层循环，复杂度 O(n^2)

function uniqueArray(arr) {var result = [];
  for (var i = 0; i < arr.length; i++) {for (var j = 0; j < result.length; j++) {if (arr[i] === result[j]) {break;}
    }
    if (j === result.length) {result.push(arr[i]);
    }
  }
  return result;
}