DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Array.prototype.slice 使用擴展
Array.prototype.slice 使用擴展
編輯:關於JavaScript     
除了正常用法,slice 經常用來將 array-like 對象轉換為 true array.

名詞解釋:array-like object – 擁有 length 屬性的對象,比如 { 0: ‘foo', length: 1 }, 甚至 { length: ‘bar' }. 最常見的 array-like 對象是 arguments 和 NodeList.

查看 V8 引擎 array.js 的源碼,可以將 slice 的內部實現簡化為:
復制代碼 代碼如下:
function slice(start, end) {
var len = ToUint32(this.length), result = [];
for(var i = start; i < end; i++) {
result.push(this[i]);
}
return result;
}

可以看出,slice 並不需要 this 為 array 類型,只需要有 length 屬性即可。並且 length 屬性可以不為 number 類型,當不能轉換為數值時,ToUnit32(this.length) 返回 0.

對於標准浏覽器,上面已經將 slice 的原理解釋清楚了。但是惱人的 ie, 總是給我們添亂子:
復制代碼 代碼如下:
var slice = Array.prototype.slice;
slice.call(); // => IE: Object expected.
slice.call(document.childNodes); // => IE: JScript object expected.

以上代碼,在 ie 裡報錯。可恨 IE 的 Trident 引擎不開源,那我們只有猜測了:
復制代碼 代碼如下:
function ie_slice(start, end) {
var len = ToUint32(this.length), result = [];

if(__typeof__ this !== 'JScript Object') throw 'JScript object expected';
if(this === null) throw 'Oject expected';

for(var i = start; i < end; i++) {
result.push(this[i]);
}
return result;
}

至此,把猥瑣的 ie 自圓其說完畢。

關於 slice, 還有一個話題:用 Array.prototype.slice 還是 [].slice ? 從理論上講,[] 需要創建一個數組,性能上會比 Array.prototype 稍差。但實際上,這兩者差不多,就如循環裡用 i++ 還是 ++i 一樣,純屬個人習慣。

最後一個話題,有關性能。對於數組的篩選來說,有一個犧牲色相的寫法:
復制代碼 代碼如下:
var ret = [];
for(var i = start, j = 0; i < end; i++) {
ret[j++] = arr[i];
}

用空間換時間。去掉 push, 對於大數組來說,性能提升還是比較明顯的。

一大早寫博,心情不是很好,得留個題目給大家:
復制代碼 代碼如下:
var slice = Array.prototype.slice;
alert(slice.call({0: 'foo', length: 'bar'})[0]); // ?
alert(slice.call(NaN).length); // ?
alert(slice.call({0: 'foo', length: '100'})[0]); // ?
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved