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

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(已墙)
时间: 2024-12-22 21:25:40

JavaScript中的稀疏数组与密集数组[译]_javascript技巧的相关文章

javascript中的循环语句for语句深入理解_javascript技巧

程序实现中经常要用到循环语句,其中for循环是多数语言都有的.在javascript中,for循环有几种不同的使用情况,下面就分别来讲述我的理解. 第一种:(通常情况,循环执行相关操作) 复制代码 代码如下: var objA=document.getElementsByTagName("a"); var i,max; for(i=0,max=objA.length;i<max;i++){ objA[i].onclick=function(){ alert(this.innerH

javascript中DOM复选框选择用法实例_javascript技巧

本文实例讲述了javascript中DOM复选框选择用法.分享给大家供大家参考.具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>复选框全选全清和反选</title> &l

在JavaScript中调用Java类和接口的方法_javascript技巧

前言 本文中所有的代码使用 JavaScript 编写,但你也可以用其他兼容 JSR 223 的脚本语言.这些例子可作为脚本文件也可以在交互式 Shell 中一次运行一个语句的方式来运行.在 JavaScript 中访问对象的属性和方法的语法与 Java 语言相同. 本文包含如下几部分: 1.访问 Java 类 为了在 JavaScript 中访问原生类型或者引用 Java 类型,可以调用 Java.type() 函数,该函数根据传入的完整类名返回对应对象的类型.下面代码显示如何获取不同的对象类

JavaScript中的原型和继承详解(图文)_javascript技巧

请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans 原型车.这些车虽然是由"奥迪"或"标致"这些厂商制造的,可它们并不是你在街上或速公路上所见到的那类汽车.它们是专为参加高速耐力赛事而制造出来的. 厂家投入巨额资金,用于研发.设计.制造这些原型车,而工程师们总是努力尝试将这项工程做到极致.他们在合金.生物燃料.制动技术

在javascript中如何得到中英文混合字符串的长度_javascript技巧

有同事在公司的OA上发了个贴子,介绍在javascript中如何得到中英文混合字符串的长度. 用的是正则表达式. 复制代码 代码如下: var str = "坦克是tank的音译"; var len = str.match(/[^ -~]/g) == null ? str.length : str.length + str.match(/[^ -~]/g).length ; 我查了一下书,有点明白了: 西文常用字符集由空格" "(0x20)到"~"

浅谈javascript中call()、apply()、bind()的用法_javascript技巧

call(thisObj,arg1,arg2...).apply(thisObj,[obj1,obj2...])这二个方法是每个函数都包含的非继承的方法 call(thisobj[, args])和apply(thisobj[, args]) 作用都是一样的,简单来说就是改变当前使用该方法的对象中的this指向,指向调用方法中的thisObj对象二者的区别(第一个参数是相同的)就是call方法中传入的参数是是一个个列举出来的,而apply方法中的参数二是一个数组 还是举例说明比较直观: wind

JavaScript中关键字 in 的使用方法详解_javascript技巧

for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为"枚举". 对于数组 ,迭代出来的是数组元素 但不推荐,因为不能保证顺序,而且如果在Array的原型上添加了属性,这个属性也会被遍历出来,所以 最好数组使用正常的for循环,对象使用for-in循环 对于对象 ,迭代出来的是对象的属性: var obj = { "key1":"value1", "key2":"value2", &q

浅谈JavaScript中的对象及Promise对象的实现_javascript技巧

JavaScript 中的所有事物都是对象:字符串.数值.数组.函数.下面小编给大家收集整理些javascript中的对象及promise对象的实现.具体内容如下: 到处都是对象 window对象 常用的属性和方法介绍 location 包含页面的URL,如果改变这个属性,浏览器会访问新的URL status 包含将在浏览器状态去显示的一个串.一般在浏览器左下角 onload: 包含了需要在页面完全加载后调用的函数 document: 包含DOM alert方法: 显示一个提醒 prompt方法

简单谈谈javascript中的变量、作用域和内存问题_javascript技巧

[变量] [1]定义:可变的量,相当于给一个不定的数据起了一个外号.变量是存储信息的容器. [2]特性:js中的变量是松散类型的,可以保存任何类型的数据.它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. [3]变量声明:变量可以在声明时赋值,但不能有其他操作,如+=.-=等 var a = 2;//是正确的 var a += 2;//是错误的 var a = 2++;//是错误的,++只能用于变量

javascript中的prototype属性使用说明(函数功能扩展)_javascript技巧

这是一个比较特殊的属性,Javascript中的继承一般都依赖这属性实现. 在Javascript中,一切都是对象,字符串是对象,数组是对象,变量是对象,函数也是对象,所以才会允许['a','b','c'].push('d');这样的操作存在.类本身也是一个对象,也可以定义属性和方法: 复制代码 代码如下: function Test(){}; Test.str = 'str'; Test.fun = function(){return 'fun';}; var r1 = Test.str; /