使用apply方法处理数组的三个技巧[译]

 更新时间:2012年09月20日 23:44:36   作者:  
本文要讲的是使用apply方法处理数组的三个技巧,需要的朋友可以参考下
apply方法

apply是所有函数都有的方法.它的签名如下:
func.apply(thisValue, [arg1, arg2, ...])
如果不考虑thisValue的影响,上面的调用等同于:
func(arg1, arg2, ...)
也就是说,apply允许我们将一个数组"解开"成为一个个的参数再传递给调用函数.让我们分别看看apply使用中的三个技巧.

技巧1: 将一个数组传递给一个不接受数组作为参数的函数

JavaScript中没有返回一个数组中最大值的函数.但是,有一个函数Math.max可以返回任意多个数值类型的参数中的最大值.再配合apply,我们可以实现我们的目的:

复制代码 代码如下:

> Math.max.apply(null, [10, -1, 5])
10

译者注:注意Math.max方法的参数中只要有一个值被转为NaN,则该方法直接返回NaN
复制代码 代码如下:

>Math.max(1,null) //相当于Math.max(1,0)
1
>Math.max(1,undefinded) //相当于Math.max(1,NaN)
NaN

>Math.max(0,-0) //正零比负零大,和==不同
0
>Math.max(-0,-1) //负零比-1大
-0


技巧2: 填补稀疏数组

数组中的缝隙
这里提醒一下读者:在JavaScript中,一个数组就是一个数字到值的映射.所以如果某个索引处缺失了一个元素(一条缝隙)和某个元素的值为undefined,是两种不同的情况.前者在被Array.prototype中的相关方法(forEach, map, 等.)遍历时,会跳过那些缺失的元素,而后者不会:
复制代码 代码如下:

> ["a",,"b"].forEach(function (x) { console.log(x) })
a


> ["a",undefined,"b"].forEach(function (x) { console.log(x) })
a
undefined


译者注:这里作者说"数组就是一个数字到值的映射",严格意义上是不对的,正确的说法是"数组就是一个字符串到值的映射".下面是证据:
复制代码 代码如下:

>for (i in ["a", "b"]) {
console.log(typeof i) //数组的索引实际上是个字符串
}
"string"
"string"

>["a", "b"].forEach(function (x, i) {
console.log(typeof i) //这里的i实际上不是索引,只是个数字类型的累加器
})
"number"
"number"

你可以使用in运算符来检测数组中是否有缝隙.
复制代码 代码如下:

> 1 in ["a",,"b"]
false
> 1 in ["a", undefined, "b"]
true

译者注:这里之所以用1可以,是因为in运算符会把1转换成"1".

你过你尝试读取这个缝隙的值,会返回undefined,和实际的undefined元素是一样.
复制代码 代码如下:

> ["a",,"b"][1]
undefined
> ["a", undefined, "b"][1]
undefined

译者注:[1]也会被转换成["1"]

填补缝隙

apply配合Array(这里不需要加new)使用,可以将数组中的缝隙填补为undefined元素:
复制代码 代码如下:

> Array.apply(null, ["a",,"b"])
[ 'a', undefined, 'b' ]


这都是因为apply不会忽略数组中的缝隙,会把缝隙作为undefined参数传递给函数:
复制代码 代码如下:

> function returnArgs() { return [].slice.call(arguments) }
> returnArgs.apply(null, ["a",,"b"])
[ 'a', undefined, 'b' ]

但需要注意的是,如果Array方法接收到的参数是一个单独的数字,则会把这个参数当成数组长度,返回一个新数组:
复制代码 代码如下:

> Array.apply(null, [ 3 ])
[ , , ]

因此,最靠谱的方法是写一个这样的函数来做这种工作:
复制代码 代码如下:

function fillHoles(arr) {
var result = [];
for(var i=0; i < arr.length; i++) {
result[i] = arr[i];
}
return result;
}

执行:
复制代码 代码如下:

> fillHoles(["a",,"b"])
[ 'a', undefined, 'b' ]

Underscore中的_.compact函数会移除数组中的所有假值,包括缝隙:

复制代码 代码如下:

> _.compact(["a",,"b"])
[ 'a', 'b' ]
> _.compact(["a", undefined, "b"])
[ 'a', 'b' ]
> _.compact(["a", false, "b"])
[ 'a', 'b' ]


技巧3: 扁平化数组

任务:将一个包含多个数组元素的数组转换为一个一阶数组.我们利用apply解包数组的能力配合concat来做这件事:
复制代码 代码如下:

> Array.prototype.concat.apply([], [["a"], ["b"]])
[ 'a', 'b' ]

混合非数组类型的元素也可以:
复制代码 代码如下:

> Array.prototype.concat.apply([], [["a"], "b"])
[ 'a', 'b' ]

apply方法的thisValue必须指定为[],因为concat是一个数组的方法,不是一个独立的函数.这种写法的限制是最多只能扁平化二阶数组:
复制代码 代码如下:

> Array.prototype.concat.apply([], [[["a"]], ["b"]])
[ [ 'a' ], 'b' ]


所以你应该考虑一个替代方案.比如Underscore中的_.flatten函数就可以处理任意层数的嵌套数组

复制代码 代码如下:

> _.flatten([[["a"]], ["b"]])
[ 'a', 'b' ]

参考
JavaScript: sparse arrays vs. dense arrays

ECMAScript.next: Array.from() and Array.of()

相关文章

  • JavaScript Map实现原理与底层结构详解

    JavaScript Map实现原理与底层结构详解

    哈希表(也称为哈希表)是一种基于键直接访问内存存储位置的数据结构。也就是说,它通过计算一个键值函数来加速查找,该函数将要查询的数据映射到表中的某个位置。该映射函数称为散列函数,记录数组称为散列表
    2022-09-09
  • javascript计算用户打开网页的停留时间

    javascript计算用户打开网页的停留时间

    本文介绍了javascript计算用户打开网页的停留时间,大家参考使用吧
    2014-01-01
  • JS设置随机出现2个数字的实例代码

    JS设置随机出现2个数字的实例代码

    这篇文章给大家分享基于js设置随机出现2个数字的实例代码,在文章下面给分享js产生随机数的几个用法介绍,感兴趣的朋友一起看看吧
    2017-07-07
  • JS实现判断有效的数独算法示例

    JS实现判断有效的数独算法示例

    这篇文章主要介绍了JS实现判断有效的数独算法,结合实例形式分析了javascript数独判断的原理及相关算法实现、使用操作技巧,需要的朋友可以参考下
    2019-02-02
  • js实现操作cookie的常见方法总结【创建、读取、删除】

    js实现操作cookie的常见方法总结【创建、读取、删除】

    这篇文章主要介绍了js实现操作cookie的常见方法,结合实例形式分析了js操作cookie创建、读取、删除相关实现技巧与注意事项,需要的朋友可以参考下
    2020-03-03
  • 原生JS实现各种运动之匀速运动

    原生JS实现各种运动之匀速运动

    这篇文章主要为大家详细介绍了原生JS实现各种运动之匀速运动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 用JavaScript 判断用户使用的是 IE6 还是 IE7

    用JavaScript 判断用户使用的是 IE6 还是 IE7

    判断IE浏览器的脚本,方便根据浏览器不懂,支持不同的代码的分别调用。
    2008-01-01
  • Javascript es7中比较实用的两个方法示例

    Javascript es7中比较实用的两个方法示例

    这篇文章主要给大家分享了关于Javascript es7中比较实用的两个方法示例,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-07-07
  • javascript模拟命名空间

    javascript模拟命名空间

    JavaScript 没有任何特定语言功能来支持命名空间,但很容易使用对象来模拟命名空间。今天我们就来探讨下这个问题,希望大家能够喜欢。
    2015-04-04
  • Javascript如何实现双指控制图片功能

    Javascript如何实现双指控制图片功能

    这篇文章主要介绍了Javascript如何实现双指控制图片功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02

最新评论