溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

JavaScript中數(shù)組去重的方法

發(fā)布時(shí)間：2020-07-06 10:58:27 來(lái)源：億速云 閱讀：119 作者：清晨 欄目：開(kāi)發(fā)技術(shù)

小編給大家分享一下JavaScript中數(shù)組去重的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

正常情況下，數(shù)據(jù)去重的工作一般都是由后端同事來(lái)完成的，但是前端也要掌握好處理數(shù)據(jù)的能力，萬(wàn)一去重的工作交給我們大前端處理，我們也不能慫呀。現(xiàn)在我總結(jié)了一些去重的方法，希望對(duì)大家有點(diǎn)幫助。

方法一：new Set()實(shí)現(xiàn)數(shù)組去重

ES6 提供了新的數(shù)據(jù)結(jié)構(gòu) Set，它類(lèi)似于數(shù)組，但是成員的值都是唯一的，沒(méi)有重復(fù)的值。 Set 本身是一個(gè)構(gòu)造函數(shù)，用來(lái)生成 Set 數(shù)據(jù)結(jié)構(gòu)。Set函數(shù)可以接受一個(gè)數(shù)組，用于初始化。根據(jù) Set的數(shù)據(jù)特性，我們可以實(shí)現(xiàn)數(shù)組去重。

let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
let list1 = Array.from(new Set(list)); // [ 1, "a", true, false, null, "", undefined ]
let list2 = [...new Set(list)]; // [ 1, "a", true, false, null, "", undefined ]

方法二：some()+循環(huán)去重

some() 方法用于檢測(cè)數(shù)組中的元素是否滿(mǎn)足指定條件（函數(shù)提供） 。 如果有一個(gè)元素滿(mǎn)足條件，則表達(dá)式返回true , 剩余的元素不會(huì)再執(zhí)行檢測(cè)。 如果沒(méi)有滿(mǎn)足條件的元素，則返回false。 我們可以定義一個(gè)新數(shù)組來(lái)承接沒(méi)有重復(fù)的數(shù)據(jù)，遍歷原始數(shù)組的時(shí)候，用新數(shù)組來(lái)判斷數(shù)據(jù)是否已經(jīng)出現(xiàn)過(guò)。

 function distinct(list) {
   let result = [list[0]];// 用于承接沒(méi)有重復(fù)的數(shù)據(jù)，初始時(shí)將原始數(shù)組的第一個(gè)值賦給它。
   for (let i = 1; i < list.length; i++) {
     // 判斷結(jié)果數(shù)組中是否存在一樣的值，若果沒(méi)有的話(huà)則將數(shù)據(jù)存入結(jié)果數(shù)組中。
     if (!(result.some(val => list[i] === val))) {
       result.push(list[i]);
     }
   }
   return result;
 }
let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
distinct(arr); // [ 1, "a", true, false, null, "", undefined ]

方法三：雙重for循環(huán)去重

雙重for循環(huán)，第一層循環(huán)確保數(shù)組中的每一項(xiàng)都能被比較，第二層循環(huán)確保被比較項(xiàng)后的每一項(xiàng)都能跟被比較項(xiàng)比較。

function distinct2(list) {
  for (let i = 0; i < list.length; i++) {
    for (let j = i + 1; j < list.length; j++) {
      // 后面數(shù)據(jù)的若跟前一項(xiàng)數(shù)據(jù)相同，則重復(fù)，需要去除。
      if (list[i] === list[j]) {
        list.splice(j, 1); // 去除后面的相同項(xiàng)
        j--;
      }
    }
  }
  return list;
}
let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
distinct2(arr); // [ 1, "a", true, false, null, "", undefined ]

方法四：hasOwnProperty()方法去重

hasOwnProperty() 方法用來(lái)檢測(cè)一個(gè)屬性是否是對(duì)象的自有屬性，而不是從原型鏈繼承的。如果該屬性是自有屬性，那么返回 true，否則返回 false。

function unique(arr) {
 var obj = {}; // 用來(lái)記錄數(shù)組中的數(shù)據(jù)
 return arr.filter(function(item, index, arr){
   // 如果記錄對(duì)象中存在某個(gè)數(shù)據(jù)，則返回false過(guò)濾掉；否則obj進(jìn)行記錄并篩選出來(lái)
   return obj.hasOwnProperty(typeof item + item) &#63; false : (obj[typeof item + item] = true)
 })
}
let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
unique(arr) // [ 1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, 'a', {}]

方法五：利用filter()+indexOf()方法去重

indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。

function unique(arr) {
 return arr.filter(function(item, index, arr) {
  // 從數(shù)組0位開(kāi)始查，如果當(dāng)前元素在原始數(shù)組中的第一個(gè)索引==當(dāng)前索引值，說(shuō)明它是第一次出現(xiàn)。
  return arr.indexOf(item, 0) === index;
 });
}
let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
unique(list); // [ 1, "a", true, false, null, "", undefined ]

此外，數(shù)組去重還可以利用filter()、includes()等方法實(shí)現(xiàn)，但是思路都跟上面幾種方法類(lèi)似，這里就不一一列舉了。

看完了這篇文章，相信你對(duì)JavaScript中數(shù)組去重的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手