你可能不知道的JS數組去重方法

raise_yang 發布于2019-08-23 15:25 / 583人閱讀

摘要：利用的集合利用集合成員具有唯一值的特性，再借助將類數組轉為真正的數組我們可以很簡單的完成數組去重任務和的配合返回數組中某個指定的元素第一次出現的位置索引。

①利用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創建數組的方法你知道

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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