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. JSP入门详解

    一.基础知识详解 1.JSP中使用html注释<!-- -->客户端可见,使用jsp注释<%-- --%>客户端不可见(查看源文件只看到空行),单行和多行注释也看不到(//或者 ...

  2. 关于hessian接口类方法顺序及对象序列化的实战研究

    前段时间,提供出去的hessian接口被调用时,调用方出现序列化异常以及其他莫名的异常.同事说hessian接口使用有2个注意事项: 1.对于已经存在的hessian接口,后续增加的方法只能加在文件末 ...

  3. pytest文档6-fixture之yield实现teardown

    前言 上一篇讲到fixture通过scope参数控制setup级别,既然有setup作为用例之前前的操作,用例执行完之后那肯定也有teardown操作. 这里用到fixture的teardown操作并 ...

  4. OpenShift 如何获取bearer Token以便进行各种API调用

    Openshift 需要通过bearer token的方式和API进行调用,比如基于Postman就可以了解到,输入bearer token后 1.如何获取Bearer Token 但Bearer T ...

  5. iOS:网络编程的第三方框架:AFNetworking、SDWebImage

    网络编程第三方框架:AFNetworking.SDWebImage 介绍:这些框架是开源的,经过前人的封装.改进,成为使用次数很多的一个性能好的源代码框架,只需要将它导入项目中,就可以使用.因此,在做 ...

  6. thinkphp问题

    这几天组里有个php系统报安全漏洞,负责的厂商跑了,没办法,被组长丢过来改漏洞,记录一下部分内容. 配置php的环境  参考https://blog.csdn.net/u011415782/artic ...

  7. MapReduce实战--倒排索引

    本文地址:http://www.cnblogs.com/archimedes/p/mapreduce-inverted-index.html,转载请注明源地址. 1.倒排索引简介 倒排索引(Inver ...

  8. 实现微信小程序的3rd_session

    function 3rd_session($len) { $fp = @fopen('/dev/urandom','rb'); $result = ''; if ($fp !== FALSE) { $ ...

  9. sql server 批量导出存储过程

    sys.syscomments:包含数据库中每个视图.规则.默认值.触发器.CHECK 约束.DEFAULT 约束和存储过程的项.text 列包含原始的 SQL 定义语句.(简单点说,这个系统表存储了 ...

  10. 【pyhon】怨灵侍全本漫画批量下载爬虫1.00

    代码: # 怨灵侍全本漫画批量下载爬虫1.00 # 拜CARTOON.fydupiwu.com整理有序所赐,寻找图片只要观察出规律即可,不用费劲下一页的找了 import time import ur ...