当前位置：首页 > 资讯 > 技术文档

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

时间：2021-01-06 10:10 编辑：来源：阅读：
扫一扫，手机访问

摘要：JavaScript 参数中的数组展开 [译]

译者注:本文要讲的是[url=http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts]ECMAScript 6[/url]中的知识点,如果你连[url=http://ecma-international.org/ecma-262/5.1/]ES5[/url]都不了解的话.我得说,你已经很落后了.[url=http://dev.w3.org/csswg/]CSS4[/url],[url=http://www.w3.org/wiki/HTML/next]HTML6[/url],甚至[url=https://news.ycombinator.com/item?id=2983420]ES7 ES8[/url]都已经开始规划了,赶紧形动起来吧,否则淘汰! 有些时候,我们需要把一个数组展开成多个元素,然后把这些元素作为函数调用的参数.JavaScript中可以使用Function.prototype.apply来实现这种展开操作,但它不能被应用在执行构造函数的情况下.本文解释了什么是展开操作以及如何在使用new运算符的同时进行展开操作. [b]1.展开(Spreading)[/b] 展开的意思是在一个函数调用或方法调用中,或者执行一个构造函数时,通过一个数组来提供所需的参数.在Python中,这种操作称之为[i]unpacking[/i]. ECMAScript.next中已经有了[url=http://wiki.ecmascript.org/doku.php?id=harmony:spread](展开操作符)spread operator[/url] (表示为一个前缀...)来执行这个展开操作.在目前的JavaScript中,你可以通过Function.prototype.apply方法来实现同样的效果. 译者注:展开操作符除了能用在实参的位置,把数组展开,还可以用在形参的位置,表示剩余参数.请看我翻译的MDN文档[url=https://developer.mozilla.org/zh-CN/docs/JavaScript/Reference/rest_parameters]剩余参数[/url] [b]2.展开函数参数[/b] Math.max()方法返回它的0到若干个数值类型的参数中的最大值.有了展开操作符,你可以直接使用一个数组来作为参数: Math.max(...[13, 7, 30]) 这等同于下面的写法

[url=https://developer.mozilla.org/zh-CN/docs/JavaScript/Reference/Global_Objects/Function/bind]更详细的资料[/url].注意上面的例子中,第一个参数是null,因为Date函数并不需要一个thisValue:在作为构造函数调用时,new运算符会覆盖掉通过bind指定的thisValue. [b]第二步.[/b]我们想把数组传给bind.所以再次使用了apply,将一个数组转换为展开的参数传递给bind函数.

[url=https://developer.mozilla.org/zh-CN/docs/JavaScript/Reference/Global_Objects/Function/apply#Using_apply_to_chain_constructors]它们的建议[/url]之上稍微修改了一下:

[u]复制代码[/u] 代码如下:

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();
};
}

运行一下:

[u]复制代码[/u] 代码如下:

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

3.3 一个看似更简单的解决方案你可以手动实现new运算符的操作.例如:

[u]复制代码[/u] 代码如下:

var foo = new Foo("abc");

实际上等同于:

[u]复制代码[/u] 代码如下:

var foo = Object.create(Foo.prototype);
Foo.call(foo, "abc");

根据这个原理,我们可以写一个简单的库方法:

[u]复制代码[/u] 代码如下:

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

[u]复制代码[/u] 代码如下:

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

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

[u]复制代码[/u] 代码如下:

>typeof Number("1")
"number"
>typeof new Number("1")
"object"

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

[u]复制代码[/u] 代码如下:

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"}

全部评论(0)

上一篇：js中计算两个日期间的工作日的简单实例
下一篇：一个层慢慢增高展开,有种向下滑动的效果

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部