JavaScript 数组去重经常出现在前端招聘的笔试题里,比如:

有数组 var arr = ['a', 'b', 'c', '1', 0, 'c', 1, '', 1, 0],请用 JavaScript 实现去重函数 unqiue,使得 unique(arr) 返回 ['a', 'b', 'c', '1', 0, 1, '']

作为笔试题,考点有二:

  1. 正确。别小看这个考点,考虑到 JavaScript 经常要在浏览器上运行,在千姿百态的各种浏览器环境下要保障一个函数的正确性可不是一件简单的事,不信你继续读完这篇博客。

  2. 性能。虽然大部分情况下 JavaScript 语言本身(狭义范畴,不包含 DOM 等延拓)不会导致性能问题,但很不幸这是一道考题,因此面试官们还是会把性能作为一个考点。

在继续往下阅读之前,建议先实现一个自己认为最好的版本。

直觉方案

对于数组去重,只要写过程序的,立刻就能得到第一个解法:

function unique(arr) {
var ret = [] for (var i = 0; i < arr.length; i++) {
var item = arr[i]
if (ret.indexOf(item) === -1) {
ret.push(item)
}
} return ret
}

直觉往往很靠谱,在现代浏览器下,上面这个函数很正确,性能也不错。但前端最大的悲哀也是挑战之处在于,要支持各种运行环境。在 IE6-8 下,数组的 indexOf 方法还不存在。直觉方案要稍微改造一下:

var indexOf = [].indexOf ?
function(arr, item) {
return arr.indexOf(item)
} :
function indexOf(arr, item) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === item) {
return i
}
}
return -1
} function unique(arr) {
var ret = [] for (var i = 0; i < arr.length; i++) {
var item = arr[i]
if (indexOf(ret, item) === -1) {
ret.push(item)
}
} return ret
}

写到这一步,正确性已没问题,但性能上,两重循环会让面试官们看了不爽。

优化方案

一谈到优化,往往就是八仙过海、百花齐放。但八仙往往不接地气,百花则很容易招来臭虫。数组去重的各种优化方案在此不一一讨论,下面只说最常用效果也很不错的一种。

function unique(arr) {
var ret = []
var hash = {} for (var i = 0; i < arr.length; i++) {
var item = arr[i]
var key = typeof(item) + item
if (hash[key] !== 1) {
ret.push(item)
hash[key] = 1
}
} return ret
}

核心是构建了一个 hash 对象来替代 indexOf. 注意在 JavaScript 里,对象的键值只能是字符串,因此需要 var key = typeof(item) + item 来区分数值 1 和字符串 '1' 等情况。

 使用ES6 更简单:
// ES6
function unique (arr) {
const seen = new Map()
return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}
// or
function unique (arr) {
return Array.from(new Set(arr))
}

从JavaScript 数组去重看兼容性有关问题,及性能优化(摘自玉伯博客)的更多相关文章

  1. 也谈面试必备问题之 JavaScript 数组去重

    Why underscore (觉得这部分眼熟的可以直接跳到下一段了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. ...

  2. JavaScript数组去重—ES6的两种方式

    说明 JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代 ...

  3. javascript数组去重算法-----3

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. javascript数组去重算法-----2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. javascript数组去重算法-----1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. javascript数组去重算法-----5

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. javascript数组去重算法-----4(另一种写法__2)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. javascript数组去重算法-----4(另一种写法)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. javascript数组去重算法-----4

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. “花生壳” + “VisualSVN” 巧妙实现远程代码版本号控制

    近期因为项目须要,要远程訪问svnserver,可是没有固定域名和ip,因此就打算用花生壳申请一个免费的域名构建一个server,再把VisualSVN部署在server上,就能够在外网訪问了(假设你 ...

  2. iis实现点击文件下载而不是打开文件

    我们平时在搭建网站时,企业网站难免会做一些文档提供给用户下载,有时候我们会遇到提供EXE文件给客户下载时 客户打开文档链接时提示“无法找到该网页”也就是说我们的IIS环境不能下载EXE文件: IIS网 ...

  3. sqlserver获取指定数据库的描述

    SELECT 字段名= convert(varchar(100), a.name), 表名= convert(varchar(50), d.name ), 类型= CONVERT(varchar(50 ...

  4. [转载] 无所不能的“蚂蚁”--Ant

    说他无所不能,好像有点夸张,但是用过Ant之后,感觉真的是只有想不到没有作不到.Ant,原作者选择他作为软件名字的意思是指"令一个简洁的工具"(Another Neat Tool) ...

  5. CloudStack 4.0.2 vRouter导致重启后状态不正常

    最近总玩CloudStack + KVM,发现在重启CloudStack服务后,host(kvm)的状态老是为alert.日志里出现如下错误提示: ERROR [agent.manager.Agent ...

  6. MySQL索引优化案例

    这里我们分成三种情况进行分析,分别是单表,两表,三表 1.单表 CREATE TABLE IF NOT EXISTS `article`( `id` ) NOT NULL PRIMARY KEY AU ...

  7. VB开发ActiveX控件的一些记录

    注意,下面很多语句的用法,不能放在Private Sub UserControl_Initialize()里使用,要放在Private Sub UserControl_InitProperties() ...

  8. asp中将系统货币符号¥改为美国货币符号$的做法

    我们一般用FormatCurrency()函数得到字符串前面都会加上人民币符号¥.但在做一些网站时想把他们变成$. 可以在网面的前面加上一名话就OK了 SetLocale("en-us&qu ...

  9. [Todo] Redis相关学习

    Redis与新浪 http://www.cnblogs.com/me115/p/3482783.html Redis对于多个CPU的机器,可以启动多实例. 可以看看这个(写的简单了) http://w ...

  10. 【Scala】Scala技术栈

    快速了解Scala技术栈 我无可救药地成为了Scala的超级粉丝.在我使用Scala开发项目以及编写框架后,它就仿佛凝聚成为一个巨大的黑洞,吸引力使我不得不飞向它,以至于开始背离Java.固然Java ...