使用apply方法處理陣列的三個技巧[譯]_javascript技巧

apply方法

apply是所有函數都有的方法.它的簽章如下:
func.apply(thisValue, [arg1, arg2, ...])
如果不考慮thisValue的影響,上面的呼叫等同於:
func(arg1, arg2, ...)
也就是說,apply允許我們將一個數組"解開"成為一個個的參數再傳遞給呼叫函數.讓我們分別看看apply使用中的三個技巧.

技巧1: 將一個數組傳遞給一個不接受數組作為參數的函數

JavaScript中沒有傳回一個陣列中最大值的函數.但是,有一個函數Math.max可以傳回任意多個數值類型的參數中的最大值.再配合apply,我們可以實現我們的目的:

複製程式碼 程式碼如下:

> Math.max.apply(null, [10, -null, [10, - 1, 5])
10

譯者註:注意Math.max方法的參數中只要有一個值被轉為NaN,則該方法直接返回NaN

複製程式碼 程式碼如下:

>Math.max(1,null) //相當於Math.max( 1,0)
1
>Math.max(1,undefinded) //相當於Math.max(1,NaN)
NaN

>Math.max(0,- 0) //正零比負零大,和==不同
0
>Math.max(-0,-1) //負零比-1大
-0

技巧2: 填補稀疏數組

數組中的縫隙
這裡提醒一下讀者:在JavaScript,一個數組就是一個數字到值的映射.所以如果某個索引處缺失了一個元素(一條縫隙)和某個元素的值為undefined,是兩種不同的情況.前者在被Array.prototype中的相關方法(forEach, map, 等.)遍歷時,會跳過那些缺少的元素,而後者不會:

複製程式碼 程式碼如下:

> ["a",,"b"].forEach(function (x) { console.log(x) })
a


> ["a", undefined,"b"].forEach(function (x) { console.log(x) })
a
undefined

譯者註:這裡作者說"數組就是一個數字到值的映射",嚴格意義上是不對的,正確的說法是"數組就是一個字符串到值的映射".下面是證據:

複製程式碼 程式碼如下:

>for (i in ["a", "b"]) {
console.log(typeof i ) //陣列的索引其實是字串
}
"string"
"string"

>["a", "b"].forEach(function (x, i) {
console.log(typeof i) //這裡的i其實不是索引,只是個數字型別的累加器
})
"number"
"number"

你可以使用in運算子來偵測陣列中是否有縫隙.

複製程式碼 程式碼如下:

> 1 in ["a",,"b"]
false
> 1 in ["a", undefined, "b"]
true

譯者註:這裡之所以用1可以,是因為in運算子會把1轉換成"1".

你過你嘗試讀取這個縫隙的值,會返回undefined ,和實際的undefined元素是一樣.

複製程式碼 程式碼如下:

程式碼如下:


> [">> ["> [" a",,"b"][1]

undefined
> ["a", undefined, "b"][1]
undefined
譯者註: [1]也會轉換成["1"]


填補縫隙

apply配合Array(這裡不需要加new)使用,可以將陣列中的縫隙填補為undefined元素:

複製程式碼

程式碼如下:
[ 'a', undefined, 'b' ]

這都是因為apply不會忽略陣列中的縫隙,會把縫隙當作undefined參數傳遞給函數: 複製程式碼

程式碼如下:

> function returnArgs() { return [].slice.call(arguments) }
> returnArgs.apply(null, ["a","b"])
[ 'a ', undefined, 'b' ]

但需要注意的是,如果Array方法接收到的參數是一個單獨的數字,則會把這個參數當成數組長度,傳回一個新數組:

複製程式碼 程式碼如下:

> Array.apply(null, [ 3 ])
[ , , ]

因此,最可靠的方法是寫一個這樣的函數來做這種工作:

複製代碼 代碼如下:

function fillHoles(arr) {
var result = [];
for(var i=0; i result[i] = arr[i];
}
return result;
}

執行:

複製程式碼 程式碼如下:

> fillHoles(["a",,"b"])
[ 'a', undefined, 'b' ]

Underscore中的_.compact函數會移除所有在陣列中的假值,包括縫隙:

複製程式碼 程式碼如下:

> _.compact(["a",,"b"])
[ 'a', 'b' ]
> _.compact(["a", undefined, "b"])
[ 'a', 'b' ]
> _.compact(["a", false, "b "])
[ 'a', 'b' ]

技巧3: 扁平化陣列

任務:將一個包含多個陣列元素的陣列轉換為一階陣列.我們利用apply解包數組的能力來配合concat來做這件事:

複製程式碼 程式碼如下:

> Array.prototype.concat.apply([], [["a"], ["b"]])
[ 'a' , 'b' ]

混合非數組類型的元素也可以:

複製代碼 代碼如下:

> Array.prototype.concat.apply([], [["a"], "b"])
[ 'a', 'b' ]

apply方法的thisValue必須指定為[],因為concat是一個陣列的方法,不是一個獨立的函數.這種寫法的限制是最多只能扁平化二階數組:

複製程式碼 程式碼如下:

> Array.prototype.concat.apply([], [[["a "]], ["b"]])
[ [ 'a' ], 'b' ]

所以你應該考慮一個替代方案.例如Underscore中的_.flatten函數就可以處理任一層數的巢狀陣列：

複製程式碼 程式碼如下:

程式碼如下:

🎜> 🎜> 🎜> flatten([[["a"]], ["b"]])
[ 'a', 'b' ] 參考

JavaScript: sparse arrays vs. dense arrays

ECMAScript.next: Array.from() and Array.of()