使用apply方法处理数组的三个技巧[译]
2018-10-12 13:59
211 查看
apply方法
apply是所有函数都有的方法.它的签名如下:
func.apply(thisValue, [arg1, arg2, ...])
如果不考虑thisValue的影响,上面的调用等同于:
func(arg1, arg2, ...)
也就是说,apply允许我们将一个数组"解开"成为一个个的参数再传递给调用函数.让我们分别看看apply使用中的三个技巧.
技巧1: 将一个数组传递给一个不接受数组作为参数的函数
JavaScript中没有返回一个数组中最大值的函数.但是,有一个函数Math.max可以返回任意多个数值类型的参数中的最大值.再配合apply,我们可以实现我们的目的:
译者注:注意Math.max方法的参数中只要有一个值被转为NaN,则该方法直接返回NaN
技巧2: 填补稀疏数组
数组中的缝隙
这里提醒一下读者:在JavaScript中,一个数组就是一个数字到值的映射.所以如果某个索引处缺失了一个元素(一条缝隙)和某个元素的值为undefined,是两种不同的情况.前者在被Array.prototype中的相关方法(forEach, map, 等.)遍历时,会跳过那些缺失的元素,而后者不会:
译者注:这里作者说"数组就是一个数字到值的映射",严格意义上是不对的,正确的说法是"数组就是一个字符串到值的映射".下面是证据:
你可以使用in运算符来检测数组中是否有缝隙.
译者注:这里之所以用1可以,是因为in运算符会把1转换成"1".
你过你尝试读取这个缝隙的值,会返回undefined,和实际的undefined元素是一样.
译者注:[1]也会被转换成["1"]
填补缝隙
apply配合Array(这里不需要加new)使用,可以将数组中的缝隙填补为undefined元素:
这都是因为apply不会忽略数组中的缝隙,会把缝隙作为undefined参数传递给函数:
但需要注意的是,如果Array方法接收到的参数是一个单独的数字,则会把这个参数当成数组长度,返回一个新数组:
因此,最靠谱的方法是写一个这样的函数来做这种工作:
执行:
技巧3: 扁平化数组
任务:将一个包含多个数组元素的数组转换为一个一阶数组.我们利用apply解包数组的能力配合concat来做这件事:
混合非数组类型的元素也可以:
apply方法的thisValue必须指定为[],因为concat是一个数组的方法,不是一个独立的函数.这种写法的限制是最多只能扁平化二阶数组:
所以你应该考虑一个替代方案.比如Underscore中的_.flatten函数就可以处理任意层数的嵌套数组:
参考
JavaScript: sparse arrays vs. dense arrays
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()
您可能感兴趣的文章:
- 小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
- JS解析json数据并将json字符串转化为数组的实现方法
- 解析javascript 数组以及json元素的添加删除
- js数组转json并在后台对其解析具体实现
- jquery遍历筛选数组的几种方法和遍历解析json对象
- js/jquery解析json和数组格式的方法详解
- 关于JS数组追加数组采用push.apply的问题
- Jquery解析json字符串及json数组的方法
- 使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
- Android解析json数组对象的方法及Apply和数组的三个技巧
相关文章推荐
- 使用apply方法处理数组的三个技巧[译]
- Android解析json数组对象的方法及Apply和数组的三个技巧
- 在Javascript中处理数组之toSource()方法的使用
- PHP 数组处理使用foreach、list、each等三个函数详解
- 安卓开发中,在低版本SDK使用高版本的API会报错。一般处理方法是换一种实现方法,或者在高版本SDK中使用高版本API,低版本SDK中使用效果可能会差点的折衷方案;后者可以用如下技巧来实现。
- [译]Apply和数组:三个技巧
- [占坑] 图像处理中计算积分图使用类似dp的方法而不用树状数组的原因
- 在JavaScript中处理数组之reverse()方法的使用
- [译]Apply和数组:三个技巧
- js使用数组作为参数,直接调用push与apply方法调用push的区别
- js获取数组中最小的值的方法 Math.min.apply(),apply(),call()方法使用
- [译]Apply和数组:三个技巧
- 关于对字符串、数组处理的常见问题与方法,如获取带有空格字符串长度,数组长度等。getline(),sprintf()使用。
- Apply和数组:三个技巧
- 使用SecureCRT时屏幕僵死的处理方法――Linux终端设置技巧
- C#字符串数组排序 C#排序算法大全 C#字符串比较方法 一个.NET通用JSON解析/构建类的实现(c#) C#处理Json文件 asp.net使用Jquery+iframe传值问题
- pandas 使用apply同时处理两列数据的方法
- 在Javascript中处理数组之toSource()方法的使用
- Apply和数组:三个技巧
- 在JavaScript中处理数组之reverse()方法的使用