前言

關(guān)于數(shù)組去重，已經(jīng)是一個(gè)老生常談的問題了，網(wǎng)絡(luò)上已經(jīng)有N篇關(guān)于數(shù)組去重的講解了，所以，凡是能看見這篇博客的，我們都是有緣人，希望2023年你可以乘風(fēng)破浪，職擊滄海。而一般面試的時(shí)候，關(guān)于數(shù)據(jù)去重也是一個(gè)必問的問題，我一般都會(huì)問下面這3個(gè)小問題。

一、請(qǐng)說一下數(shù)組去重的項(xiàng)目使用場景 

在問題數(shù)組去重之前，我會(huì)禮貌的問一下，數(shù)組去重你常用嗎？一般得到的回答也是當(dāng)然常用啊，（可能他還想說，我必須常用啊，我天天用，一直用，就在剛才我準(zhǔn)備面試的時(shí)候，還看了看數(shù)組去重的幾種實(shí)現(xiàn)方法呢）。然后我就問了一下：請(qǐng)你說一下數(shù)組去重的項(xiàng)目場景。

他略微沉思了一下，沒有說話，然后不太好意思的說：有一次服務(wù)端返回的一個(gè)數(shù)組，里面多條含有重復(fù)數(shù)據(jù)，我就用到了數(shù)組去重。我問：可以說一下大概的場景嗎，不用說的太細(xì)。后來他沒有理我。

我這里說兩個(gè)會(huì)用到數(shù)組去重的場景吧。

1、時(shí)間軸

 這里隨便舉個(gè)例子啊，其實(shí)做成真實(shí)網(wǎng)站找到真實(shí)的例子，肯定要做樣式美化的。這個(gè)時(shí)間軸例子呢，以年月日做為時(shí)間軸的匯總點(diǎn)，而匯總點(diǎn)的子項(xiàng)就是這個(gè)時(shí)間下所要記錄的列表內(nèi)容。這種情況下，服務(wù)端返回的必定是數(shù)組形式，數(shù)據(jù)格式大概像是這樣：

data = [
      {
        time: '2022-12-21 08:03:34',
        title: '使用css3實(shí)現(xiàn)一個(gè)超浪漫的新年倒計(jì)時(shí)'
       },
       {
         time: '2023-01-02 23:50:55',
         title: '我辛辛苦苦做了一個(gè)月的項(xiàng)目，組長年底用來寫了晉升PPT'
        },
        {
          time: '2023-01-03 22:36:01',
          title: '內(nèi)卷對(duì)于2022是一種無奈，也是一種修行'
        },
        {
           time: '2023-01-03 23:42:38',
           title: '前端bug每次都比后端多，我總結(jié)了5點(diǎn)原因'
        },
]

注意，因?yàn)槊總€(gè)人的博客或者是一個(gè)寫作歷程，必定是一個(gè)長時(shí)間發(fā)生的過程，所以數(shù)據(jù)一定是不定量的，可能還帶有分頁，所以服務(wù)端不可能預(yù)先將數(shù)據(jù)整理成前端需要的樣子，所以這個(gè)時(shí)候，數(shù)據(jù)中的年月日部分便成了重復(fù)的需要去重的部分，去重后用于本案例匯總點(diǎn)的顯示

2、前端銀行屬地顯示實(shí)例

有很多網(wǎng)站內(nèi)有這樣一個(gè)頁面，銀行屬地顯示，因?yàn)槿珖鞯卮蟠笮⌒〉你y行有非常多，我們需要顯示成這樣：

 很多時(shí)候，服務(wù)端也不會(huì)先將北京，天津，上海等屬地給我們抽成map的key值形式，因?yàn)橐恍┰?，也是以?shù)組形式返回到前端，而這個(gè)數(shù)組大部分時(shí)候也是直接從數(shù)據(jù)庫拉取的數(shù)據(jù)，這就導(dǎo)致需要我們前端做一些數(shù)組去重，服務(wù)端數(shù)據(jù)大概是這樣子：

data = [
       {
           city: '北京',
           name: '北京銀行1'
       },
       {
           city: '北京',
           name: '北京銀行2'
      },
      {
           city: '北京',
           name: 'XX商業(yè)銀行'
      },
      {
           city: '天津',
           name: '天津銀行1'
      },
      {
          city: '天津',
          name: '天津商業(yè)銀行'
      },
      {
          city: '天津',
          name: '港口商業(yè)銀行'
     },
]

這樣一描述，類似場景想起來的是不是就很多了，這個(gè)案例中，數(shù)組內(nèi)的city字段就是需要去重的對(duì)象。

二、說一下數(shù)組去重的幾種實(shí)現(xiàn)方法吧 

因?yàn)檎鎸?shí)項(xiàng)目中，去重可能不僅僅是對(duì)一些數(shù)字的去重，可能還包含一些字符串，數(shù)字混合的場景，所以我們這里隨意想一個(gè)混合數(shù)組，例如：

var arr = ['2022-03-21', 3, 8, 5, 3, 4, 3, '2022-03-21', '2022-03-22', 8];

1、第1種

第1種是定義一個(gè)新的空數(shù)組，再執(zhí)行嵌套雙循環(huán)，監(jiān)測空數(shù)組中如果沒有的元素，push進(jìn)空數(shù)組中。這個(gè)方法考察了continue的初級(jí)使用，也是一種思想，第一次空數(shù)組必定無內(nèi)容，我們pus一個(gè)元素，跳過第一次循環(huán)，第二次再進(jìn)行循環(huán)對(duì)比，代碼如下：

var newArr = [];
for (var i=0;i<arr.length;i++) {
	if (newArr.length === 0) {
		newArr.push(arr[i]);
		continue;
	}
	for (var j=0;j<newArr.length;j++) {
		if (newArr.indexOf(arr[i]) === -1) {
			newArr.push(arr[i]);
		}
	}
}

2、第2種 

第2種是第一種的改進(jìn)，也是新定義一個(gè)空數(shù)組，利用indexOf監(jiān)測新數(shù)組中是否包含某個(gè)元素，代碼如下：

var newArr = [];
for (var i=0;i<arr.length;i++) {
    if (newArr.indexOf(arr[i]) === -1) {
	    newArr.push(arr[i]);
    }
}

3、第3種 

第3種就是es6之后出的set了，set本身的設(shè)定就是非重復(fù)的類數(shù)組，所以才有了數(shù)組與set互相轉(zhuǎn)換的知識(shí)點(diǎn)，而set轉(zhuǎn)為數(shù)組可以是 [...set]這種解構(gòu)形式，也可以是Array.from(set)的方法，代碼如下：

var mySet = new Set(arr); // 非重復(fù)的類數(shù)組
			
// var newArr = Array.from(mySet); // set轉(zhuǎn)數(shù)組
var newArr = [...mySet]; // 或者是這種解構(gòu)方法

4、第4種

 利用filter的內(nèi)置方法，filter接收一個(gè)內(nèi)置函數(shù)，而函數(shù)自身又接收3個(gè)參數(shù)，item相當(dāng)于arr[i]，index相當(dāng)于i索引，arr就是數(shù)組本身，某些情況需要傳入arr，但本案例因?yàn)楸容^簡單，就不傳入了。利用indexOf首次查找索引的方式，返回原數(shù)組中元素首次出現(xiàn)的所有元素，達(dá)到去重效果，代碼如下：

var newArr = arr.filter((item, index) => {
	return arr.indexOf(item) === index;
})

5、第5種 

第5種是利用數(shù)組內(nèi)置的includes方法，監(jiān)測數(shù)組中是否包含某個(gè)元素，如果你在面試中說出這一條，證明你至少對(duì)數(shù)組的新屬性，或者是一些內(nèi)置方法做過整理，是個(gè)不錯(cuò)的回答，代碼如下：

var newArr = [];
for (var i=0;i<arr.length;i++) {
	if (!newArr.includes(arr[i])) {
		newArr.push(arr[i]);
	}
}

6、第6種 

第6種就是創(chuàng)建一個(gè)新的map（或者說是object）對(duì)象，利用其key值唯一的特性，不斷的往map內(nèi)創(chuàng)建屬性，一旦某屬性被創(chuàng)建過，那么就說明了可以對(duì)這個(gè)屬性值做一些操作，而屬性就已經(jīng)是哪個(gè)去重的唯一元素了，代碼如下：

var obj = {}; // 對(duì)象的key值是唯一的
var newArr = [];
for (var i=0;i<arr.length;i++) {
	if (!obj[arr[i]]) {
		obj[arr[i]] = arr[i];
	}
}

三、你最喜歡用哪一種？

 數(shù)組去重不止這幾種實(shí)現(xiàn)方法，對(duì)吧，那么你說出了那么多種，其實(shí)每次做項(xiàng)目的時(shí)候，某種場景下也就是用1種，不可能這個(gè)需求，我把每個(gè)都用了吧，那么你最喜歡用哪一種呢？

我最早喜歡這個(gè)簡單的 

其實(shí)最早的時(shí)候，我喜歡第1種，因?yàn)槟莻€(gè)時(shí)候技術(shù)實(shí)在是太辣雞，不過想想現(xiàn)在也很辣雞，所以很多時(shí)候我不敢輸出干貨，自己干貨也不多，二來輸出來了跟大家重復(fù)也挺高，那么多寫知識(shí)點(diǎn)的，人家為啥就喜歡看我的呢。而且當(dāng)時(shí)我還把第一種實(shí)現(xiàn)方法當(dāng)做是瑰寶，四處跟人家顯擺，屢試不爽，哈哈，不過后來我又看是用第二種了。

現(xiàn)在喜歡這個(gè)object形式的

現(xiàn)在呢，我比較喜歡第6種，因?yàn)榻Y(jié)合很多項(xiàng)目場景，其實(shí)開發(fā)過程中，很少有拿過來一個(gè)純數(shù)組讓去重的，大部分時(shí)候就像上面說到的案例，去重是為了解耦，將去重出來的部分做為一個(gè)大的key值，而value部分呢，有時(shí)候是一些子數(shù)組，有時(shí)候是更多的數(shù)組，所以我比較喜歡第6種，直接將原聚合數(shù)組，解開，然后處理成map對(duì)象形式，再在頁面進(jìn)行一些渲染。

四、分享一個(gè)我的案例

面試題這個(gè)東西是怎么出來的呢？是在大家慢慢工作中，不斷遇到痛點(diǎn)，無數(shù)人總結(jié)出來的結(jié)果，慢慢發(fā)展成為了一道面試題，所以面試題的解法一般去網(wǎng)上查一查，背一背可以搞定。

但有一些面試官，你答的不順利，他就想：你來面試，網(wǎng)上的答案那么多，你咋就不背一背呢？你答的太順利，他又想：這貨肯定是被答案了，跟網(wǎng)上說的如出一轍。

所以建議大家面試的時(shí)候，把面試題答案多結(jié)合一下自己的項(xiàng)目經(jīng)驗(yàn)，把面試結(jié)果帶入到項(xiàng)目經(jīng)驗(yàn)中去解答，如果解答后呢，還能略微說一說自己遇到的問題，說一說自己的心得，那么我覺得面試官可能會(huì)為你的真誠打動(dòng)一下吧。

這里分享一個(gè)我曾經(jīng)的成功案例：

之前面試過一家公司，面試前端開發(fā)，人家不出前端面試題，人家說那些題。比如一塊肉，張三給了假錢，老板去換了真錢，然后又賠了錢丟了肉之類的，當(dāng)然還有一些其他耐人尋味的類似的問題。我這破智商哪能這么快搞定那么多破問題啊，而且有些題，你越想越容易陷入思考，越想自己的思路好像越不對(duì)。

我當(dāng)時(shí)直接在紙上這么寫：

var num = 100; // 這是最初的100元，

num += 200; // 這時(shí)候的num為300元，是老板獲得肉錢的那一步

我直接把這種題，以代碼的形式，工工整整的寫上注釋交上去了

當(dāng)然你也可以寫上：拒絕做這類破題，老夫告辭！

總結(jié)

到此這篇關(guān)于前端數(shù)組去重面試我會(huì)問這3個(gè)小問題的文章就介紹到這了,更多相關(guān)前端數(shù)組去重面試題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論