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 相关文章推荐
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
javascript中验证大写字母、数字和中文
Jan 15 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
thinkPHP5框架自定义验证器实现方法分析
2018/06/11 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
2009/08/03 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
python检测远程服务器tcp端口的方法
2015/03/14 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python线程池threadpool使用篇
2018/04/27 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
财务助理岗位职责
2013/11/10 职场文书
研究生求职推荐信范文
2013/11/30 职场文书
爱国主义主题班会
2015/08/14 职场文书
小学数学教学随笔
2015/08/14 职场文书
医德医风学习心得体会
2016/01/25 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
用JS创建一个录屏功能
2021/11/11 Javascript