从JavaScript 数组去重看兼容性有关问题,及性能优化(摘自玉伯博客)
JavaScript 数组去重经常出现在前端招聘的笔试题里,比如:
有数组 var arr = ['a', 'b', 'c', '1', 0, 'c', 1, '', 1, 0],请用 JavaScript 实现去重函数 unqiue,使得 unique(arr) 返回 ['a', 'b', 'c', '1', 0, 1, '']
作为笔试题,考点有二:
正确。别小看这个考点,考虑到 JavaScript 经常要在浏览器上运行,在千姿百态的各种浏览器环境下要保障一个函数的正确性可不是一件简单的事,不信你继续读完这篇博客。
性能。虽然大部分情况下 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
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 数组去重看兼容性有关问题,及性能优化(摘自玉伯博客)的更多相关文章
- 也谈面试必备问题之 JavaScript 数组去重
Why underscore (觉得这部分眼熟的可以直接跳到下一段了...) 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. ...
- JavaScript数组去重—ES6的两种方式
说明 JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代 ...
- javascript数组去重算法-----3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript数组去重算法-----2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript数组去重算法-----1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript数组去重算法-----5
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript数组去重算法-----4(另一种写法__2)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript数组去重算法-----4(另一种写法)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript数组去重算法-----4
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- pytest文档5-fixture之conftest.py
前言 前面一篇讲到用例加setup和teardown可以实现在测试用例之前或之后加入一些操作,但这种是整个脚本全局生效的,如果我想实现以下场景: 用例1需要先登录,用例2不需要登录,用例3需要先登录. ...
- 如何使用V7包中ActionBar(Eclipse版)
转自:http://blog.csdn.net/appte/article/details/11712591 以前3.0以前的版本要使用ActionBar,必须使用国外大牛写的ActionBarShe ...
- golang的缓冲channel和无缓冲channel的区别
话说golang的channel同步的定义真是让人无力吐槽,码农的用户体验就这么难搞么,超耐磨阿,无缓冲和缓冲居然有这么大区别....靠 转载一段网上的资料 --------------------- ...
- [Android Studio] Android Studio底边栏选项不见了,如何调出来
转载:http://blog.csdn.net/hyr83960944/article/details/38067785 Android Studio底边有一个选项栏,包含了Run,Android等等 ...
- Python验证码识别处理实例
一.准备工作与代码实例 1.PIL.pytesser.tesseract (1)安装PIL:下载地址:http://www.pythonware.com/products/pil/(CSDN下载) 下 ...
- 卷积神经网络LeNet Convolutional Neural Networks (LeNet)
Note This section assumes the reader has already read through Classifying MNIST digits using Logisti ...
- tasklist、taskkill、taskmgr
1.tasklist 列出所有的进程,使用tasklist |findstr xxx , 选取进程 2.taskkill 杀掉进程,使用 taskkill /f /pid 1235 3.taskmg ...
- Android小技术知识(多用于面试)
Android Dev Doc Android 开发 多使用内部类 使用方便且效率高 UI方面的知识 一.在编写layout的xml文件时,一定要仔细!如果在报错的时候,如何解决? 解决:将xml仔细 ...
- poj 3237(树链剖分+线段树)
题意:给一棵树,三种操作.将第i条边的权值改为v,将a到b的路径上的边的权值全部取反,求a到b路径上边的权值的最大值. 思路:明显的树链剖分,加上线段树的操作.因为有取反的操作所以每个区间要记录最大值 ...
- windows下安装msysgit 及ruby
一:安装msysgit git是目前最流行的软件版本控制软件,在window下通常使用msysgit 下载:http://msysgit.github.io/ 安装:基本上一路默认下一步就行 安装之后 ...