九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
JavaScript數(shù)組去重(12種方法,史上最全)

腳本之家

你與百萬開發(fā)者在一起


數(shù)組去重,一般都是在面試的時(shí)候才會(huì)碰到,一般是要求手寫數(shù)組去重方法的代碼。如果是被提問到,數(shù)組去重的方法有哪些?你能答出其中的10種,面試官很有可能對(duì)你刮目相看。

在真實(shí)的項(xiàng)目中碰到的數(shù)組去重,一般都是后臺(tái)去處理,很少讓前端處理數(shù)組去重。雖然日常項(xiàng)目用到的概率比較低,但還是需要了解一下,以防面試的時(shí)候可能回被問到。

注:寫的匆忙,加上這幾天有點(diǎn)忙,還沒有非常認(rèn)真核對(duì)過,不過思路是沒有問題,可能一些小細(xì)節(jié)出錯(cuò)而已。

數(shù)組去重的方法

一、利用ES6 Set去重(ES6中最常用)

  1. function unique (arr) {

  2.  return Array.from(new Set(arr))

  3. }

  4. var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

  5. console.log(unique(arr))

  6. //[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {}, {}]

不考慮兼容性,這種去重的方法代碼最少。這種方法還無法去掉“{}”空對(duì)象,后面的高階方法會(huì)添加去掉重復(fù)“{}”的方法。

二、利用for嵌套for,然后splice去重(ES5中最常用)

  1. function unique(arr){            

  2.        for(var i=0; iarr.length; i++){

  3.            for(var j=i+1; jarr.length; j++){

  4.                if(arr[i]==arr[j]){         //第一個(gè)等同于第二個(gè),splice方法刪除第二個(gè)

  5.                    arr.splice(j,1);

  6.                    j--;

  7.                }

  8.            }

  9.        }

  10. return arr;

  11. }

  12. var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

  13.    console.log(unique(arr))

  14.    //[1, 'true', 15, false, undefined, NaN, NaN, 'NaN', 'a', {…}, {…}]     //NaN和{}沒有去重,兩個(gè)null直接消失了

雙層循環(huán),外層循環(huán)元素,內(nèi)層循環(huán)時(shí)比較值。值相同時(shí),則刪去這個(gè)值。
想快速學(xué)習(xí)更多常用的ES6語法,可以看我之前的文章《學(xué)習(xí)ES6筆記──工作中常用到的ES6語法》。

三、利用indexOf去重

  1. function unique(arr) {

  2.    if (!Array.isArray(arr)) {

  3.        console.log('type error!')

  4.        return

  5.    }

  6.    var array = [];

  7.    for (var i = 0; i arr.length; i++) {

  8.        if (array .indexOf(arr[i]) === -1) {

  9.            array .push(arr[i])

  10.        }

  11.    }

  12.    return array;

  13. }

  14. var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

  15. console.log(unique(arr))

  16.   // [1, 'true', true, 15, false, undefined, null, NaN, NaN, 'NaN', 0, 'a', {…}, {…}]  //NaN、{}沒有去重

新建一個(gè)空的結(jié)果數(shù)組,for 循環(huán)原數(shù)組,判斷結(jié)果數(shù)組是否存在當(dāng)前元素,如果有相同的值則跳過,不相同則push進(jìn)數(shù)組。

四、利用sort()

  1. function unique(arr) {

  2.    if (!Array.isArray(arr)) {

  3.        console.log('type error!')

  4.        return;

  5.    }

  6.    arr = arr.sort()

  7.    var arrry= [arr[0]];

  8.    for (var i = 1; i arr.length; i++) {

  9.        if (arr[i] !== arr[i-1]) {

  10.            arrry.push(arr[i]);

  11.        }

  12.    }

  13.    return arrry;

  14. }

  15.     var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

  16.        console.log(unique(arr))

  17. // [0, 1, 15, 'NaN', NaN, NaN, {…}, {…}, 'a', false, null, true, 'true', undefined]      //NaN、{}沒有去重

利用sort()排序方法,然后根據(jù)排序后的結(jié)果進(jìn)行遍歷及相鄰元素比對(duì)。

五、利用對(duì)象的屬性不能相同的特點(diǎn)進(jìn)行去重

  1. function unique(arr) {

  2.    if (!Array.isArray(arr)) {

  3.        console.log('type error!')

  4.        return

  5.    }

  6.    var arrry= [];

  7.     var  obj = {};

  8.    for (var i = 0; i arr.length; i++) {

  9.        if (!obj[arr[i]]) {

  10.            arrry.push(arr[i])

  11.            obj[arr[i]] = 1

  12.        } else {

  13.            obj[arr[i]]++

  14.        }

  15.    }

  16.    return arrry;

  17. }

  18.    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

  19.        console.log(unique(arr))

  20. //[1, 'true', 15, false, undefined, null, NaN, 0, 'a', {…}]    //兩個(gè)true直接去掉了,NaN和{}去重

六、利用includes

  1. function unique(arr) {

  2.    if (!Array.isArray(arr)) {

  3.        console.log('type error!')

  4.        return

  5.    }

  6.    var array =[];

  7.    for(var i = 0; i arr.length; i++) {

  8.            if( !array.includes( arr[i]) ) {//includes 檢測數(shù)組是否有某個(gè)值

  9.                    array.push(arr[i]);

  10.              }

  11.    }

  12.    return array

  13. }

  14. var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

  15.    console.log(unique(arr))

  16.    //[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {…}, {…}]     //{}沒有去重

七、利用hasOwnProperty

  1. function unique(arr) {

  2.    var obj = {};

  3.    return arr.filter(function(item, index, arr){

  4.        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)

  5.    })

  6. }

  7.    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

  8.        console.log(unique(arr))

  9. //[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {…}]   //所有的都去重了

利用hasOwnProperty 判斷是否存在對(duì)象屬性

八、利用filter

  1. function unique(arr) {

  2.  return arr.filter(function(item, index, arr) {

  3.    //當(dāng)前元素,在原始數(shù)組中的第一個(gè)索引==當(dāng)前索引值,否則返回當(dāng)前元素

  4.    return arr.indexOf(item, 0) === index;

  5.  });

  6. }

  7.    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

  8.        console.log(unique(arr))

  9. //[1, 'true', true, 15, false, undefined, null, 'NaN', 0, 'a', {…}, {…}]

九、利用遞歸去重

  1. function unique(arr) {

  2.        var array= arr;

  3.        var len = array.length;

  4.    array.sort(function(a,b){   //排序后更加方便去重

  5.        return a - b;

  6.    })

  7.    function loop(index){

  8.        if(index >= 1){

  9.            if(array[index] === array[index-1]){

  10.                array.splice(index,1);

  11.            }

  12.            loop(index - 1);    //遞歸loop,然后數(shù)組去重

  13.        }

  14.    }

  15.    loop(len-1);

  16.    return array;

  17. }

  18. var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

  19. console.log(unique(arr))

  20. //[1, 'a', 'true', true, 15, false, 1, {…}, null, NaN, NaN, 'NaN', 0, 'a', {…}, undefined]

十、利用Map數(shù)據(jù)結(jié)構(gòu)去重

  1. function arrayNonRepeatfy(arr) {

  2.  let map = new Map();

  3.  let array = new Array();  // 數(shù)組用于返回結(jié)果

  4.  for (let i = 0; i arr.length; i++) {

  5.    if(map .has(arr[i])) {  // 如果有該key值

  6.      map .set(arr[i], true);

  7.    } else {

  8.      map .set(arr[i], false);   // 如果沒有該key值

  9.      array .push(arr[i]);

  10.    }

  11.  }

  12.  return array ;

  13. }

  14. var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

  15.    console.log(unique(arr))

  16. //[1, 'a', 'true', true, 15, false, 1, {…}, null, NaN, NaN, 'NaN', 0, 'a', {…}, undefined]

創(chuàng)建一個(gè)空Map數(shù)據(jù)結(jié)構(gòu),遍歷需要去重的數(shù)組,把數(shù)組的每一個(gè)元素作為key存到Map中。由于Map中不會(huì)出現(xiàn)相同的key值,所以最終得到的就是去重后的結(jié)果。

十一、利用reduce+includes

  1. function unique(arr){

  2.    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);

  3. }

  4. var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];

  5. console.log(unique(arr));

  6. // [1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {…}, {…}]

十二、[...new Set(arr)]

  1. [...new Set(arr)]

  2. //代碼就是這么少----(其實(shí),嚴(yán)格來說并不算是一種,相對(duì)于第一種方法來說只是簡化了代碼)

PS:有些文章提到了foreach+indexOf數(shù)組去重的方法,個(gè)人覺得都是大同小異,所以沒有寫上去。 END

作者:沉靜地閃光
https://segmentfault.com/a/1190000016418021

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
JavaScrip數(shù)組去重操作實(shí)例小結(jié)
js 基礎(chǔ)
Javascript的10個(gè)設(shè)計(jì)缺陷
JavaScript 新手的踩坑日記
JavaScript權(quán)威指南第6版
jQuery數(shù)據(jù)類型
更多類似文章 >>
生活服務(wù)
熱點(diǎn)新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服