[译]Apply和数组:三个技巧

转载 2015年07月07日 10:28:43

http://www.cnblogs.com/ziyunfei/archive/2012/09/18/2690412.html

原文:http://www.2ality.com/2012/07/apply-tricks.html


本文要讲的是:使用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
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' ]

参考

  1. [译]JavaScript中的稀疏数组与密集数组
  2. ECMAScript.next: Array.from() and Array.of()

[译]Apply和数组:三个技巧

http://www.cnblogs.com/ziyunfei/archive/2012/09/18/2690412.html apply是所有函数都有的方法.它的签名如下: fu...
  • SalmonellaVaccine
  • SalmonellaVaccine
  • 2014年08月22日 17:16
  • 326

Apply和数组:三个技巧

原文:http://www.2ality.com/2012/07/apply-tricks.html 本文要讲的是:使用apply方法处理数组的三个技巧. apply方法 apply是所...
  • WHACKW
  • WHACKW
  • 2015年06月18日 09:27
  • 301

javascript中Array.apply方法的一个陷阱

今天发现了一个坑,写出来给大家做个教训。 我想把一个Uint8Array类型的数组转换为普通数组,运用了Array.apply方法,产生了一些问题。 var a = new Uint8Array(...
  • jjj4856951
  • jjj4856951
  • 2016年04月18日 17:40
  • 1500

call和apply的用法以及apply的一些妙用

简要介绍了apply和call的作用及一些巧妙用法。
  • steven_zj
  • steven_zj
  • 2016年11月07日 21:58
  • 710

如何利用call,apply获取数组的最大值最小值

1,取最大值 var arr = [1,3,7,22,677,-1,2,70]; Math.max.apply(Math, arr);//677 Math.max.call(Math, 1,3,7...
  • dlshbn
  • dlshbn
  • 2016年11月03日 21:52
  • 700

简谈关于angularjs中$socpe.$apply()的应用场景

$scope.$apply():它的作用是调用$scope.$digest()去更新页面上的值,使页面上的值和模型中的值保持同步。angularjs为我们提供的常用的事件函数中通常都已经帮我们调用了$...
  • zhujun_xiaoxin
  • zhujun_xiaoxin
  • 2017年02月16日 15:03
  • 401

[练习]在一个数组中存300条记录,用3个线程统计求和。

class Test{ /*定义数组: *1.成员整型数组array,容量300 *2.将array初始化方法封装在构造函数中 *3.对100个数求和的方法封装成arrayAdd,参数为数组array...
  • msxr369
  • msxr369
  • 2016年01月12日 17:49
  • 250

Javascript中call和apply的区别与详解

转自:http://www.7old.com/jiaocheng/show-1412.html 在js中call和apply它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式有所区...
  • chelen_jak
  • chelen_jak
  • 2014年03月11日 16:12
  • 20225

call和apply性能对比

今天写基础库函数each时,看到jquery1.7.2中是分开两种方式执行回调的:call和apply,注释中说call会快些,于是在http://jsperf.com/做了如下测试 普通测...
  • zhengyinhui100
  • zhengyinhui100
  • 2012年08月06日 22:38
  • 1999

Web前端面试指导(三十五):call() 和 apply() 的区别?

题目点评 本题属于比较一般性的问题,稍有接触的同学都是能够掌握的,先说清楚他们的相同点,方法的作用的,在把它们的差异讲清楚。  解题方法 相同点:两个方法产生的作用是完全一样的,都用来改变当前函数调用...
  • lxcao
  • lxcao
  • 2016年10月10日 15:18
  • 2148
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[译]Apply和数组:三个技巧
举报原因:
原因补充:

(最多只允许输入30个字)