使用apply方法處理數(shù)組的三個(gè)技巧[譯]
apply是所有函數(shù)都有的方法.它的簽名如下:
func.apply(thisValue, [arg1, arg2, ...])
如果不考慮thisValue的影響,上面的調(diào)用等同于:
func(arg1, arg2, ...)
也就是說,apply允許我們將一個(gè)數(shù)組"解開"成為一個(gè)個(gè)的參數(shù)再傳遞給調(diào)用函數(shù).讓我們分別看看apply使用中的三個(gè)技巧.
技巧1: 將一個(gè)數(shù)組傳遞給一個(gè)不接受數(shù)組作為參數(shù)的函數(shù)
JavaScript中沒有返回一個(gè)數(shù)組中最大值的函數(shù).但是,有一個(gè)函數(shù)Math.max可以返回任意多個(gè)數(shù)值類型的參數(shù)中的最大值.再配合apply,我們可以實(shí)現(xiàn)我們的目的:
> Math.max.apply(null, [10, -1, 5])
10
譯者注:注意Math.max方法的參數(shù)中只要有一個(gè)值被轉(zhuǎn)為NaN,則該方法直接返回NaN
>Math.max(1,null) //相當(dāng)于Math.max(1,0)
1
>Math.max(1,undefinded) //相當(dāng)于Math.max(1,NaN)
NaN
>Math.max(0,-0) //正零比負(fù)零大,和==不同
0
>Math.max(-0,-1) //負(fù)零比-1大
-0
技巧2: 填補(bǔ)稀疏數(shù)組
數(shù)組中的縫隙
這里提醒一下讀者:在JavaScript中,一個(gè)數(shù)組就是一個(gè)數(shù)字到值的映射.所以如果某個(gè)索引處缺失了一個(gè)元素(一條縫隙)和某個(gè)元素的值為undefined,是兩種不同的情況.前者在被Array.prototype中的相關(guān)方法(forEach, map, 等.)遍歷時(shí),會(huì)跳過那些缺失的元素,而后者不會(huì):
> ["a",,"b"].forEach(function (x) { console.log(x) })
a
> ["a",undefined,"b"].forEach(function (x) { console.log(x) })
a
undefined
譯者注:這里作者說"數(shù)組就是一個(gè)數(shù)字到值的映射",嚴(yán)格意義上是不對的,正確的說法是"數(shù)組就是一個(gè)字符串到值的映射".下面是證據(jù):
>for (i in ["a", "b"]) {
console.log(typeof i) //數(shù)組的索引實(shí)際上是個(gè)字符串
}
"string"
"string"
>["a", "b"].forEach(function (x, i) {
console.log(typeof i) //這里的i實(shí)際上不是索引,只是個(gè)數(shù)字類型的累加器
})
"number"
"number"
你可以使用in運(yùn)算符來檢測數(shù)組中是否有縫隙.
> 1 in ["a",,"b"]
false
> 1 in ["a", undefined, "b"]
true
譯者注:這里之所以用1可以,是因?yàn)閕n運(yùn)算符會(huì)把1轉(zhuǎn)換成"1".
你過你嘗試讀取這個(gè)縫隙的值,會(huì)返回undefined,和實(shí)際的undefined元素是一樣.
> ["a",,"b"][1]
undefined
> ["a", undefined, "b"][1]
undefined
譯者注:[1]也會(huì)被轉(zhuǎn)換成["1"]
填補(bǔ)縫隙
apply配合Array(這里不需要加new)使用,可以將數(shù)組中的縫隙填補(bǔ)為undefined元素:
> Array.apply(null, ["a",,"b"])
[ 'a', undefined, 'b' ]
這都是因?yàn)閍pply不會(huì)忽略數(shù)組中的縫隙,會(huì)把縫隙作為undefined參數(shù)傳遞給函數(shù):
> function returnArgs() { return [].slice.call(arguments) }
> returnArgs.apply(null, ["a",,"b"])
[ 'a', undefined, 'b' ]
但需要注意的是,如果Array方法接收到的參數(shù)是一個(gè)單獨(dú)的數(shù)字,則會(huì)把這個(gè)參數(shù)當(dāng)成數(shù)組長度,返回一個(gè)新數(shù)組:
> Array.apply(null, [ 3 ])
[ , , ]
因此,最靠譜的方法是寫一個(gè)這樣的函數(shù)來做這種工作:
function fillHoles(arr) {
var result = [];
for(var i=0; i < arr.length; i++) {
result[i] = arr[i];
}
return result;
}
執(zhí)行:
> fillHoles(["a",,"b"])
[ 'a', undefined, 'b' ]
Underscore中的_.compact函數(shù)會(huì)移除數(shù)組中的所有假值,包括縫隙:
> _.compact(["a",,"b"])
[ 'a', 'b' ]
> _.compact(["a", undefined, "b"])
[ 'a', 'b' ]
> _.compact(["a", false, "b"])
[ 'a', 'b' ]
技巧3: 扁平化數(shù)組
任務(wù):將一個(gè)包含多個(gè)數(shù)組元素的數(shù)組轉(zhuǎn)換為一個(gè)一階數(shù)組.我們利用apply解包數(shù)組的能力配合concat來做這件事:
> Array.prototype.concat.apply([], [["a"], ["b"]])
[ 'a', 'b' ]
混合非數(shù)組類型的元素也可以:
> Array.prototype.concat.apply([], [["a"], "b"])
[ 'a', 'b' ]
apply方法的thisValue必須指定為[],因?yàn)閏oncat是一個(gè)數(shù)組的方法,不是一個(gè)獨(dú)立的函數(shù).這種寫法的限制是最多只能扁平化二階數(shù)組:
> Array.prototype.concat.apply([], [[["a"]], ["b"]])
[ [ 'a' ], 'b' ]
所以你應(yīng)該考慮一個(gè)替代方案.比如Underscore中的_.flatten函數(shù)就可以處理任意層數(shù)的嵌套數(shù)組:
> _.flatten([[["a"]], ["b"]])
[ 'a', 'b' ]
參考
JavaScript: sparse arrays vs. dense arrays
ECMAScript.next: Array.from() and Array.of()
- 小議Function.apply()之二------利用Apply的參數(shù)數(shù)組化來提高 JavaScript程序性能
- JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法
- 解析javascript 數(shù)組以及json元素的添加刪除
- js數(shù)組轉(zhuǎn)json并在后臺對其解析具體實(shí)現(xiàn)
- jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象
- js/jquery解析json和數(shù)組格式的方法詳解
- 關(guān)于JS數(shù)組追加數(shù)組采用push.apply的問題
- Jquery解析json字符串及json數(shù)組的方法
- 使用Function.apply()的參數(shù)數(shù)組化來提高 JavaScript程序性能的技巧
- Android解析json數(shù)組對象的方法及Apply和數(shù)組的三個(gè)技巧
相關(guān)文章
JavaScript Map實(shí)現(xiàn)原理與底層結(jié)構(gòu)詳解
哈希表(也稱為哈希表)是一種基于鍵直接訪問內(nèi)存存儲位置的數(shù)據(jù)結(jié)構(gòu)。也就是說,它通過計(jì)算一個(gè)鍵值函數(shù)來加速查找,該函數(shù)將要查詢的數(shù)據(jù)映射到表中的某個(gè)位置。該映射函數(shù)稱為散列函數(shù),記錄數(shù)組稱為散列表2022-09-09javascript計(jì)算用戶打開網(wǎng)頁的停留時(shí)間
本文介紹了javascript計(jì)算用戶打開網(wǎng)頁的停留時(shí)間,大家參考使用吧2014-01-01JS設(shè)置隨機(jī)出現(xiàn)2個(gè)數(shù)字的實(shí)例代碼
這篇文章給大家分享基于js設(shè)置隨機(jī)出現(xiàn)2個(gè)數(shù)字的實(shí)例代碼,在文章下面給分享js產(chǎn)生隨機(jī)數(shù)的幾個(gè)用法介紹,感興趣的朋友一起看看吧2017-07-07JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)判斷有效的數(shù)獨(dú)算法,結(jié)合實(shí)例形式分析了javascript數(shù)獨(dú)判斷的原理及相關(guān)算法實(shí)現(xiàn)、使用操作技巧,需要的朋友可以參考下2019-02-02js實(shí)現(xiàn)操作cookie的常見方法總結(jié)【創(chuàng)建、讀取、刪除】
這篇文章主要介紹了js實(shí)現(xiàn)操作cookie的常見方法,結(jié)合實(shí)例形式分析了js操作cookie創(chuàng)建、讀取、刪除相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2020-03-03原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之勻速運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之勻速運(yùn)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08用JavaScript 判斷用戶使用的是 IE6 還是 IE7
判斷IE瀏覽器的腳本,方便根據(jù)瀏覽器不懂,支持不同的代碼的分別調(diào)用。2008-01-01Javascript es7中比較實(shí)用的兩個(gè)方法示例
這篇文章主要給大家分享了關(guān)于Javascript es7中比較實(shí)用的兩個(gè)方法示例,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考借鑒,下面來一起看看吧。2017-07-07Javascript如何實(shí)現(xiàn)雙指控制圖片功能
這篇文章主要介紹了Javascript如何實(shí)現(xiàn)雙指控制圖片功能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02