JavaScript 参数中的数组展开 [译]


Posted in Javascript onSeptember 21, 2012

译者注:本文要讲的是ECMAScript 6中的知识点,如果你连ES5都不了解的话.我得说,你已经很落后了.CSS4,HTML6,甚至ES7 ES8都已经开始规划了,赶紧形动起来吧,否则淘汰!

有些时候,我们需要把一个数组展开成多个元素,然后把这些元素作为函数调用的参数.JavaScript中可以使用Function.prototype.apply来实现这种展开操作,但它不能被应用在执行构造函数的情况下.本文解释了什么是展开操作以及如何在使用new运算符的同时进行展开操作.

1.展开(Spreading)

展开的意思是在一个函数调用或方法调用中,或者执行一个构造函数时,通过一个数组来提供所需的参数.在Python中,这种操作称之为unpacking. ECMAScript.next中已经有了(展开操作符)spread operator (表示为一个前缀...)来执行这个展开操作.在目前的JavaScript中,你可以通过Function.prototype.apply方法来实现同样的效果.

译者注:展开操作符除了能用在实参的位置,把数组展开,还可以用在形参的位置,表示剩余参数.请看我翻译的MDN文档剩余参数

2.展开函数参数

Math.max()方法返回它的0到若干个数值类型的参数中的最大值.有了展开操作符,你可以直接使用一个数组来作为参数:

Math.max(...[13, 7, 30])
这等同于下面的写法

Math.max(13, 7, 30)

在目前的JavaScript中,你可以使用apply().
> Math.max.apply(null, [13, 7, 30]) 
30

apply方法的作用是:使用下面的这种调用方式:
func.apply(thisValue, [param1, param2, ...])

来代替这种
thisValue.func(param1, param2, ...)

需要注意的是,func不一定是属于thisValue的方法,apply可以让它临时拥有这个方法.

3.展开构造函数的参数

Date构造函数接受几个数值类型的参数,产生一个Date对象.通过展开操作符,你可以直接传入一个数组.

new Date(...[2011, 11, 24]) // 2011年的圣诞夜

但是,这次我们不能使用apply方法来实现展开操作,因为它不能与new一起工作:
> new Date.apply(null, [2011, 11, 24]) 
TypeError: function apply() { [native code] } is not a constructor

new运算符希望Date.apply是一个构造函数.就算你用小括号将这个表达式括起来,根本问题还是存在:apply执行的是一个函数调用,它不能将参数传递给new运算符.

3.1 解决办法
第一步. 我们先让结果变的正确,稍候再考虑怎么用数组代替分割开的参数.

new (Date.bind(null, 2011, 11, 24))

我们先用bind()来创建一个无参数的函数(参数已经绑定在这个绑定函数的内部了),然后使用new调用它,就像调用一个普通的构造函数一样.bind的函数签名如下:
func.bind(thisValue, arg1, arg2, ...)

bind函数将原函数func转变成一个全新的函数,这个全新函数的this值永远是参数thisValue指定的值,并且它的初始参数包含了从arg1开始到最后的所有参数.当调用这个新函数时,新添加的参数会跟随在那些已有的通过bind绑定的参数后面.MDN上有更详细的资料.注意上面的例子中,第一个参数是null,因为Date函数并不需要一个thisValue:在作为构造函数调用时,new运算符会覆盖掉通过bind指定的thisValue.

第二步.我们想把数组传给bind.所以再次使用了apply,将一个数组转换为展开的参数传递给bind函数.

new (Function.prototype.bind.apply( 
Date, [null].concat([2011, 11, 24])))

我们在函数Function.prototype.bind上调用apply方法,带有两个参数:

•第一个参数: this的值指定为Date, 也就相当于上面写的的Date.bind(...).
•第二个参数: 传给bind方法的参数,null和后面的数组[2011, 11, 24]连接成的新数组.

3.2 一个库函数

Mozilla建议将上述工作封装成一个库方法.下面的代码正是在它们的建议之上稍微修改了一下:

if (!Function.prototype.construct) { 
Function.prototype.construct = function(argArray) { 
if (! Array.isArray(argArray)) { 
throw new TypeError("Argument must be an array"); 
} 
var constr = this; 
var nullaryFunc = Function.prototype.bind.apply( 
constr, [null].concat(argArray)); 
return new nullaryFunc(); 
}; 
}

运行一下:
> Date.construct([2011, 11, 24]) 
Sat Dec 24 2011 00:00:00 GMT+0100 (CET)

3.3 一个看似更简单的解决方案
你可以手动实现new运算符的操作.例如:
var foo = new Foo("abc");

实际上等同于:
var foo = Object.create(Foo.prototype); 
Foo.call(foo, "abc");

根据这个原理,我们可以写一个简单的库方法:
Function.prototype.construct = function(argArray) { 
var constr = this; 
var inst = Object.create(constr.prototype); 
constr.apply(inst, argArray); 
return inst; 
};

唉!Date作为一个普通函数来调用和作为一个构造函数来调用是一样的:它会忽略掉call()和apply()方法中第一个参数指定的this值,总会生成并返回一个新的实例.

译者注:这里作者理解错了,Date作为普通函数调用和作为构造函数来调用是完全不一样的.不加new的情况下,无论有没有参数,Date()只会返回当前时间的字符串,也就是(new Date()).toString()

> Date.construct([2011, 11, 24]) 
{}

译者注:内置的构造函数中,Array(),Function(),RegExp(),Error()等构造函数在调用时,加new或不加几乎一样.比如Array(10)也是生成一个数组,但Number(),String(),Boolean()就不一样了.不加new它们是类型转换函数,返回的是原始值,加new是构造函数,返回的是对象值.
>typeof Number("1") 
"number" 
>typeof new Number("1") 
"object"

正如你所看到的,在操作Date()方法时,我们所写的这个construct()方法并不能如期工作,而且还有一些其他的内置构造函数也表现的和Date一样.不过如果是在操作一个库中自定义的构造函数的时候,这个方法基本可以正常工作(少部分构造函数返回了自己指定的对象值,而不是返回了默认的自动生成的实例this).

译者注:一个构造函数的return语句只要返回的是个对象值,就会覆盖掉默认的this值.比如:

function Func1(){ 
 this.value = "this"; return {} 
} 
function Func2(){ 
this.value = "this"; return 1}function Func3(){ this.value = "this";}>new Func1() //返回的{}是个对象值,覆盖了默认的this.{}>new Func2() //返回的1是个原始值,所以仍然返回默认的this.{value:"this"}>new Func3() //没有return语句,默认返回了undefined,是个原始值,所以仍然返回默认的this.{value:"this"}>new Func3 //没有参数时,小括号可以省略.{value:"this"}
Javascript 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
vue2.0移除或更改的一些东西(移除index key)
Aug 28 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
Element input树型下拉框的实现代码
Dec 21 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 #Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 #Javascript
js DOM 元素ID就是全局变量
Sep 20 #Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 #Javascript
JavaScript 更严格的相等 [译]
Sep 20 #Javascript
JavaScript 反科里化 this [译]
Sep 20 #Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 #Javascript
You might like
用php+mysql一个名片库程序
2006/10/09 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
JS 判断代码全收集
2009/04/28 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
浅谈Javascript数组索引
2015/07/29 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
使用jQuery实现动态添加小广告
2017/07/11 jQuery
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
分享6个隐藏的python功能
2017/12/07 Python
python for 循环获取index索引的方法
2019/02/01 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
《春到梅花山》教学反思
2014/04/16 职场文书
八一建军节演讲稿
2014/09/10 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
销售会议开幕词
2015/01/28 职场文书
公务员年终个人总结
2015/02/12 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
公司表扬信格式
2015/05/04 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫
Python+pyaudio实现音频控制示例详解
2022/07/23 Python