摘要:引言數(shù)組去重是前端面試的一個(gè)必備題目,其具體表現(xiàn)內(nèi)容為怎樣去掉的的重復(fù)項(xiàng)。一般姿勢(shì)使用數(shù)組的方法可以很簡(jiǎn)單的達(dá)到目的。所以這算是委曲求全的一種中庸姿勢(shì)。改編自劉春龍博客中的文章中數(shù)組去重問題
引言
數(shù)組去重是前端面試的一個(gè)必備題目,其具體表現(xiàn)內(nèi)容為:怎樣去掉Javascript的Array的重復(fù)項(xiàng)。問題簡(jiǎn)單直接,咱們也廢話不多說,直入主題吧。
一般姿勢(shì)使用數(shù)組的indexOf()方法可以很簡(jiǎn)單的達(dá)到目的。
Array.prototype.unique = function() { // 創(chuàng)建一個(gè)新的臨時(shí)數(shù)組,用于保存輸出結(jié)果 var n = []; // 遍歷當(dāng)前數(shù)組 for (var i = 0; i < this.length; i++) { // 如果當(dāng)前數(shù)組的第i個(gè)元素已經(jīng)保存進(jìn)了臨時(shí)數(shù)組,那么跳過,否則把當(dāng)前項(xiàng)push到臨時(shí)數(shù)組里面 if (n.indexOf(this[i]) == -1) n.push(this[i]); } return n; }
再列出一個(gè)變換一點(diǎn)的方式。
Array.prototype.unique = function() { // 創(chuàng)建一個(gè)新的臨時(shí)數(shù)組,并且把當(dāng)前數(shù)組的第一元素存入到數(shù)組中 var n = [this[0]]; // 從第二項(xiàng)開始遍歷 for (var i = 1; i < this.length; i++) { // 如果當(dāng)前數(shù)組的第i項(xiàng)在當(dāng)前數(shù)組中第一次出現(xiàn)的位置不是i,那么表示第i項(xiàng)是重復(fù)的,忽略掉,否則存入結(jié)果數(shù)組 if (this.indexOf(this[i]) == i) n.push(this[i]); } return n; }
JS引擎在實(shí)現(xiàn)indexOf()的時(shí)候會(huì)遍歷數(shù)組直到找到目標(biāo)為止,此函數(shù)會(huì)浪費(fèi)掉很多時(shí)間。所有這兩種方式都不是最優(yōu)的解決方式。
// 另一個(gè)簡(jiǎn)潔粗暴的方法 Array.prototype.unique = function() { return this.filter((v, i) => this.indexOf(v) === i) }
最快姿勢(shì)感謝oxyflour童鞋提供的簡(jiǎn)單粗暴的一般姿勢(shì)ES6改良版,優(yōu)雅而簡(jiǎn)約 :)
把已經(jīng)出現(xiàn)過的元素通過下標(biāo)的形式存入一個(gè)Object內(nèi)。下標(biāo)的引用的實(shí)現(xiàn)原理利用的是哈希算法,要比用indexOf()搜索數(shù)組快的多。
Array.prototype.unique = function() { // n為hash表,r為臨時(shí)數(shù)組 var n = {}, r = []; for (var i = 0; i < this.length; i++) { // 如果hash表中沒有當(dāng)前項(xiàng) if (!n[this[i]]) { // 存入hash表 n[this[i]] = true; // 把當(dāng)前數(shù)組的當(dāng)前項(xiàng)push到臨時(shí)數(shù)組里面 r.push(this[i]); } } return r; }
但從耗時(shí)的角度來講,這是最優(yōu)的一種解決方式。但是從內(nèi)存占用角度來說,這并不是最優(yōu)的,因?yàn)槎嗔艘粋€(gè)hash表。這就是所謂的空間換時(shí)間(世間安得雙全法?)。
中庸姿勢(shì)Array.prototype.unique = function() { this.sort(); var re = [this[0]]; for (var i = 1; i < this.length; i++) { if (this[i] !== re[re.length - 1]) { re.push(this[i]); } } return re; }
這個(gè)方法的思路是先把數(shù)組排序,然后比較相鄰的兩個(gè)值。排序的時(shí)候用的JS原生的sort()方法,JS引擎內(nèi)部應(yīng)該是用的快速排序吧。這種方式比使用indexOf()的一般姿勢(shì)要快,比使用hash表的最快姿勢(shì)要慢,但是占用內(nèi)存要少。所以這算是委曲求全的一種中庸姿勢(shì)。具體要用什么姿勢(shì),各位看官視情況而定吧。
改編自劉春龍博客中的文章《JS中數(shù)組去重問題》
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/86181.html
摘要:編寫雙重循環(huán)去重當(dāng)出現(xiàn)相同的元素時(shí),刪除重復(fù)的元素哈希表形式查詢對(duì)象是否存在當(dāng)前元素屬性借助方法查詢空數(shù)組里面是否已經(jīng)存在這個(gè)值,不存在則推入編寫單元測(cè)試輸出通過來實(shí)現(xiàn)是比較優(yōu)雅的姿勢(shì)。 編寫uniqueArray.js var Unique = { /** * 雙重循環(huán)去重 * @param arr * @returns {*} */ ...
摘要:這種方式比使用的一般姿勢(shì)要快,比使用表的最快姿勢(shì)要慢,但是占用內(nèi)存要少主要內(nèi)容來自數(shù)組去重的正確編寫姿勢(shì) 不賣關(guān)子,直入主題 數(shù)組去重,最先想到的便是依次遍歷數(shù)組,在已遍歷的元素中查找是否存在當(dāng)前數(shù)組元素,重點(diǎn)是用什么存放已遍歷的數(shù)組,以及如何區(qū)分當(dāng)前元素是否已存在 由于下面會(huì)用到indexOf()的方法,它是ES5語法,低版本會(huì)存在兼容,先應(yīng)添加對(duì)應(yīng)的polyfill Array.p...
摘要:使用進(jìn)行操作,如下但是得到的其實(shí)是一個(gè)非常規(guī)的數(shù)組了,也就是說其實(shí)主要是用于對(duì)對(duì)象屬性的操作。這確實(shí)要根據(jù)自己的需求來了。當(dāng)然簡(jiǎn)單的實(shí)現(xiàn)如下好了到了這兒,我們開始總結(jié)下常用的數(shù)組去重的方法。 前言 我們先來看下面的例子,當(dāng)然來源與網(wǎng)絡(luò),地址《刪除數(shù)組中多個(gè)不連續(xù)的數(shù)組元素的正確姿勢(shì)》 我們現(xiàn)在將數(shù)組中所有的‘a(chǎn)’元素刪除: var arr = [a, a, b, c, d, a, a,...
摘要:基本操作數(shù)組去重寫在前面數(shù)組去重經(jīng)常出現(xiàn)在前端招聘的筆試題里,比如有數(shù)組,請(qǐng)用實(shí)現(xiàn)去重函數(shù),使得返回作為筆試題,考點(diǎn)有二正確?;窘榻B文章主要是對(duì)數(shù)組去重的常用方法進(jìn)行介紹。 js基本操作-數(shù)組去重 寫在前面 JavaScript 數(shù)組去重經(jīng)常出現(xiàn)在前端招聘的筆試題里,比如: 有數(shù)組 var arr = [a, b, c, 1, 0, c, 1, , 1, 0],請(qǐng)用 JavaScr...
摘要:數(shù)組去重雙層循環(huán)使用雙層嵌套循環(huán)是最原始的方法用來存儲(chǔ)結(jié)果如果是唯一的,那么執(zhí)行完循環(huán),等于外層循環(huán)內(nèi)層循環(huán)當(dāng)和相等時(shí),跳出循環(huán)。否則說明元素唯一,這時(shí)成立,將此元素添加到中。它類似于數(shù)組,但是成員的值都是唯一的,沒有重復(fù)的值。 JavaScript數(shù)組去重 雙層循環(huán) 使用雙層嵌套循環(huán)是最原始的方法: var array = [a,b,a]; function unique(arra...
閱讀 1933·2021-09-27 13:35
閱讀 3461·2019-08-30 14:16
閱讀 2514·2019-08-30 10:52
閱讀 887·2019-08-29 16:35
閱讀 1439·2019-08-29 15:22
閱讀 3670·2019-08-23 18:21
閱讀 3163·2019-08-23 18:00
閱讀 3146·2019-08-23 16:50