本文要讲的是:使用apply方法处理数组的三个技巧
.
apply方法
apply是所有函数都有的方法
.它的签名如下:
func.apply(thisValue, [arg1, arg2, ...])
如果不考虑thisValue的影响
,上面的调用等同于:
也就是说,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
b
> ["a",undefined,"b"].forEach(function
(x) { console.log(x) })
a
undefined
b
译者注:这里作者说"数组就是一个数字到值的映射",严格意义上是不对的,正确的说法是"数组就是一个字符串到值的映射".下面是证据:
>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' ]
原文地址: http://www.cnblogs.com/ziyunfei/archive/2012/09/18/2690412.html
分享到:
相关推荐
主要介绍了Android解析json数组对象的方法及Apply和数组的三个技巧的相关资料,需要的朋友可以参考下
让我们分别看看apply使用中的三个技巧. 技巧1: 将一个数组传递给一个不接受数组作为参数的函数 JavaScript中没有返回一个数组中最大值的函数.但是,有一个函数Math.max可以返回任意多个数值类型的参数中的最大值.再...
语言:English ... 2)决定准备 - 通过在一个地方组织所有消息/笔记,您随时准备做出受过教育的决定。 3)简单 - 我们只是让它变得有趣,更聪明,为候选人量身定制,只需拖放即可立即更新任何应用程序。
LinkedIn Easy Apply机器人自动应用于LinkedIn Easy Apply作业。 该机器人还可以回答应用程序问题! 这仅用于教育目的。 如果您的LinkedIn帐户被暂停或其他任何原因,我概不负责。 该机器人是使用Selenium用Python...
SQL Server数据库操作中,在2005以上的版本新增加了一个APPLY表运算符的功能
最简单的部署方法是把apply.war放到tomcat的webapps下,启动tomcat后,在浏览器输入127.0.0.1:8080/apply即可 数据库配置文件在apply/src/DBInfo.properties,如需要请更换 5.其他说明 查询数据翻页/个人资料/设置/...
搜索编辑器:应用更改 在的市场。 将搜索编辑器中的更改应用于工作空间中的文件。 脚步: 运行搜索 编辑结果 运行命令“将搜索编辑器更改应用到workapce” ... " command " : " searchEditorApplyChanges.apply
代码如下:a = new Array();b = new Array(125624)...小一个元素居然就好了,测试了一下其他浏览器也都有大数组才出错的问题,但不同浏览器临界值还各异。 搜索了http://stackoverflow.com/questions/1374126/how-to-app
构建一个docker镜像并将其推送到GitHub的容器注册表中。 此操作基于明智的默认设置。 用法 - uses : pedro-gutierrez/docker-action@v5 name : Build and Push with : password : ${{ secrets.DOCKER_PASSWORD }...
# 安装资源 kubectl apply -f https://github.com/kubesphere/ks-install
###在 Firefox 35(或更新版本,包括 Dev Edition 或 Nightly build)中运行它 cd ./ff-apply-bug cfx run -b <path> 当 Firefox 启动时,按下工具栏上的 Addon 按钮(它是没有图标,只有一个空格) 查看终端输出...
JavaScript中call与apply方法
apply.io LinkedIn自动化应用
Refused to apply style from ‘http://localhost:8080/static/css/style.css’ because its MIME type (‘application/json’) is not a supported stylesheet MIME type, and strict MIME checking is enabled. ...
07-call、apply、bind三者的异同
对于流中的每个文件,通过渲染模板替换文件的内容,使用文件对象作为模板的数据或上下文。 类似于 ,但有以下区别: 使用支持多个模板引擎。 使用 File 对象本身的属性作为模板上下文。 用法 安装为开发依赖项:...
ES5的apply手写实现
口香糖应用样式邮件处理器用法 <!...< head >< meta charset =" UTF-8 " >< title > Document <... pipe ( applyStyle ( options ) ) . pipe ( gulp . dest ( 'dist' ) ) ; // index.h