快捷導(dǎo)航

Javascript數(shù)組去重的幾種方法詳解

更新時(shí)間：2021年09月26日 16:22:45 投稿：BJT

下面小編就為大家?guī)硪黄狫avascript數(shù)組去重的幾種方法詳?shù)慕榻B。小編覺得聽錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看

數(shù)組去重

1 雙層for循環(huán)（類似冒泡排序的雙層循環(huán)寫法）

var arr = [2,3,4,2,34,21,1,12,3,4,1]
for(var i =0;i<arr.length;i++){
    //第一層：每次循環(huán)拿到arr中一個(gè)元素
	for(var j=i+1;j<arr.length;j++){
        //第二層：每次拿到的元素再和每次拿到的元素后邊的元素依次進(jìn)行比對（因?yàn)榈谝粋€(gè)要從第二個(gè)開始比，第二個(gè)要從第三個(gè)比以此類推，所以這里的j應(yīng)比i大1為j=i+1）
    	if(arr[i] === arr[j]){
            //如果相同就刪除后邊的元素
        	arr.splice(j,1)
    	}
    }
}
//arr:[1, 2, 3, 4, 12, 21, 34]

2 循環(huán)和indexof、循環(huán)和includes

創(chuàng)建新數(shù)組，循環(huán)舊數(shù)組，看每次循環(huán)的元素是否存在于新數(shù)組中沒有就把當(dāng)前元素添加到新數(shù)組中

//indexof
var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = []
arr.forEach((e)=>{
    if(arr2.indexOf(e)==-1){
        arr2.push(e)
    }
})
console.log(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]

//includes
var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = []
arr.forEach((e)=>{
    if(!arr2.includes(e)){
        arr2.push(e)
    }
})
console.log(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]

3 利用對象屬性不能重復(fù)去重

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var obj = {};
arr.forEach((e,i)=>{
    obj[arr[i]] = "abc";   
});
var arr2=Object.keys(obj)
console.log(arr2)
//arr2:["1", "2", "3", "4", "12", "21", "34"]
var arr3 = arr2.map(e => ~~e )
//arr3:[1, 2, 3, 4, 12, 21, 34]
//注意這種方法不僅給數(shù)組重新排列而且還改變了數(shù)組中元素的類型

~是js里的按位取反操作符，~~就是執(zhí)行兩次按位取反，其實(shí)就是保持原值，但是注意雖然是原值，但是對布爾型變量執(zhí)行這個(gè)操作，會轉(zhuǎn)化成相應(yīng)的數(shù)值型變量，也就是 ~~true === 1，~~false === 0。

4 ES6 Set

ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr1 = [...new Set(arr)]
console.log(arr1)
//arr1:[1, 2, 3, 4, 12, 21, 34]

5 ES6 Array. prototype.filter()

注：indexOf在數(shù)組中找元素的時(shí)候，碰到符合條件的第一個(gè)就會把它的下標(biāo)返回

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = arr.filter((e,i)=>{
    //看每次循環(huán)的元素在數(shù)組中出現(xiàn)的第一個(gè)下標(biāo)位置（indexOf返回的位置），和每次循環(huán)的元素的下標(biāo)（filter循環(huán)每次的i）是否一致，一致就說明他就是第一個(gè)符合條件，不會被過濾掉。
    return arr.indexOf(e)==i;
})
console.log(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]

6 ES6 Array. prototype.reduce()

var arr = [2,3,4,2,34,21,1,12,3,4,1]
var arr2 = arr.reduce((pre,e)=>{
    //這里當(dāng)然也可以用indexOf來判斷是否存在
    pre.includes(e)?pre:pre.push(e);
    return pre
},[])
console.log(arr2)
//arr2:[1, 2, 3, 4, 12, 21, 34]