javascript Array.prototype.slice使用說明
更新時(shí)間：2010年10月11日 22:40:50 作者：
slice 可以用來獲取數(shù)組片段，它返回新數(shù)組，不會修改原數(shù)組。
除了正常用法，slice 經(jīng)常用來將 array-like 對象轉(zhuǎn)換為 true array.
名詞解釋：array-like object – 擁有 length 屬性的對象，比如 { 0: ‘foo', length: 1 }, 甚至 { length: ‘bar' }. 最常見的 array-like 對象是 arguments 和 NodeList.
查看 V8 引擎 array.js 的源碼，可以將 slice 的內(nèi)部實(shí)現(xiàn)簡化為：
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 類型，當(dāng)不能轉(zhuǎn)換為數(shù)值時(shí)，ToUnit32(this.length) 返回 0.
對于標(biāo)準(zhǔn)瀏覽器，上面已經(jīng)將 slice 的原理解釋清楚了。但是惱人的 ie, 總是給我們添亂子：
var slice = Array.prototype.slice;
slice.call(); // => IE: Object expected.
slice.call(document.childNodes); // => IE: JScript object expected.
以上代碼，在 ie 里報(bào)錯(cuò)。可恨 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 自圓其說完畢。
關(guān)于 slice, 還有一個(gè)話題：用 Array.prototype.slice 還是 [].slice ? 從理論上講，[] 需要?jiǎng)?chuàng)建一個(gè)數(shù)組，性能上會比 Array.prototype 稍差。但實(shí)際上，這兩者差不多，就如循環(huán)里用 i++ 還是 ++i 一樣，純屬個(gè)人習(xí)慣。
最后一個(gè)話題，有關(guān)性能。對于數(shù)組的篩選來說，有一個(gè)犧牲色相的寫法：
var ret = [];
for(var i = start, j = 0; i < end; i++) {
ret[j++] = arr[i];
}
用空間換時(shí)間。去掉 push, 對于大數(shù)組來說，性能提升還是比較明顯的。
一大早寫博，心情不是很好，得留個(gè)題目給大家：
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]); // ?
名詞解釋：array-like object – 擁有 length 屬性的對象，比如 { 0: ‘foo', length: 1 }, 甚至 { length: ‘bar' }. 最常見的 array-like 對象是 arguments 和 NodeList.
查看 V8 引擎 array.js 的源碼，可以將 slice 的內(nèi)部實(shí)現(xiàn)簡化為：
復(fù)制代碼 代碼如下:
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 類型，當(dāng)不能轉(zhuǎn)換為數(shù)值時(shí)，ToUnit32(this.length) 返回 0.
對于標(biāo)準(zhǔn)瀏覽器，上面已經(jīng)將 slice 的原理解釋清楚了。但是惱人的 ie, 總是給我們添亂子：
復(fù)制代碼 代碼如下:
var slice = Array.prototype.slice;
slice.call(); // => IE: Object expected.
slice.call(document.childNodes); // => IE: JScript object expected.
以上代碼，在 ie 里報(bào)錯(cuò)。可恨 IE 的 Trident 引擎不開源，那我們只有猜測了：
復(fù)制代碼 代碼如下:
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 自圓其說完畢。
關(guān)于 slice, 還有一個(gè)話題：用 Array.prototype.slice 還是 [].slice ? 從理論上講，[] 需要?jiǎng)?chuàng)建一個(gè)數(shù)組，性能上會比 Array.prototype 稍差。但實(shí)際上，這兩者差不多，就如循環(huán)里用 i++ 還是 ++i 一樣，純屬個(gè)人習(xí)慣。
最后一個(gè)話題，有關(guān)性能。對于數(shù)組的篩選來說，有一個(gè)犧牲色相的寫法：
復(fù)制代碼 代碼如下:
var ret = [];
for(var i = start, j = 0; i < end; i++) {
ret[j++] = arr[i];
}
用空間換時(shí)間。去掉 push, 對于大數(shù)組來說，性能提升還是比較明顯的。
一大早寫博，心情不是很好，得留個(gè)題目給大家：
復(fù)制代碼 代碼如下:
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]); // ?
相關(guān)文章
目前用TypeScript的人越來越多,尤其是一些大廠,大的項(xiàng)目,github上面很多開源項(xiàng)目也都是ts語法編譯的,這篇文章主要給大家介紹了關(guān)于TypeScript學(xué)習(xí)筆記之類型窄化的相關(guān)資料,需要的朋友可以參考下2021-09-09
漂亮的widgets，支持換膚和后期開發(fā)新皮膚...2007-04-04
這篇文章主要介紹了JS中兩個(gè)數(shù)組對象篩選,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
JS從數(shù)組中隨機(jī)獲取一個(gè)值的常用寫法
這篇文章主要介紹了JS從數(shù)組中隨機(jī)獲取一個(gè)值的常用寫法,需要的朋友可以參考下2023-07-07
JavaScript實(shí)現(xiàn)九宮格移動(dòng)拼圖游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)九宮格移動(dòng)拼圖游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
js精準(zhǔn)的倒計(jì)時(shí)函數(shù)分享
這篇文章主要為大家分享了js實(shí)現(xiàn)精準(zhǔn)的倒計(jì)時(shí)函數(shù)，如何實(shí)現(xiàn)倒計(jì)時(shí)模塊，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了TypeScript中命名空間與模塊化詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
Postman參數(shù)化實(shí)現(xiàn)過程及原理解析
這篇文章主要介紹了Postman參數(shù)化實(shí)現(xiàn)過程及原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
easyui給某一個(gè)單元格的內(nèi)容增加下劃線的操作方法
在EasyUI的DataGrid組件中,你可以通過自定義單元格的渲染方式來實(shí)現(xiàn)給某一個(gè)單元格的內(nèi)容增加下劃線的效果,本文給大家介紹easyui如何給某一個(gè)單元格的內(nèi)容增加下劃線,感興趣的朋友跟隨小編一起看看吧2024-08-08
關(guān)于ckeditor在bootstrap中modal中彈框無法輸入的解決方法
今天小編就為大家分享一篇關(guān)于ckeditor在bootstrap中modal中彈框無法輸入的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09