最全的數(shù)組去重方法對(duì)比

BlackHole1 發(fā)布于2019-08-19 18:44 / 3202人閱讀

摘要：本文最早發(fā)布于，為原創(chuàng)常規(guī)方法兩種數(shù)組深拷貝，為不了影響原來(lái)的數(shù)組第一種方法常用但是有坑碰到這種情況就出問(wèn)題了第二種方法使用，方法返回的結(jié)果并不一定是升序，主要目的是將重復(fù)的數(shù)字排到一起使用的方法兩種簡(jiǎn)潔優(yōu)雅版奇技淫巧更新看到評(píng)論

本文最早發(fā)布于csdn，為原創(chuàng)

常規(guī)方法兩種

let json = arr => {
    let res = [],
        obj = {};
    arr.forEach(value => {
        let key = typeof(value) + value;
        !obj.hasOwnProperty(key) && (res.push(value), obj[key] = 1);
    })
    return res;
}

let sort = arr => {
    //數(shù)組深拷貝，為不了影響原來(lái)的數(shù)組
    let newArr = arr.concat();
    newArr.sort();
    for (var i = newArr.length; i > 0; i--) {
        if ( newArr[i] === newArr[ i - 1 ] ) { // use == if "2" eq 2, else ===
            newArr.splice( i, 1 );
        }
    }
    return newArr;
}

第一種方法常用但是有坑

console.log(unique([ new String(1), new Number(1) ]))
//[String]0: String0: "1"length: 1__proto__: String[[PrimitiveValue]]: "1"length: 1__proto__:Array[0]

碰到這種情況就出問(wèn)題了

第二種方法使用sort，sort方法返回的結(jié)果并不一定是升序，主要目的是將重復(fù)的數(shù)字排到一起

使用ES5的indexOf方法兩種

let foreach = arr => {
    arr.forEach(value => {
        res.indexOf(value) == -1 && res.push(value);
    }, res = [])
}
let unique = arr => {
    let res = [];
    arr.forEach(function(value) {
        (res.indexOf(value) == -1) && res.push(value);
    })
    return res;
}
let arr = [1, 1, 2, 2];
unique3(arr);
console.log(res);

簡(jiǎn)潔優(yōu)雅版

let filter = arr => { return arr.filter(function (value, index, array) { return index <= array.indexOf(value);}); };

es6奇技淫巧

2016.7.7更新
看到評(píng)論提醒的方法

let array = Array.from(new Set([1, 1, 1, 2, 3, 2, 4]));
console.log(array);
// => [1, 2, 3, 4]

補(bǔ)充說(shuō)明，from方法現(xiàn)在瀏覽器支持程度不太好，另外經(jīng)測(cè)試，性能也不具有優(yōu)勢(shì)

性能對(duì)比

2016.7.12更新，最近發(fā)現(xiàn)了一篇文章進(jìn)行性能測(cè)試，覺(jué)得很贊，以后測(cè)性能就用這個(gè)了
benchmark地址

let benchmark = require("benchmark");
let suit = new benchmark.Suite;
let arr = [1, 1, 1, 2, 3, 2, 4];
let es6 = arr => {
    let array = Array.from(new Set(arr));
};

let filter = arr => { 
    arr.filter((value, index, array) => { return index <= array.indexOf(value);}); 
};

let json = arr => {
    let res = [],
        obj = {};
    arr.forEach(value => {
        let key = typeof(value) + value;
        !obj.hasOwnProperty(key) && (res.push(value), obj[key] = 1);
    })
    return res;
}

let sort = arr => {
    //數(shù)組深拷貝，為不了影響原來(lái)的數(shù)組
    let newArr = arr.concat();
    newArr.sort();
    for (var i = newArr.length; i > 0; i--) {
        if ( newArr[i] === newArr[ i - 1 ] ) { // use == if "2" eq 2, else ===
            newArr.splice( i, 1 );
        }
    }
    return newArr;
}

let foreach = arr => {
    arr.forEach(value => {
        res.indexOf(value) == -1 && res.push(value);
    }, res = [])
}

suit.add("es6", function() {
    es6(arr);
}).add("filter", function() {
    filter(arr);
}).add("json", function() {
    json(arr);
}).add("sort", function() {
    sort(arr);
}).add("foreach", function() {
    foreach(arr);
}).on("cycle", function(event) {
    console.log(String(event.target));
}).on("complete", function() {
    console.log("Fastest is " + this.filter("fastest").map("name") + "
 slowest is " + this.filter("slowest").map("name"));
}).run({"async": true});

在teminal運(yùn)行node test.js得到如下結(jié)果

$ node 數(shù)組去重方法及對(duì)比.js
es6 x 275,353 ops/sec ±4.87% (63 runs sampled)
filter x 703,449 ops/sec ±1.49% (89 runs sampled)
json x 238,876 ops/sec ±5.24% (72 runs sampled)
sort x 217,857 ops/sec ±4.58% (64 runs sampled)
foreach x 915,368 ops/sec ±3.84% (65 runs sampled)
Fastest is foreach
slowest is sort

總結(jié)

以上所有方法都不會(huì)出現(xiàn)將1和"1"視作一起去重的情況，除開(kāi)第一種，其他的方法也能區(qū)分開(kāi)[new String(1), new Number(1)],這里的方法已經(jīng)是比較全，和其他博客比起來(lái)只有一些實(shí)現(xiàn)上的差異，總體方法思想是一樣的

參考資料

一行代碼實(shí)現(xiàn)數(shù)組去重（ES6）
從 JavaScript 數(shù)組去重談性能優(yōu)化
js對(duì)象的hasOwnProperty為什么比數(shù)組的indexof方法在性能上高的多？
使用Benchmark.js和jsPerf分析代碼性能
源代碼github地址

GPU云服務(wù)器云服務(wù)器數(shù)組的值去重php js對(duì)比數(shù)組的值 php 對(duì)比數(shù)組的值數(shù)組去重

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79933.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

BlackHole1

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#閃購(gòu)#RackNerd：4核8G內(nèi)存100G SSD硬盤(pán)5TB流量，$89/年，洛杉磯DC02機(jī)房

閱讀 2612·2021-09-24 10:29
怎么創(chuàng)建虛擬主機(jī)-如何創(chuàng)建虛擬主機(jī)？

閱讀 3894·2021-09-22 15:46
操作符sizeof與函數(shù)strlen哪些事

閱讀 2632·2021-09-04 16:41
前端每日實(shí)戰(zhàn)：56# 視頻演示如何用純 CSS 描述程序員的生活

閱讀 3039·2019-08-30 15:53
移動(dòng)端項(xiàng)目的注意點(diǎn)

閱讀 1329·2019-08-30 14:24
JavaScript實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)

閱讀 3117·2019-08-30 13:19
CSS中選擇器的權(quán)重值

閱讀 2237·2019-08-29 14:17
使用jQuery監(jiān)聽(tīng)掃碼槍輸入并禁止手動(dòng)輸入的實(shí)現(xiàn)方法

閱讀 3584·2019-08-29 12:55

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

最全的數(shù)組去重方法對(duì)比

相關(guān)文章

JavaScript數(shù)組去重（12種方法，史上最全）

**好像不是最全的數(shù)組去重方法**

js數(shù)組去重的幾種方法

***數(shù)組去重的各種方法速度對(duì)比***

史上最全的 Python 3 類(lèi)型轉(zhuǎn)換指南

發(fā)表評(píng)論

0條評(píng)論

BlackHole1

男|高級(jí)講師

TA的文章

#閃購(gòu)#RackNerd：4核8G內(nèi)存100G SSD硬盤(pán)5TB流量，$89/年，洛杉磯DC02機(jī)房

怎么創(chuàng)建虛擬主機(jī)-如何創(chuàng)建虛擬主機(jī)？

操作符sizeof與函數(shù)strlen哪些事

前端每日實(shí)戰(zhàn)：56# 視頻演示如何用純 CSS 描述程序員的生活

移動(dòng)端項(xiàng)目的注意點(diǎn)

JavaScript實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)

CSS中選擇器的權(quán)重值

使用jQuery監(jiān)聽(tīng)掃碼槍輸入并禁止手動(dòng)輸入的實(shí)現(xiàn)方法

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

最全的數(shù)組去重方法對(duì)比

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！