8 种常用数组去重

第一种 【两个 for 循环】

思路：

1. 新建一个为空的结果数组
2. 外层 for 遍历原数组，内层循环遍历返回数组
3. 判断内层循环数组当前元素和外层数组元素的值是否相等，是？退出内层循环
4. 经过第二部后，此时内层循环数组的索引值和返回数组的长度正好相等，外层数组元素也是唯一的。

/** * 【1】2个for循环去重 * * @param {any} arr * @returns [1, 2, 13, 3, "1", "2"] */function unique1(arr) {  //返回数组  var arr2 = [];  for (var i = 0; i < arr.length; i++) {    for (var j = 0; j < arr2.length; j++) {      //返回数组和操作数组的值相等，结束循环，此时的j值刚好和返回数组的长度相等      if (arr2[j] === arr[i]) {        break;      }    }    //返回数组和j值相等，则插入该值    if (arr2.length === j) {      arr2.push(arr[i]);    }  }  return arr2;}

第二种 【indexOf 数组去重】

思路：

1. 新建一个空的结果数组
2. for 循环原数组
3. 判断结果数组是否存在当前元素，存在不作操作，不存在压入结果数组

/** * 【2】indexOf数组去重 * * @param {any} arr * @returns [1, 2, 13, 3, "1", "2"] */function unique2(arr) {  //返回的数组  var arr2 = [];  for (var i = 0; i < arr.length; i++) {    //判断arr2中是否存在arr[i]值，存在不作任何操作，不存在插入该值    if (arr2.indexOf(arr[i], 0) === -1) {      arr2.push(arr[i]);    }  }  return arr2;}

第三种 【filter 去重】

思路：

1. 使用 filter 返回一个新数组
2. 返回满足：当前元素在原数组中的第一个索引等于当前索引值，则返回当前元素

/** * 【3】filter去重【filter返回一个新数组】 * * @param {any} arr * @returns [1, 2, 13, 3, "1", "2"] */function unique3(arr) {  return arr.filter(function(item, index, arr) {    //如果当前元素在原数组中的第一个索引等于当前索引值，则返回当前元素    return arr.indexOf(item, 0) === index;  });}

第四种 【先排序后去重】

思路：

1. 新建一个空的结果数组
2. 对原数组先排序，排序后的数组，相等元素紧邻排序
3. 判断相邻数组元素是否相等或者是否为第一个数组元素，是压入结果数组

/** * 【4】先排序后去重 * * @param {any} arr * @returns ["1", 1, 13, "2", 2, 3] */function unique4(arr) {  //数组排序  var arr = arr.sort();  //结果数组  var arr2 = [];  for (var i = 0; i < arr.length; i++) {    //第一个数组或者先一个数组值不等于当前数组值，插入该元素    if (i < 1 || arr[i - 1] !== arr[i]) {      arr2.push(arr[i]);    }  }  return arr2;}

第五种 【sort+filter】

思路：思路就是对第三和第四种方法的结合啦，道理一样。

/** * 【5】sort+filter优化【4】方法 * * @param {any} arr * @returns ["1", 1, 13, "2", 2, 3] */function unique5(arr) {  return arr.sort().filter(function(item, index, arr) {    return item < 1 || arr[index - 1] !== arr[index];  });}

第六种 【hasOwnProperty】

思路：这种方法主要是利用对象 hasOwnProperty 判断是否存在对象属性

/** * 【6】hasOwnProperty【利用：hasWonProperty判断对象中是否存在对应属性，存在返回true否则返回false】 * * @param {any} arr * @returns [1, 2, 13, 3] */function unique6(arr) {  //创建对象  var obj = {};  return arr.filter(function(item, index, arr) {    //判断对象是否存在元素，存在给对象赋值，否则返回false    return obj.hasOwnProperty(item) ? false : (obj[item] = item);  });}

第七种 【利用 es6 的 new set()方法】

思路：利用【new Set(数组)说明：它时一个类数组方法，但是其成员值都是唯一的；Array.from()可以蒋其他对象转化为数组】

/** * 【7】es6的new set() * * @param {any} arr * @returns [1, 2, 13, 3, "1", "2"] */function unique7(arr) {  return Array.from(new Set(arr));}

第八种 【new Set 和 es6 的...运算符】

/** * 【8】蒋【7】采用...操作符重写 * * @param {any} arr * @returns [1, 2, 13, 3, "1", "2"] */function unique(arr) {  return [...new Set(arr)];}

好了，写完后验证一下是否正确：

window.onload = function() {  var arr = [1, 2, 13, 1, 2, 3, '1', '2'];  console.log(unique(arr));};

上面的每个方法的返回值就是调用当前方法时，返回值。

源码地址：