前言

之前面試過程被問到數組去重有哪些方式？心想這個問題我會，隨便也能說出好幾種，也不帶多思考的。巴拉巴拉巴拉巴拉。說完，面試官好像不太滿意的樣子，還問了句，沒了嗎。我想，咋滴，就這些還不不夠用嗎。然后就下一題了。k3L28資訊網——每日最新資訊28at.com

后來我看到這樣的數據，忽然意識到，之前的面試怕不是草率了，完全沒考慮復雜數據結構，難怪他聽完不太滿意的樣子。k3L28資訊網——每日最新資訊28at.com

let arr = [1, 1, '2', 3, 1, 2,    { name: '張三', id: { n: 1 }},    { name: '張三', id: { n: 1 }},    { name: '張三', id: { n: 2 }}]

在平時的開發過程中這樣的數據應該少見，絕大部分的數組中數據格式應該保持一致，特殊情況就不管他了。k3L28資訊網——每日最新資訊28at.com

今天再來出一期數組去重的方式。k3L28資訊網——每日最新資訊28at.com

基本數據類型去重

確實有多種方式，比如set結構轉一下，lodash提供的uniq方法，或者自己利用其他方式實現也是很多的。今天就介紹幾個k3L28資訊網——每日最新資訊28at.com

當面試官詢問數組去重時，可以考慮到數組可能包含基本數據類型、引用數據類型，或者混合了兩種類型的情況。以下是針對不同情況的多種思路和實現方法：k3L28資訊網——每日最新資訊28at.com

使用 Set 數據結構（ES6）k3L28資訊網——每日最新資訊28at.com

const array = [1, 2, 3, 3, 4, 5, 5];const uniqueArray = [...new Set(array)];console.log(uniqueArray); // [1, 2, 3, 4, 5]

使用 Array.prototype.filter()k3L28資訊網——每日最新資訊28at.com

const array = [1, 2, 3, 3, 4, 5, 5];const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);console.log(uniqueArray); // [1, 2, 3, 4, 5]

使用 Array.prototype.reduce()k3L28資訊網——每日最新資訊28at.com

const array = [1, 2, 3, 3, 4, 5, 5];const uniqueArray = array.reduce((acc, curr) => {    if (!acc.includes(curr)) {        acc.push(curr);    }    return acc;}, []);console.log(uniqueArray); // [1, 2, 3, 4, 5]

使用 for 循環和 Array.prototype.indexOf()k3L28資訊網——每日最新資訊28at.com

const array = [1, 2, 3, 3, 4, 5, 5];const uniqueArray = [];for (let i = 0; i < array.length; i++) {    if (uniqueArray.indexOf(array[i]) === -1) {        uniqueArray.push(array[i]);    }}console.log(uniqueArray); // [1, 2, 3, 4, 5]

Lodash 是一個非常流行的 JavaScript 工具庫，提供了許多實用的函數來簡化開發過程。它也包含了一些用于數組去重的方法。以下是幾種利用 Lodash 實現數組去重的方法：k3L28資訊網——每日最新資訊28at.com

使用 _.uniq() 方法k3L28資訊網——每日最新資訊28at.com

const _ = require('lodash');const array = [1, 2, 3, 3, 4, 5, 5];const uniqueArray = _.uniq(array);console.log(uniqueArray); // [1, 2, 3, 4, 5]

使用 _.uniqWith() 方法（使用自定義比較函數）k3L28資訊網——每日最新資訊28at.com

const _ = require('lodash');const array = [{id: 1}, {id: 2}, {id: 1}];const uniqueArray = _.uniqWith(array, (a, b) => _.isEqual(a, b));console.log(uniqueArray); // [{id: 1}, {id: 2}]

2. 數組包含引用數據類型：

使用 Set 數據結構，利用自定義比較函數（如果需要去重對象數組）k3L28資訊網——每日最新資訊28at.com

const array = [{id: 1}, {id: 2}, {id: 1}];const uniqueArray = Array.from(new Set(array.map(JSON.stringify)), JSON.parse);console.log(uniqueArray); // [{id: 1}, {id: 2}]

使用 Array.prototype.reduce()k3L28資訊網——每日最新資訊28at.com

const array = [{id: 1}, {id: 2}, {id: 1}];const uniqueArray = array.reduce((acc, current) => {    const isExist = acc.some(item => JSON.stringify(item) === JSON.stringify(current));    if (!isExist) acc.push(current);    return acc;}, []);console.log(uniqueArray); // [{id: 1}, {id: 2}]

上面都是使用了JSON.stringfy。但有個問題，如果引用數據的順序不一樣，轉的string就不等了。所以還是自己實現一個方法好一些。k3L28資訊網——每日最新資訊28at.com

使用自定義比較函數

這種方法適用于任何類型的數組，包括混合了基本數據類型和引用數據類型的數組。k3L28資訊網——每日最新資訊28at.com

function uniqueArray(array) {    const seen = new Map();    return array.filter(item => {        if (typeof item === 'object' && item !== null) {            const key = Object.keys(item).sort().map(k => `${k}:${item[k]}`).join('|');            if (!seen.has(key)) {                seen.set(key, true);                return true;            }        } else {            if (!seen.has(item)) {                seen.set(item, true);                return true;            }        }        return false;    });}const array = [1, 2, {id: 1}, {id: 2}, 1, {id: 1}];const uniqueArr = uniqueArray(array);console.log(uniqueArr); // [1, 2, {id: 1}, {id: 2}]

這個方法利用了 Map 數據結構的特性，用鍵來存儲數組中的元素，保證了元素的唯一性。對于對象，通過將屬性名排序并拼接成字符串來判斷是否重復。k3L28資訊網——每日最新資訊28at.com

如果都是引用結構，我們平時也可以使用 _.uniqBy() 方法去重，比如根據id什么的k3L28資訊網——每日最新資訊28at.com

const _ = require('lodash');const array = [{id: 1}, {id: 2}, {id: 1}];const uniqueArray = _.uniqBy(array, JSON.stringify);console.log(uniqueArray); // [{id: 1}, {id: 2}]

本文鏈接：http://www.tebozhan.com/showinfo-26-82509-0.html前端面試：你以為這只是一個簡單的數組去重嗎？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Java并發編程實戰：信號量Semaphore的使用技巧與示例

下一篇： 探索React 19：四個實用新鉤子功能