JavaScript 參數(shù)中的數(shù)組展開(kāi) [譯]
更新時(shí)間：2012年09月21日 00:32:48 作者：
有些時(shí)候,我們需要把一個(gè)數(shù)組展開(kāi)成多個(gè)元素,然后把這些元素作為函數(shù)調(diào)用的參數(shù).JavaScript中可以使用Function.prototype.apply來(lái)實(shí)現(xiàn)這種展開(kāi)操作,但它不能被應(yīng)用在執(zhí)行構(gòu)造函數(shù)的情況下.本文解釋了什么是展開(kāi)操作以及如何在使用new運(yùn)算符的同時(shí)進(jìn)行展開(kāi)操作
譯者注:本文要講的是ECMAScript 6中的知識(shí)點(diǎn),如果你連ES5都不了解的話.我得說(shuō),你已經(jīng)很落后了.CSS4,HTML6,甚至ES7 ES8都已經(jīng)開(kāi)始規(guī)劃了,趕緊形動(dòng)起來(lái)吧,否則淘汰!
有些時(shí)候,我們需要把一個(gè)數(shù)組展開(kāi)成多個(gè)元素,然后把這些元素作為函數(shù)調(diào)用的參數(shù).JavaScript中可以使用Function.prototype.apply來(lái)實(shí)現(xiàn)這種展開(kāi)操作,但它不能被應(yīng)用在執(zhí)行構(gòu)造函數(shù)的情況下.本文解釋了什么是展開(kāi)操作以及如何在使用new運(yùn)算符的同時(shí)進(jìn)行展開(kāi)操作.
1.展開(kāi)(Spreading)
展開(kāi)的意思是在一個(gè)函數(shù)調(diào)用或方法調(diào)用中,或者執(zhí)行一個(gè)構(gòu)造函數(shù)時(shí),通過(guò)一個(gè)數(shù)組來(lái)提供所需的參數(shù).在Python中,這種操作稱之為unpacking. ECMAScript.next中已經(jīng)有了(展開(kāi)操作符)spread operator (表示為一個(gè)前綴...)來(lái)執(zhí)行這個(gè)展開(kāi)操作.在目前的JavaScript中,你可以通過(guò)Function.prototype.apply方法來(lái)實(shí)現(xiàn)同樣的效果.
譯者注:展開(kāi)操作符除了能用在實(shí)參的位置,把數(shù)組展開(kāi),還可以用在形參的位置,表示剩余參數(shù).請(qǐng)看我翻譯的MDN文檔剩余參數(shù)
2.展開(kāi)函數(shù)參數(shù)
Math.max()方法返回它的0到若干個(gè)數(shù)值類(lèi)型的參數(shù)中的最大值.有了展開(kāi)操作符,你可以直接使用一個(gè)數(shù)組來(lái)作為參數(shù):
Math.max(...[13, 7, 30])
這等同于下面的寫(xiě)法
復(fù)制代碼 代碼如下:
Math.max(13, 7, 30)
在目前的JavaScript中,你可以使用apply().
復(fù)制代碼 代碼如下:
> Math.max.apply(null, [13, 7, 30])
30
apply方法的作用是:使用下面的這種調(diào)用方式:
復(fù)制代碼 代碼如下:
func.apply(thisValue, [param1, param2, ...])
來(lái)代替這種
復(fù)制代碼 代碼如下:
thisValue.func(param1, param2, ...)
需要注意的是,func不一定是屬于thisValue的方法,apply可以讓它臨時(shí)擁有這個(gè)方法.
3.展開(kāi)構(gòu)造函數(shù)的參數(shù)
Date構(gòu)造函數(shù)接受幾個(gè)數(shù)值類(lèi)型的參數(shù),產(chǎn)生一個(gè)Date對(duì)象.通過(guò)展開(kāi)操作符,你可以直接傳入一個(gè)數(shù)組.
復(fù)制代碼 代碼如下:
new Date(...[2011, 11, 24]) // 2011年的圣誕夜
但是,這次我們不能使用apply方法來(lái)實(shí)現(xiàn)展開(kāi)操作,因?yàn)樗荒芘cnew一起工作:
復(fù)制代碼 代碼如下:
> new Date.apply(null, [2011, 11, 24])
TypeError: function apply() { [native code] } is not a constructor
new運(yùn)算符希望Date.apply是一個(gè)構(gòu)造函數(shù).就算你用小括號(hào)將這個(gè)表達(dá)式括起來(lái),根本問(wèn)題還是存在:apply執(zhí)行的是一個(gè)函數(shù)調(diào)用,它不能將參數(shù)傳遞給new運(yùn)算符.
3.1 解決辦法
第一步. 我們先讓結(jié)果變的正確,稍候再考慮怎么用數(shù)組代替分割開(kāi)的參數(shù).
復(fù)制代碼 代碼如下:
new (Date.bind(null, 2011, 11, 24))
我們先用bind()來(lái)創(chuàng)建一個(gè)無(wú)參數(shù)的函數(shù)(參數(shù)已經(jīng)綁定在這個(gè)綁定函數(shù)的內(nèi)部了),然后使用new調(diào)用它,就像調(diào)用一個(gè)普通的構(gòu)造函數(shù)一樣.bind的函數(shù)簽名如下:
復(fù)制代碼 代碼如下:
func.bind(thisValue, arg1, arg2, ...)
bind函數(shù)將原函數(shù)func轉(zhuǎn)變成一個(gè)全新的函數(shù),這個(gè)全新函數(shù)的this值永遠(yuǎn)是參數(shù)thisValue指定的值,并且它的初始參數(shù)包含了從arg1開(kāi)始到最后的所有參數(shù).當(dāng)調(diào)用這個(gè)新函數(shù)時(shí),新添加的參數(shù)會(huì)跟隨在那些已有的通過(guò)bind綁定的參數(shù)后面.MDN上有更詳細(xì)的資料.注意上面的例子中,第一個(gè)參數(shù)是null,因?yàn)?TT>Date函數(shù)并不需要一個(gè)thisValue:在作為構(gòu)造函數(shù)調(diào)用時(shí),new運(yùn)算符會(huì)覆蓋掉通過(guò)bind指定的thisValue.
第二步.我們想把數(shù)組傳給bind.所以再次使用了apply,將一個(gè)數(shù)組轉(zhuǎn)換為展開(kāi)的參數(shù)傳遞給bind函數(shù).
復(fù)制代碼 代碼如下:
new (Function.prototype.bind.apply(
Date, [null].concat([2011, 11, 24])))
我們?cè)诤瘮?shù)Function.prototype.bind上調(diào)用apply方法,帶有兩個(gè)參數(shù):
•第一個(gè)參數(shù): this的值指定為Date, 也就相當(dāng)于上面寫(xiě)的的Date.bind(...).
•第二個(gè)參數(shù): 傳給bind方法的參數(shù),null和后面的數(shù)組[2011, 11, 24]連接成的新數(shù)組.
3.2 一個(gè)庫(kù)函數(shù)
Mozilla建議將上述工作封裝成一個(gè)庫(kù)方法.下面的代碼正是在它們的建議之上稍微修改了一下:
復(fù)制代碼 代碼如下:
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();
};
}
運(yùn)行一下:
復(fù)制代碼 代碼如下:
> Date.construct([2011, 11, 24])
Sat Dec 24 2011 00:00:00 GMT+0100 (CET)
3.3 一個(gè)看似更簡(jiǎn)單的解決方案
你可以手動(dòng)實(shí)現(xiàn)new運(yùn)算符的操作.例如:
復(fù)制代碼 代碼如下:
var foo = new Foo("abc");
實(shí)際上等同于:
復(fù)制代碼 代碼如下:
var foo = Object.create(Foo.prototype);
Foo.call(foo, "abc");
根據(jù)這個(gè)原理,我們可以寫(xiě)一個(gè)簡(jiǎn)單的庫(kù)方法:
復(fù)制代碼 代碼如下:
Function.prototype.construct = function(argArray) {
var constr = this;
var inst = Object.create(constr.prototype);
constr.apply(inst, argArray);
return inst;
};
唉!Date作為一個(gè)普通函數(shù)來(lái)調(diào)用和作為一個(gè)構(gòu)造函數(shù)來(lái)調(diào)用是一樣的:它會(huì)忽略掉call()和apply()方法中第一個(gè)參數(shù)指定的this值,總會(huì)生成并返回一個(gè)新的實(shí)例.
譯者注:這里作者理解錯(cuò)了,Date作為普通函數(shù)調(diào)用和作為構(gòu)造函數(shù)來(lái)調(diào)用是完全不一樣的.不加new的情況下,無(wú)論有沒(méi)有參數(shù),Date()只會(huì)返回當(dāng)前時(shí)間的字符串,也就是(new Date()).toString()
復(fù)制代碼 代碼如下:
> Date.construct([2011, 11, 24])
{}
譯者注:內(nèi)置的構(gòu)造函數(shù)中,Array(),Function(),RegExp(),Error()等構(gòu)造函數(shù)在調(diào)用時(shí),加new或不加幾乎一樣.比如Array(10)也是生成一個(gè)數(shù)組,但Number(),String(),Boolean()就不一樣了.不加new它們是類(lèi)型轉(zhuǎn)換函數(shù),返回的是原始值,加new是構(gòu)造函數(shù),返回的是對(duì)象值.
復(fù)制代碼 代碼如下:
>typeof Number("1")
"number"
>typeof new Number("1")
"object"
正如你所看到的,在操作Date()方法時(shí),我們所寫(xiě)的這個(gè)construct()方法并不能如期工作,而且還有一些其他的內(nèi)置構(gòu)造函數(shù)也表現(xiàn)的和Date一樣.不過(guò)如果是在操作一個(gè)庫(kù)中自定義的構(gòu)造函數(shù)的時(shí)候,這個(gè)方法基本可以正常工作(少部分構(gòu)造函數(shù)返回了自己指定的對(duì)象值,而不是返回了默認(rèn)的自動(dòng)生成的實(shí)例this).
譯者注:一個(gè)構(gòu)造函數(shù)的return語(yǔ)句只要返回的是個(gè)對(duì)象值,就會(huì)覆蓋掉默認(rèn)的this值.比如:
復(fù)制代碼 代碼如下:
function Func1(){
this.value = "this"; return {}
}
function Func2(){
this.value = "this"; return 1}function Func3(){ this.value = "this";}>new Func1() //返回的{}是個(gè)對(duì)象值,覆蓋了默認(rèn)的this.{}>new Func2() //返回的1是個(gè)原始值,所以仍然返回默認(rèn)的this.{value:"this"}>new Func3() //沒(méi)有return語(yǔ)句,默認(rèn)返回了undefined,是個(gè)原始值,所以仍然返回默認(rèn)的this.{value:"this"}>new Func3 //沒(méi)有參數(shù)時(shí),小括號(hào)可以省略.{value:"this"}
相關(guān)文章
js RuntimeObject() 獲取ie里面自定義函數(shù)或者屬性的集合
取得ie 里面 自定義函數(shù)或者屬性的集合 使用RuntimeObject()實(shí)現(xiàn)，需要的朋友可以參考下。2010-11-11
這篇文章主要介紹了js獲取元素外鏈樣式的方法,分別在標(biāo)準(zhǔn)瀏覽器與IE瀏覽器兩種情況下實(shí)現(xiàn)獲取對(duì)應(yīng)樣式的功能,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01
動(dòng)態(tài)創(chuàng)建script標(biāo)簽實(shí)現(xiàn)跨域資源訪問(wèn)的方法介紹
本篇文章主要是對(duì)動(dòng)態(tài)創(chuàng)建script標(biāo)簽實(shí)現(xiàn)跨域資源訪問(wèn)的方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
利用js實(shí)現(xiàn)在瀏覽器狀態(tài)欄顯示訪問(wèn)者在本頁(yè)停留的時(shí)間
本文為大家介紹下利用JavaScript實(shí)現(xiàn)在瀏覽器狀態(tài)欄顯示停留時(shí)間即在狀態(tài)欄上顯示訪問(wèn)者在本頁(yè)停留的時(shí)間2013-12-12
JavaScript關(guān)于某元素點(diǎn)擊事件的監(jiān)聽(tīng)和觸發(fā)
本文主要介紹了JavaScript關(guān)于某元素點(diǎn)擊事件的監(jiān)聽(tīng)和觸發(fā)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
在做網(wǎng)頁(yè)時(shí)（其實(shí)是網(wǎng)頁(yè)木馬呵呵），最讓人煩惱的是自己辛辛苦苦寫(xiě)出來(lái)的客戶端IE運(yùn)行的JAVASCRIPT代碼常常被別人輕易的拷貝，實(shí)在讓自己的心里有點(diǎn)不是滋味，要知道自己寫(xiě)點(diǎn)東西也挺累的2008-06-06
本文主要對(duì)Array和String方法進(jìn)行總結(jié)，每一部分總結(jié)后有實(shí)例代碼，代碼中黃色框方法不改變?cè)瓟?shù)組。PS:所有實(shí)例結(jié)果均一一運(yùn)行所得。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
下面小編就為大家?guī)?lái)一篇form表單轉(zhuǎn)Json提交的方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
先看一道JavaScript題目，據(jù)說(shuō)是國(guó)內(nèi)某知名互聯(lián)網(wǎng)企業(yè)的JavaScript筆試題，如果對(duì)正則的全局匹配模式不了解的話可能會(huì)對(duì)下面的輸出結(jié)果感到疑惑。2011-04-04
js精準(zhǔn)的倒計(jì)時(shí)函數(shù)分享
這篇文章主要為大家分享了js實(shí)現(xiàn)精準(zhǔn)的倒計(jì)時(shí)函數(shù)，如何實(shí)現(xiàn)倒計(jì)時(shí)模塊，感興趣的小伙伴們可以參考一下2016-06-06