JavaScript中的稀疏数组与密集数组[译]


Posted in Javascript onSeptember 17, 2012

1.稀疏数组
创建一个指定长度的稀疏数组很简单:

> var a = new Array(3); 
> a 
[ , , ] 
> a.length 
3 
> a[0] 
undefined

当你遍历它时,你会发现,它并没有元素.JavaScript会跳过这些缝隙.
> a.forEach(function (x, i) { console.log(i+". "+x) }); 
> a.map(function (x, i) { return i }) 
[ , , ]

译者注:还有一些其他情况会生成稀疏数组,比如
>var arr = []; 
>arr[0] = 0; 
>arr[100] = 100>a.forEach(function (x, i) { console.log(i+". "+x) });0. 0100. 100

2.密集数组

Brandon Benvie 最近在es-discuss邮件讨论组中提到了一个创建密集数组的技巧:

> var a = Array.apply(null, Array(3)); 
> a 
[ undefined, undefined, undefined ]

上面的语句其实等同于:

Array(undefined, undefined, undefined)

但从表面上看,貌似这个数组和之前的稀疏数组并没有太多的区别:

> a.length 
3 
> a[0] 
undefined

可是,你现在可以遍历到这些数组元素了,还可以为每个元素重新赋值:
> a.forEach(function (x, i) { console.log(i+". "+x) }); 
0. undefined 
1. undefined 
2. undefined > a.map(function (x, i) { return i }) 
[ 0, 1, 2 ]

译者注:实际上,JavaScript并没有常规的数组,所有的数组其实就是个对象,只不过会自动管理一些"数字"属性和length属性罢了.说的更直接一点,JavaScript中的数组根本没有索引,因为索引应该是数字,而JavaScript中数组的索引其实是字符串.arr[1]其实就是arr["1"],给arr["1000"] = 1,arr.length也会自动变为1001.这些表现的根本原因就是,JavaScript中的对象就是字符串到任意值的键值对.注意键只能是字符串.这和AWK类似.不信可以试试awk 'BEGIN{a[1]=1;print(a["1"])}'.也许这是因为Brendan Eich在发明JavaScript时参考了不少awk的设计的原因.不过目前,ES6中已经有了类似于Java等语言的Map类型,键可以是任意类型的值.请参考我翻译的MDN文档Map

3.另一个技巧
邮件里还提到了另外一个技巧:

> Array.apply(null, Array(3)).map(Function.prototype.call.bind(Number)) 
[ 0, 1, 2 ]

这大概等同于下面的写法
Array.apply(null, Array(3)).map( 
function (x,i,...) { return Number.call(x,i,...) })

注意,x是call方法的第一个参数,它作为了Number函数中的this值.这个值没有什么意义,相当于被忽略.我更喜欢下面这个能让人一眼就看明白的写法:
Array.apply(null, Array(3)).map(function (x,i) { return i })

译者注:
Array.apply(null, Array(3)).map(Function.prototype.call.bind(Number)) 
//等同于Array.apply(null, Array(3)).map(Function.prototype.call,Number)

虽然使用自定义的函数更清晰,但自定义的函数肯定没有原生方法快.举个例子:
var a = ["aaa ", " bbb", " ccc "] 
a.map(function(x) { return x.trim(); }); // ['aaa', 'bbb', 'ccc'] 
a.map(Function.prototype.call, String.prototype.trim); // ['aaa', 'bbb', 'ccc']

上面使用map方法来trim掉每个数组元素的空格,使用原生的方法虽然难理解.但效率高.看不懂的可以查看下我翻译的MDN文档Array.prototype.map()

4.实际用途?

在实际生产中,使用上面讲的创建密集数组的方法会让别人无法读懂你的代码.所以封装成一个工具函数会更好,比如 _.range:

> _.range(3) 
[ 0, 1, 2 ]

和map配合使用,可以使用某个指定的值填充整个数组.
> _.range(3).map(function () { return "a" }) 
[ 'a', 'a', 'a' ]

译者注:其他语言里,都有方便的生成递增数字列表的办法,比如perl和ruby里使用1..100,python里使用range(100),还有一个常见的需求就是生成一个重复某个字段的字符串,在ruby和python里,可以用"a"*100,在perl里用"a"x100,在JavaScript中,可以用Array(100).join("a")

5.相关文章

  1. Iterating over arrays and objects in JavaScript(已墙)
  2. Trying out Underscore on Node.js(已墙)
Javascript 相关文章推荐
Jquery 实现checkbox全选方法
Jan 28 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
shiro授权的实现原理
Sep 21 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
JS实现京东商品分类侧边栏
Dec 11 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 #Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 #Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 #Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 #Javascript
javascript时区函数介绍
Sep 14 #Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 #Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 #Javascript
You might like
php array_slice函数的使用以及参数详解
2008/08/30 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
2020/04/01 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
vue + el-form 实现的多层循环表单验证
2020/11/25 Vue.js
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
Python编程之属性和方法实例详解
2015/05/19 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
django的ORM操作 增加和查询
2019/07/26 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
python实现四人制扑克牌游戏
2020/04/22 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
Weblogic的布署方式
2013/08/23 面试题
毕业典礼主持词大全
2014/03/26 职场文书
售房协议书
2014/08/19 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
小学四年级作文之写景
2019/08/23 职场文书