你可能不知道的JS数组去重方法

raise_yang 发布于2019-08-23 15:25 / 499人阅读

摘要：利用的集合利用集合成员具有唯一值的特性，再借助将类数组转为真正的数组我们可以很简单的完成数组去重任务和的配合返回数组中某个指定的元素第一次出现的位置索引。

①利用ES6的Set集合

利用ES6 Set集合成员具有唯一值的特性，再借助Array.from将类数组转为真正的数组
我们可以很简单的完成数组去重任务

let res = Array.from(new Set(arr));
let res = [... new Set(arr)];

②indexOf和filter的配合

indexOf()：
返回数组中某个指定的元素第一次出现的位置(索引)。如果在数组中没找到指定元素则返回 -1。
filter()：
返回指定数组中符合条件的所有元素
关键语句：

index === array.indexOf(ele)

我们利用indexOf得到的下标与当前元素的下标来判断这个元素是否是第一次出现，然后在利用filter的过滤特性即可。
这里需要注意的判断NaN，因为 NaN !== NaN,所以indexOf（NaN）始终返回-1，所以我们需要额外去判断

Array.prototype.uniq = function(){
    let flag = true;             // 定义标记用来判断NaN
    return this.filter((ele, index, array) => {
        if(flag && ele!==ele){
            flag = false;
            return true;
        }
        return index===array.indexOf(ele)
    })
}

③利用对象的键

核心：利用对象的键来存储我们的元素
如果没有对象中没有这个键，则进行存储,并设置这个键对应值为true，表明已经存在该元素

Array.prototype.uniq = function(){
    let hash = {};
    let data = [];
    this.forEach(ele => {
        if (!hash[ele])  {
            hash[ele] = true;
            data.push(ele);
        }    
    })
   return data;
}

注意：由于普通对象的键都是字符串，所以对于像 Number（1）和String（1）则视为它们是同一值，无法正确判断，对于引用类型的数据也是如此( 如 {} 和 {} 视为同一值)

解决办法：在ES6中提供了Map集合，Map的键不再局限于字符串，而是任意类型，可以说是一个完整的hash结构，利用Map替换普通对象{}则可以解决上面的问题

Array.prototype.uniq = function(){
    let map = new Map();
    let data = [];
    this.forEach(ele => {
        if(!map.get(ele)){
            map.set(ele, true);
            data.push(ele);
        }
    });
    return data;
}

④数组排序，比较相邻元素

在数组排序后，相同的数据会集中在一起，因此只需要比较相邻元素是否相等即可，
比较符可以用 严格比较运算符（===） 或者 Object.is()
它们不同之处只有两个：一是+0不等于-0，二是NaN等于自身。
所以对于NaN，如果使用===，则需要额外判断
根据如下方案，数组最后一个元素必然是唯一值，所以在循环后把末尾的元素添加进去

Array.prototype.uniq = function(){
    let res = [];
    let arr = this.sort();
    for(let i = 0; i < arr.length-2; i++){
        if(!Object.is(arr[i], arr[i+1])){
            res.push(arr[i])
        }
    }
    res.push(arr.pop());
    return res;
}

云服务器 GPU云服务器可能不知道地方 dns服务器可能不可用方法 [标签:标题] js创建数组的方法你知道

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

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

也谈JavaScript数组去重

摘要：昨天在微博上看到一篇文章，也写数组去重，主要推崇的方法是将利用数组元素当作对象来去重。我在微博转发了用对象去重不是个好办法然后作者问什么才是推荐的方法。实例对象实例对象主要指通过构造函数类生成的对象。本文同时发布于个人博客https://www.toobug.net/articl... JavaScript的数组去重是一个老生常谈的话题了。随便搜一搜就能找到非常多不同版本的解法。昨...

崔晓明 2019-08-21 15:03 评论0 收藏0
也谈面试必备问题之 JavaScript 数组去重

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

Coly 2019-08-21 10:51 评论0 收藏0
JS单行、多行文本字符去重和行去重

摘要：如有感兴趣，请自行查阅相关文档，进一步的了解前端的性能优化单行文本去重单行文本去重可兼容不支持接口的浏览器这里应该很好明白是在干什么吧需要传入一个初始空字符串参数，否则你将得到的是一个字符串被拆分后的数组。之前偶然看到一篇使用正则实现字符去重及多行去重的文章。感觉写的有点糙，而且性能也不够高，对新手的使用和理解都有一点难度。于是忍不住就搞了一个比较可爱的出来。而且不是一般的可爱，因为...

enrecul101 2019-08-23 13:56 评论0 收藏0
js基本操作-数组去重

摘要：基本操作数组去重写在前面数组去重经常出现在前端招聘的笔试题里，比如有数组，请用实现去重函数，使得返回作为笔试题，考点有二正确。基本介绍文章主要是对数组去重的常用方法进行介绍。 js基本操作-数组去重写在前面 JavaScript 数组去重经常出现在前端招聘的笔试题里，比如：有数组 var arr = [a, b, c, 1, 0, c, 1, , 1, 0]，请用 JavaScr...

blastz 2019-08-22 11:02 评论0 收藏0
数组去除重复项的方法你知道几种呢？

摘要：数组去重的方法第一种方法方法可以将结构转为数组这就是提供了一种数据去重的方法第二种方法运用扩展运算符提供了一种更便捷的去重方法第三种方法这是一种原生的去重方法，借助一个空数组来实现去重，便于理解底层原理函数带有参数第四种方法同上函数不带参数组去重的方法第一种方法 Array.from方法可以将Set结构转为数组 let items = new Set([1, 2, 3, 4, 5]...

tomato 2019-08-20 16:28 评论0 收藏0