Array.prototype.slice 使用擴(kuò)展
更新時(shí)間：2010年06月09日 18:08:55 作者：
slice 可以用來(lái)獲取數(shù)組片段，它返回新數(shù)組，不會(huì)修改原數(shù)組。
除了正常用法，slice 經(jīng)常用來(lái)將 array-like 對(duì)象轉(zhuǎn)換為 true array.
名詞解釋：array-like object – 擁有 length 屬性的對(duì)象，比如 { 0: ‘foo', length: 1 }, 甚至 { length: ‘bar' }. 最常見的 array-like 對(duì)象是 arguments 和 NodeList.
查看 V8 引擎 array.js 的源碼，可以將 slice 的內(nèi)部實(shí)現(xiàn)簡(jiǎ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.
對(duì)于標(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 引擎不開源，那我們只有猜測(cè)了：
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 自圓其說(shuō)完畢。
關(guān)于 slice, 還有一個(gè)話題：用 Array.prototype.slice 還是 [].slice ? 從理論上講，[] 需要?jiǎng)?chuàng)建一個(gè)數(shù)組，性能上會(huì)比 Array.prototype 稍差。但實(shí)際上，這兩者差不多，就如循環(huán)里用 i++ 還是 ++i 一樣，純屬個(gè)人習(xí)慣。
最后一個(gè)話題，有關(guān)性能。對(duì)于數(shù)組的篩選來(lái)說(shuō)，有一個(gè)犧牲色相的寫法：
var ret = [];
for(var i = start, j = 0; i < end; i++) {
ret[j++] = arr[i];
}
用空間換時(shí)間。去掉 push, 對(duì)于大數(shù)組來(lái)說(shuō)，性能提升還是比較明顯的。
一大早寫博，心情不是很好，得留個(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 屬性的對(duì)象，比如 { 0: ‘foo', length: 1 }, 甚至 { length: ‘bar' }. 最常見的 array-like 對(duì)象是 arguments 和 NodeList.
查看 V8 引擎 array.js 的源碼，可以將 slice 的內(nèi)部實(shí)現(xiàn)簡(jiǎ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.
對(duì)于標(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 引擎不開源，那我們只有猜測(cè)了：
復(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 自圓其說(shuō)完畢。
關(guān)于 slice, 還有一個(gè)話題：用 Array.prototype.slice 還是 [].slice ? 從理論上講，[] 需要?jiǎng)?chuàng)建一個(gè)數(shù)組，性能上會(huì)比 Array.prototype 稍差。但實(shí)際上，這兩者差不多，就如循環(huán)里用 i++ 還是 ++i 一樣，純屬個(gè)人習(xí)慣。
最后一個(gè)話題，有關(guān)性能。對(duì)于數(shù)組的篩選來(lái)說(shuō)，有一個(gè)犧牲色相的寫法：
復(fù)制代碼 代碼如下:
var ret = [];
for(var i = start, j = 0; i < end; i++) {
ret[j++] = arr[i];
}
用空間換時(shí)間。去掉 push, 對(duì)于大數(shù)組來(lái)說(shuō)，性能提升還是比較明顯的。
一大早寫博，心情不是很好，得留個(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)文章
解決layui追加或者動(dòng)態(tài)修改的表單元素“沒(méi)效果”的問(wèn)題
今天小編就為大家分享一篇解決layui追加或者動(dòng)態(tài)修改的表單元素“沒(méi)效果”的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)時(shí)間倒計(jì)時(shí)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
微信小程序賬號(hào)密碼登入和傳值的實(shí)現(xiàn)方法
傳統(tǒng)的web開發(fā)實(shí)現(xiàn)登陸功能,一般的做法是輸入賬號(hào)密碼、或者輸入手機(jī)號(hào)及短信驗(yàn)證碼進(jìn)行登錄,下面這篇文章主要給大家介紹了關(guān)于微信小程序賬號(hào)密碼登入和傳值的實(shí)現(xiàn)方法,需要的朋友可以參考下2022-04-04
內(nèi)部系統(tǒng)上線了一個(gè)發(fā)版記錄發(fā)版內(nèi)容的功能,維護(hù)發(fā)版記錄的同事提出一個(gè)可以展示前后文本差異的優(yōu)化需求,?使的每次變更前可以確認(rèn)新增了哪些,或者刪除了哪些內(nèi)容,所以本文給大家介紹了基于JS實(shí)現(xiàn)文本比較差異,需要的朋友可以參考下2023-12-12
JavaScript原始值與包裝對(duì)象的詳細(xì)介紹
這篇文章主要給大家介紹了關(guān)于JavaScript原始值與包裝對(duì)象的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
我們?cè)?jīng)講過(guò)JS由三部分組成，其中一個(gè)部分就是BOM，用于對(duì)瀏覽器進(jìn)行操作。這篇文章我們主要來(lái)介紹BOM應(yīng)用，感興趣的朋友一起看看吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了javascript輪播圖算法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Axios設(shè)置token請(qǐng)求頭的三種方式
用戶登錄時(shí),后端會(huì)返回一個(gè)token,并且保存到瀏覽器的localstorage中,可以根據(jù)localstorage中的token判斷用戶是否登錄,所以當(dāng)發(fā)送請(qǐng)求時(shí),都要攜帶token給后端進(jìn)行判斷,本文給大家介紹了Axios設(shè)置token請(qǐng)求頭的三種方式,需要的朋友可以參考下2024-02-02
JavaScript對(duì)象詳解之對(duì)象屬性的添加
這篇文章主要給大家介紹了關(guān)于JavaScript對(duì)象詳解之js對(duì)象屬性的添加的相關(guān)資料,在JavaScript中對(duì)象是通過(guò)鍵值對(duì)來(lái)存儲(chǔ)數(shù)據(jù)的一種數(shù)據(jù)類型,可以通過(guò)直接給對(duì)象添加屬性的方式來(lái)增加對(duì)象的屬性,需要的朋友可以參考下2023-07-07
在Javascript里，函數(shù)被調(diào)用的時(shí)候，除了接受聲明是定義的形式參數(shù)，每一個(gè)函數(shù)還接受兩個(gè)附加的參數(shù)：this和arguments。2011-09-09