淺談javascript的Array.prototype.slice.call
寫字前面
在js中我們經(jīng)常會看到Array.prototype.slice.call(arguments,0)的寫法,當(dāng)然,這個方法的作用也許大家都明白,那就是把類數(shù)組對象轉(zhuǎn)換成一個真正的數(shù)組。關(guān)于這個方法,我說說自己的理解。
這里涉及到slice()方法和call()方法,所以先簡單說說這兩個方法。
slice()方法
數(shù)組和字符串都有這個slice方法,這個方法的作用是截取一段數(shù)據(jù)。它接收兩個參數(shù),第一個參數(shù)是要截取的位置索引,第二參數(shù)可選,表示要截取到的結(jié)束位置,但是不包括結(jié)束位置。在數(shù)組中,該方法的返回值是包含截取元素的組成的數(shù)組,在字符串中,該方法的返回值是包含截取字符串組成的字符串。
該方法也可以傳入負(fù)數(shù)值,當(dāng)參數(shù)為負(fù)數(shù)的時候,將參數(shù)和數(shù)組或字符串的長度相加得到的正數(shù)作為實際的參數(shù)。
如下:
[1,2,3,4,5,6].slice(2,4); [1,2,3,4,5,6].slice(-4,-2);
返回值均為[3,4],為數(shù)組。
'everything'.slice(2,4); 'everything'.slice(-4,-2);
返回值分別為'er'和'hi',為字符串。
如果之傳入一個參數(shù)的話,那就是輸出從開始位置到結(jié)束位置的所有元素。不再舉例。
字符串的其他類似方法
在字符串中,和slice()方法類型的還有兩個方法:
substring()和substr()方法。
其中,substring()方法表示返回從開始位置到結(jié)束位置的字符串,substr()接收兩個參數(shù),第一個參數(shù)表示開始位置,第二個參數(shù)表示要截取的字符個數(shù),和前兩個方法略有不同。
當(dāng)傳入方法的參數(shù)為負(fù)數(shù)時,這三種方法又略有不同。
當(dāng)傳入方法的參數(shù)為負(fù)數(shù)時:
slice()像上面說的,是負(fù)數(shù)加上字符串的長度得出相應(yīng)的正值;
substring()方法的參數(shù)均置為零;
substr()方法的第一個參數(shù)為負(fù)值加上字符串長度得到的正值,第二個參數(shù)置為零。
call()和apply()方法
call()和apply()方法主要是用來擴(kuò)充函數(shù)的作用域。
call()和apply()方法接收兩個參數(shù):
apply():第一個參數(shù)是作用域,第二個是參數(shù)數(shù)組,其中第二個參數(shù)可以是數(shù)組實例,也可以是arguments對象。
call()方法也接收兩個參數(shù),僅僅在于和apply()的傳參方式不同:傳遞函數(shù)的參數(shù)必須逐個寫入。
鑒于這里不是重點,在這里就不再贅述。
Array.prototype.slice.call(arguments,0)
在Array.prototype.slice.call(arguments,0)中,Array.prototype.slice調(diào)用的是Array的原型方法,對于正真的數(shù)組是有slice()方法,但是對于像arguments或者自己定義的一些類數(shù)組對象雖然存在length等若干屬性,但是并沒有slice()方法,所以對于這種類數(shù)組對象就得使用原型方法來使用slice()方法,即Array.prototype.slice(如果在自定義中的類數(shù)組對象中自定義了slice()方法,那么自然可以直接調(diào)用)。
所以,Array.prototype.slice.call(arguments,0)的意思就可以這樣理解:對于arguments類數(shù)組,我們調(diào)用Array.prototype.slice原型方法,并用call()方法,將作用域限定在arguments中,這里Array.prototype就可以理解為arguments,同參數(shù)0為slice()方法的第一個參數(shù),即開始位置索引。通過這種方法就將arguments類數(shù)組轉(zhuǎn)換成了真數(shù)組。
當(dāng)然,把arguments轉(zhuǎn)換為數(shù)組也可以用遍歷,那樣代碼自然就會多一些,而且不夠直接。
我們知道,Array.prototype.slice.call(arguments)能將具有l(wèi)ength屬性的對象轉(zhuǎn)成數(shù)組,除了IE下的節(jié)點集合(因為ie下的dom對象是以com對象的形式實現(xiàn)的,js對象與com對象不能進(jìn)行轉(zhuǎn)換)
如:
var a={length:2,0:'first',1:'second'}; Array.prototype.slice.call(a);// ["first", "second"] var a={length:2}; Array.prototype.slice.call(a);// [undefined, undefined]
可能剛開始學(xué)習(xí)js的童鞋并不是很能理解這句為什么能實現(xiàn)這樣的功能。比如我就是一個,所以,來探究一下。
首先,slice有兩個用法,一個是String.slice,一個是Array.slice,第一個返回的是字符串,第二個返回的是數(shù)組,這里我們看第2個。
Array.prototype.slice.call(arguments)能夠?qū)rguments轉(zhuǎn)成數(shù)組,那么就是arguments.toArray().slice();到這里,是不是就可以說Array.prototype.slice.call(arguments)的過程就是先將傳入進(jìn)來的第一個參數(shù)轉(zhuǎn)為數(shù)組,再調(diào)用slice?
再看call的用法,如下例子
var a = function(){ console.log(this); // 'littledu' console.log(typeof this); // Object console.log(this instanceof String); // true } a.call('littledu');
可以看出,call了后,就把當(dāng)前函數(shù)推入所傳參數(shù)的作用域中去了,不知道這樣說對不對,但反正this就指向了所傳進(jìn)去的對象就肯定的了。
到這里,基本就差不多了,我們可以大膽猜一下slice的內(nèi)部實現(xiàn),如下
Array.prototype.slice = function(start,end){ var result = new Array(); start = start || 0; end = end || this.length; //this指向調(diào)用的對象,當(dāng)用了call后,能夠改變this的指向,也就是指向傳進(jìn)來的對象,這是關(guān)鍵 for(var i = start; i < end; i++){ result.push(this[i]); } return result; }
大概就是這樣吧,理解就行,不深究。
最后,附個轉(zhuǎn)成數(shù)組的通用函數(shù)
var toArray = function(s){ try{ return Array.prototype.slice.call(s); } catch(e){ var arr = []; for(var i = 0,len = s.length; i < len; i++){ //arr.push(s[i]); arr[i] = s[i]; //據(jù)說這樣比push快 } return arr; } }
相關(guān)文章
javascript實現(xiàn)base64 md5 sha1 密碼加密
本篇文章給大家介紹了javascript實現(xiàn)密碼加密,通過base64、md5、sha1文件,調(diào)用相關(guān)方法實現(xiàn)密碼加密,非常簡單,需要的朋友可以參考下2015-09-09javascript 進(jìn)度條 實現(xiàn)代碼
這個例子是通過測試的。是真真正正根據(jù)記錄的條數(shù)掛鉤的。2009-07-07使用JavaScript的ActiveXObject對象檢測應(yīng)用程序是否安裝的方法
這篇文章主要介紹了使用JavaScript的ActiveXObject對象檢測應(yīng)用程序是否安裝的方法,需要的朋友可以參考下2014-04-04js報錯:Maximum?call?stack?size?exceeded的解決方法
這篇文章主要給大家介紹了關(guān)于js報錯Maximum?call?stack?size?exceeded的解決方法,文中通過實例代碼將解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02JavaScript實現(xiàn)父子dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡時執(zhí)行順序的方法
這篇文章主要介紹了JavaScript實現(xiàn)父子dom同時綁定兩個點擊事件,一個用捕獲,一個用冒泡時執(zhí)行順序的方法,涉及javascript事件的觸發(fā)與執(zhí)行原理及相關(guān)操作技巧,需要的朋友可以參考下2017-03-03javascript定時保存表單數(shù)據(jù)的代碼
我相信有不少TX用過QQ或163的郵箱吧?他們中有一個比較有用且有趣的功能,如果您在編寫郵件,那在固定一個時間頻率內(nèi),它會自動將您的郵件內(nèi)容保存起來,以免丟失。2011-03-03微信小程序登錄數(shù)據(jù)解密及狀態(tài)維持實例詳解
這篇文章主要介紹了微信小程序登錄數(shù)據(jù)解密及狀態(tài)維持,結(jié)合實例形式分析了微信小程序解密敏感信息及獲取session保持登陸狀態(tài)的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05