JavaScript 參數(shù)中的數(shù)組展開 [譯]
更新時間：2012年09月21日 00:32:48 作者：
有些時候,我們需要把一個數(shù)組展開成多個元素,然后把這些元素作為函數(shù)調(diào)用的參數(shù).JavaScript中可以使用Function.prototype.apply來實(shí)現(xiàn)這種展開操作,但它不能被應(yīng)用在執(zhí)行構(gòu)造函數(shù)的情況下.本文解釋了什么是展開操作以及如何在使用new運(yùn)算符的同時進(jìn)行展開操作
譯者注:本文要講的是ECMAScript 6中的知識點(diǎn),如果你連ES5都不了解的話.我得說,你已經(jīng)很落后了.CSS4,HTML6,甚至ES7 ES8都已經(jīng)開始規(guī)劃了,趕緊形動起來吧,否則淘汰!
有些時候,我們需要把一個數(shù)組展開成多個元素,然后把這些元素作為函數(shù)調(diào)用的參數(shù).JavaScript中可以使用Function.prototype.apply來實(shí)現(xiàn)這種展開操作,但它不能被應(yīng)用在執(zhí)行構(gòu)造函數(shù)的情況下.本文解釋了什么是展開操作以及如何在使用new運(yùn)算符的同時進(jìn)行展開操作.
1.展開(Spreading)
展開的意思是在一個函數(shù)調(diào)用或方法調(diào)用中,或者執(zhí)行一個構(gòu)造函數(shù)時,通過一個數(shù)組來提供所需的參數(shù).在Python中,這種操作稱之為unpacking. ECMAScript.next中已經(jīng)有了(展開操作符)spread operator (表示為一個前綴...)來執(zhí)行這個展開操作.在目前的JavaScript中,你可以通過Function.prototype.apply方法來實(shí)現(xiàn)同樣的效果.
譯者注:展開操作符除了能用在實(shí)參的位置,把數(shù)組展開,還可以用在形參的位置,表示剩余參數(shù).請看我翻譯的MDN文檔剩余參數(shù)
2.展開函數(shù)參數(shù)
Math.max()方法返回它的0到若干個數(shù)值類型的參數(shù)中的最大值.有了展開操作符,你可以直接使用一個數(shù)組來作為參數(shù):
Math.max(...[13, 7, 30])
這等同于下面的寫法
復(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, ...])
來代替這種
復(fù)制代碼 代碼如下:
thisValue.func(param1, param2, ...)
需要注意的是,func不一定是屬于thisValue的方法,apply可以讓它臨時擁有這個方法.
3.展開構(gòu)造函數(shù)的參數(shù)
Date構(gòu)造函數(shù)接受幾個數(shù)值類型的參數(shù),產(chǎn)生一個Date對象.通過展開操作符,你可以直接傳入一個數(shù)組.
復(fù)制代碼 代碼如下:
new Date(...[2011, 11, 24]) // 2011年的圣誕夜
但是,這次我們不能使用apply方法來實(shí)現(xiàn)展開操作,因為它不能與new一起工作:
復(fù)制代碼 代碼如下:
> new Date.apply(null, [2011, 11, 24])
TypeError: function apply() { [native code] } is not a constructor
new運(yùn)算符希望Date.apply是一個構(gòu)造函數(shù).就算你用小括號將這個表達(dá)式括起來,根本問題還是存在:apply執(zhí)行的是一個函數(shù)調(diào)用,它不能將參數(shù)傳遞給new運(yùn)算符.
3.1 解決辦法
第一步. 我們先讓結(jié)果變的正確,稍候再考慮怎么用數(shù)組代替分割開的參數(shù).
復(fù)制代碼 代碼如下:
new (Date.bind(null, 2011, 11, 24))
我們先用bind()來創(chuàng)建一個無參數(shù)的函數(shù)(參數(shù)已經(jīng)綁定在這個綁定函數(shù)的內(nèi)部了),然后使用new調(diào)用它,就像調(diào)用一個普通的構(gòu)造函數(shù)一樣.bind的函數(shù)簽名如下:
復(fù)制代碼 代碼如下:
func.bind(thisValue, arg1, arg2, ...)
bind函數(shù)將原函數(shù)func轉(zhuǎn)變成一個全新的函數(shù),這個全新函數(shù)的this值永遠(yuǎn)是參數(shù)thisValue指定的值,并且它的初始參數(shù)包含了從arg1開始到最后的所有參數(shù).當(dāng)調(diào)用這個新函數(shù)時,新添加的參數(shù)會跟隨在那些已有的通過bind綁定的參數(shù)后面.MDN上有更詳細(xì)的資料.注意上面的例子中,第一個參數(shù)是null,因為Date函數(shù)并不需要一個thisValue:在作為構(gòu)造函數(shù)調(diào)用時,new運(yùn)算符會覆蓋掉通過bind指定的thisValue.
第二步.我們想把數(shù)組傳給bind.所以再次使用了apply,將一個數(shù)組轉(zhuǎn)換為展開的參數(shù)傳遞給bind函數(shù).
復(fù)制代碼 代碼如下:
new (Function.prototype.bind.apply(
Date, [null].concat([2011, 11, 24])))
我們在函數(shù)Function.prototype.bind上調(diào)用apply方法,帶有兩個參數(shù):
•第一個參數(shù): this的值指定為Date, 也就相當(dāng)于上面寫的的Date.bind(...).
•第二個參數(shù): 傳給bind方法的參數(shù),null和后面的數(shù)組[2011, 11, 24]連接成的新數(shù)組.
3.2 一個庫函數(shù)
Mozilla建議將上述工作封裝成一個庫方法.下面的代碼正是在它們的建議之上稍微修改了一下:
復(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 一個看似更簡單的解決方案
你可以手動實(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ù)這個原理,我們可以寫一個簡單的庫方法:
復(fù)制代碼 代碼如下:
Function.prototype.construct = function(argArray) {
var constr = this;
var inst = Object.create(constr.prototype);
constr.apply(inst, argArray);
return inst;
};
唉!Date作為一個普通函數(shù)來調(diào)用和作為一個構(gòu)造函數(shù)來調(diào)用是一樣的:它會忽略掉call()和apply()方法中第一個參數(shù)指定的this值,總會生成并返回一個新的實(shí)例.
譯者注:這里作者理解錯了,Date作為普通函數(shù)調(diào)用和作為構(gòu)造函數(shù)來調(diào)用是完全不一樣的.不加new的情況下,無論有沒有參數(shù),Date()只會返回當(dāng)前時間的字符串,也就是(new Date()).toString()
復(fù)制代碼 代碼如下:
> Date.construct([2011, 11, 24])
{}
譯者注:內(nèi)置的構(gòu)造函數(shù)中,Array(),Function(),RegExp(),Error()等構(gòu)造函數(shù)在調(diào)用時,加new或不加幾乎一樣.比如Array(10)也是生成一個數(shù)組,但Number(),String(),Boolean()就不一樣了.不加new它們是類型轉(zhuǎn)換函數(shù),返回的是原始值,加new是構(gòu)造函數(shù),返回的是對象值.
復(fù)制代碼 代碼如下:
>typeof Number("1")
"number"
>typeof new Number("1")
"object"
正如你所看到的,在操作Date()方法時,我們所寫的這個construct()方法并不能如期工作,而且還有一些其他的內(nèi)置構(gòu)造函數(shù)也表現(xiàn)的和Date一樣.不過如果是在操作一個庫中自定義的構(gòu)造函數(shù)的時候,這個方法基本可以正常工作(少部分構(gòu)造函數(shù)返回了自己指定的對象值,而不是返回了默認(rèn)的自動生成的實(shí)例this).
譯者注:一個構(gòu)造函數(shù)的return語句只要返回的是個對象值,就會覆蓋掉默認(rèn)的this值.比如:
復(fù)制代碼 代碼如下:
function Func1(){
this.value = "this"; return {}
}
function Func2(){
this.value = "this"; return 1}function Func3(){ this.value = "this";}>new Func1() //返回的{}是個對象值,覆蓋了默認(rèn)的this.{}>new Func2() //返回的1是個原始值,所以仍然返回默認(rèn)的this.{value:"this"}>new Func3() //沒有return語句,默認(rèn)返回了undefined,是個原始值,所以仍然返回默認(rèn)的this.{value:"this"}>new Func3 //沒有參數(shù)時,小括號可以省略.{value:"this"}
相關(guān)文章
JS實(shí)現(xiàn)勻速與減速緩慢運(yùn)動的動畫效果封裝示例
這篇文章主要介紹了JS實(shí)現(xiàn)勻速與減速緩慢運(yùn)動的動畫效果,結(jié)合實(shí)例形式分析了JavaScript封裝結(jié)合定時器的頁面元素動態(tài)變換效果動畫相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)聯(lián)動選擇器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
函數(shù)和作用域是JavaScript的重要組成部分，我們在使用JavaScript編寫程序的過程中經(jīng)常要用到這兩部分內(nèi)容，借助此文一起來鞏固下學(xué)習(xí)的內(nèi)容吧。2016-12-12
在javascript中實(shí)現(xiàn)函數(shù)數(shù)組的方法
js不進(jìn)行類型檢查，數(shù)組可以存放任何東西。于是我就想數(shù)組里可否存放函數(shù)呢，下面就為大家詳細(xì)介紹下2013-12-12
JavaScript中無法通過div.style.left獲取值的解決方法
這篇文章主要介紹了JavaScript中無法通過div.style.left獲取值的問題分析及解決方法,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)文字無限輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
前端開發(fā)中,字符串處理是比較常見的,下面這篇文章主要給大家介紹了關(guān)于js中常見切割截取字符串的幾種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
說起javascript無人不知無人不曉吧，下面是一些關(guān)于客戶端JS性能的一些優(yōu)化的小技巧，希望對大家有所幫助2013-11-11
本篇文章主要是對JS二維數(shù)組的定義進(jìn)行了說明介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
純Javascript實(shí)現(xiàn)ping功能的方法
這篇文章主要介紹了純Javascript實(shí)現(xiàn)ping功能的方法,實(shí)例分析了javascript實(shí)現(xiàn)ping功能的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03