使用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()

(0)

相关推荐

  • 小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能

    我们再来聊聊Function.apply() 在提升程序性能方面的技巧. 我们先从 Math.max() 函数说起,  Math.max后面可以接任意个参数,最后返回所有参数中的最大值. 比如  alert(Math.max(5,8))   //8alert(Math.max(5,7,9,3,1,6))   //9 但是在很多情况下,我们需要找出数组中最大的元素.var arr=[5,7,9,1]alert(Math.max(arr))    //   这样却是不行的.一定要这样写 functi

  • js/jquery解析json和数组格式的方法详解

    在解析之前,我们必须弄清楚几个概念:数组,关联数组以及json之间有哪些区别和联系点? 一.概念介绍1.数组 语法: ECMAScript v3规定了数组直接量的语法,JavaScript 1.2和JScript 3.0实现了它.可以把-个用逗号分隔的表达式列表放在方括号中,创建并初始化-个数组.这些表达式的值将成为数组元素.例如: var a = [1, true, 'abc']; 具体操作查看API. ps:必须方括号隔开. 2.关联数组 1.语法:var myhash= {"key1″:&

  • 解析javascript 数组以及json元素的添加删除

    javasscript删除数组的3种方法1,用shift()方法shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefinedvar chaomao=[1,2,3,4,5]var chaomao.shift()//得到1alert(chaomao)//[2,3,4,5] 2,用pop()方法pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回undefinedvar chaomao=[1,2,3,4,5]var chaomao.pop()//得到5alert

  • js数组转json并在后台对其解析具体实现

    想必大家在开发过程中也遇到类似问题,如果直接将js获取的数组传给后台,后台是无法区分数组的,因为js数组如果是二维的就是这样的:1,张三,23,2,李四,26 所以在此对其解决方法进行整理.希望能给大家带去帮助 首先需要在js里面对数组进行转换为json格式 js代码如下: 复制代码 代码如下: /**     *js数组转json     *     */     function arrayToJson(o) {      var r = [];      if (typeof o == "

  • 使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧

    我们再来聊聊Function.apply() 在提升程序性能方面的技巧. 我们先从 Math.max() 函数说起, Math.max后面可以接任意个参数,最后返回所有参数中的最大值. 比如 alert(Math.max(5,8)) //8 alert(Math.max(5,7,9,3,1,6)) //9 但是在很多情况下,我们需要找出数组中最大的元素. var arr=[5,7,9,1] alert(Math.max(arr)) // 这样却是不行的.一定要这样写 function getMa

  • jquery遍历筛选数组的几种方法和遍历解析json对象

    jquery grep()筛选遍历数组 复制代码 代码如下: $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in filtera

  • Jquery解析json字符串及json数组的方法

    本文实例讲述了Jquery解析json字符串及json数组的方法.分享给大家供大家参考.具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.6.2.min.js"></script> </head> <body> <hr /> <h3>

  • Android解析json数组对象的方法及Apply和数组的三个技巧

    json是种常用的数据传输格式,在android开发中,如何借助java语言实现对json数组对象的解析呢,请参阅下面的关键代码: import org.json.JSONArray; import org.json.JSONObject; //jsonData的数据格式:[{ "id": "27JpL~jd99w9nM01c000qc", "version": "abc" },{ "id": "

  • 关于JS数组追加数组采用push.apply的问题

    复制代码 代码如下: a = new Array();b = new Array(125624);                     a.push.apply(a, b); 以上的代码在mac的chrome下抛出了如下的异常 复制代码 代码如下: Uncaught RangeError: Maximum call stack size exceeded 如果把数组改为b = new Array(125623);小一个元素居然就好了,测试了一下其他浏览器也都有大数组才出错的问题,但不同浏览器

  • JS解析json数据并将json字符串转化为数组的实现方法

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <SCRIPT LANGUAGE="JavaScript"> var t="{'firstName': 'cyra', 'lastName': 'ric

随机推荐