快捷導(dǎo)航

JavaScript數(shù)組去重的15種方法總結(jié)

更新時(shí)間：2025年05月06日 11:13:00 作者：胖方Hale

這篇文章主要介紹了JavaScript數(shù)組去重的15種方法,包括利用ES6 Set、filter、reduce、Map對(duì)象、sort等,適合在面試中展示,需要的朋友可以參考下

前言
1. 利用 ES6 SET 去重(最常用)
2. 使用 fliter 方法
3. 使用 reduce 方法
4. 使用 Map 對(duì)象
5. 使用 sort 方法
6. 使用 includes 方法
7. 使用 indexof() 方法
8. 使用 for …of 循環(huán)
9. 使用 for…in 循環(huán)
10. 使用 white 循環(huán)
11. 使用 do…while 循環(huán)
12. 使用 forEach 方法
13. 使用 map 方法
14. 利用遞歸去重
總結(jié)

前言

數(shù)組去重，一般都是在面試的時(shí)候才會(huì)碰到，一般是要求手寫數(shù)組去重方法的代碼。如果是被提問到，數(shù)組去重的方法有哪些？你能答出其中的 10 種，面試官很有可能對(duì)你刮目相看。一般工作只需要記住使用 SET 和遞歸就夠用了。

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

能力有限，但還是盡力想去做到最好。如果文檔內(nèi)容對(duì)你有一點(diǎn)幫助，請(qǐng)幫忙點(diǎn)一個(gè)免費(fèi)的贊和關(guān)注??‍??‍??‍，這樣我就能得到更多分享的機(jī)會(huì)，多多給大家分享。萬分感謝

1. 利用 ES6 SET 去重(最常用)

// 數(shù)組去重
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 方法一：使用Set對(duì)象
const uniqueArr1 = function(arr) {
  return Array.from(new Set(arr));
};
console.log(uniqueArr1(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

優(yōu)勢(shì)：簡(jiǎn)單，方便，代碼最少，容易理解。

缺點(diǎn)：無法去掉 {} 空對(duì)象。

2. 使用 fliter 方法

// 方法二：使用filter方法
const uniqueArr2 = function(arr) {
  return arr.filter((item, index, self) => self.indexOf(item) === index);
};
console.log(uniqueArr2(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

3. 使用 reduce 方法

// 方法三：使用reduce方法
const uniqueArr3 = function(arr) {
  return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
};

4. 使用 Map 對(duì)象

// 方法四：使用Map對(duì)象
const uniqueArr4 = function(arr) {
  const map = new Map();
  return arr.filter((item) => !map.has(item) && map.set(item, 1));
};
console.log(uniqueArr4(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

5. 使用 sort 方法

// 方法五：使用sort方法
const uniqueArr5 = function(arr) {
  return arr.sort().filter((item, index, self) => item !== self[index - 1]);
};

6. 使用 includes 方法

// 方法六：使用includes方法
const uniqueArr6 = function(arr) {
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (!res.includes(arr[i])) {
      res.push(arr[i]);
    }
  }
  return res;
};
console.log(uniqueArr6(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

7. 使用 indexof() 方法

// 方法七：使用indexOf方法
const uniqueArr7 = function(arr) {
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (res.indexOf(arr[i]) === -1) {
      res.push(arr[i]);
    }
  }
  return res;
};
console.log(uniqueArr7(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

8. 使用 for …of 循環(huán)

// 方法八：使用for...of循環(huán)
const uniqueArr8 = function(arr) {
  const res = [];
  for (const item of arr) {
    if (!res.includes(item)) {
      res.push(item);
    }
  }
  return res;
};
console.log(uniqueArr8(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

9. 使用 for…in 循環(huán)

// 方法九：使用for...in循環(huán)
const uniqueArr9 = function(arr) {
  const res = [];
  for (const item in arr) {
    if (!res.includes(arr[item])) {
      res.push(arr[item]);
    }
  }
  return res;
};
console.log(uniqueArr9(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

10. 使用 white 循環(huán)

// 方法十：使用while循環(huán)
const uniqueArr10 = function(arr) {
  const res = [];
  let i = 0;
  while (i < arr.length) {
    if (!res.includes(arr[i])) {
      res.push(arr[i]);
    }
    i++;
  }
  return res;
};
console.log(uniqueArr10(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

11. 使用 do…while 循環(huán)

// 方法十一：使用do...while循環(huán)
const uniqueArr11 = function(arr) {
  const res = [];
  let i = 0;
  do {
    if (!res.includes(arr[i])) {
      res.push(arr[i]);
    }
    i++;
  } while (i < arr.length);
  return res;
};
console.log(uniqueArr11(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

12. 使用 forEach 方法

// 方法十二：使用forEach方法
const uniqueArr12 = function(arr) {
  const res = [];
  arr.forEach((item) => {
    if (!res.includes(item)) {
      res.push(item);
    }
  });
  return res;
};
console.log(uniqueArr12(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

13. 使用 map 方法

// 方法十三：使用map方法
const uniqueArr13 = function(arr) {
  const res = [];
  arr.map((item) => {
    if (!res.includes(item)) {
      res.push(item);
    }
  })
}
console.log(uniqueArr13(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

14. 利用遞歸去重

// 方法十四：利用遞歸去重
const uniqueArr14 = function(arr) {
  const res = arr;
  const len = res.length;
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (res[i] === res[j]) {
        res.splice(j, 1);
        len--;
      }
    }
  }
}
console.log(uniqueArr14(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]