8种常用数组去重方法

vibiu 发布于2019-08-22 16:05 / 1907人阅读

摘要：种常用数组去重第一种两个循环思路新建一个为空的结果数组外层遍历原数组，内层循环遍历返回数组判断内层循环数组当前元素和外层数组元素的值是否相等，是退出内层循环经过第二部后，此时内层循环数组的索引值和返回数组的长度正好相等，外层数组元素也是唯一

8 种常用数组去重 第一种【两个 for 循环】

思路：

新建一个为空的结果数组

外层 for 遍历原数组，内层循环遍历返回数组

判断内层循环数组当前元素和外层数组元素的值是否相等，是？退出内层循环

经过第二部后，此时内层循环数组的索引值和返回数组的长度正好相等，外层数组元素也是唯一的。

/**
 * 【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 数组去重】

思路：

新建一个空的结果数组

for 循环原数组

判断结果数组是否存在当前元素，存在不作操作，不存在压入结果数组

/**
 * 【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 去重】

思路：

使用 filter 返回一个新数组

返回满足：当前元素在原数组中的第一个索引等于当前索引值，则返回当前元素

/**
 * 【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;
  });
}

第四种【先排序后去重】

思路：

新建一个空的结果数组

对原数组先排序，排序后的数组，相等元素紧邻排序

判断相邻数组元素是否相等或者是否为第一个数组元素，是压入结果数组

/**
 * 【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));
};

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

源码地址：https://github.com/wqb2017/bo...

超融合服务器私有云 16种常用的数据分析方法汇总数组去重数组去重二维数组去重

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94037.html

也谈面试必备问题之 JavaScript 数组去重

摘要：而数组元素去重是基于运算符的。而如果有迭代函数，则计算传入迭代函数后的值，对值去重，调用方法，而该方法的核心就是调用方法，和我们上面说的方法一异曲同工。 Why underscore （觉得这部分眼熟的可以直接跳到下一段了...）最近开始看 underscore.js 源码，并将 underscore.js 源码解读放在了我的 2016 计划中。阅读一些著名框架类库的源码，就好像...

Coly 2019-08-21 10:51 评论0 收藏0
JavaScript数组去重（12种方法，史上最全）

摘要：数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些你能答出其中的种，面试官很有可能对你刮目相看。数组去重的方法一利用去重中最常用不考虑兼容性，这种去重的方法代码最少。数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的10种，面试官很有可能对你刮目相看...

rozbo 2019-08-23 12:01 评论0 收藏0
前端常用代码片段(四)

摘要：尽量避免使用表达式又称动态属性。使用计算数组中的重复项如果你想计算数组中的每个值有多少重复值，也可以快速帮到你。前端常用代码片段(一) 点这里前端常用代码片段(二) 点这里前端常用代码片段(三) 点这里前端常用代码片段(四) 点这里前端常用代码片段(五) 点这里前端常用代码片段(六) 点这里 1.简述一下你对HTML语义化的理解？并写出一段语义化的HTML？语义化是指根据内容的结...

worldligang 2019-08-23 14:41 评论0 收藏0
JS数组去重总结

摘要：数组去重，一般会在面试的时候才会碰到，要求手写数组去重方法的代码。在实际项目中碰到的数组去重，一般都是后台去处理，很少让前端处理数组去重。数组去重的方法一利用去重中最常用如果不考虑兼容性，这种去重的方法代码最少。数组去重，一般会在面试的时候才会碰到，要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的10种，面试官很有可能对你刮目相看。在实际项目中碰到的...

whinc 2019-08-02 16:09 评论0 收藏0
JS数组去重总结

摘要：数组去重，一般会在面试的时候才会碰到，要求手写数组去重方法的代码。在实际项目中碰到的数组去重，一般都是后台去处理，很少让前端处理数组去重。数组去重的方法一利用去重中最常用如果不考虑兼容性，这种去重的方法代码最少。数组去重，一般会在面试的时候才会碰到，要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的10种，面试官很有可能对你刮目相看。在实际项目中碰到的...

LiveVideoStack 2019-08-05 16:35 评论0 收藏0