1. 程式人生 > >js類數組轉數組的方法(ArrayLike)

js類數組轉數組的方法(ArrayLike)

個數 for alt 內部 argument rip 調用 轉換成 代碼

1. 什麽是類數組ArrayLike

  • 擁有length屬性,其它屬性(索引)為非負整數(對象中的索引會被當做字符串來處理,這裏你可以當做是個非負整數串來理解)
  • 不具有數組所具有的方法
技術分享圖片
//類數組示例
var a = {‘1‘:‘gg‘,‘2‘:‘love‘,‘4‘:‘meimei‘,length:5};
Array.prototype.join.call(a,‘+‘);//‘+gg+love++meimei‘

//非類數組示例
var c = {‘1‘:2};   //沒有length屬性就不是類數組
技術分享圖片

javascript中常見的類數組有arguments對象和DOM方法的返回結果。
比如 document.getElementsByTagName()

2. 判斷一個對象是否屬於類數組

技術分享圖片
function isArrayLike(o) {
    if (o &&                                // o is not null, undefined, etc.
        typeof o === ‘object‘ &&            // o is an object
        isFinite(o.length) &&               // o.length is a finite number
        o.length >= 0 &&                    //
o.length is non-negative o.length===Math.floor(o.length) && // o.length is an integer o.length < 4294967296) // o.length < 2^32 return true; // Then o is array-like else return false; // Otherwise it is not
}
技術分享圖片

3. 類數組轉換成數組之後進行操作有什麽優勢

由於類數組不具有數組所具有的操作數組的方法,講類數組轉換為數組之後就能調用如shift,unshift,splice,slice,concat,reverse,sort等這些強大的方法,方便快捷。

4. 類數組轉換為數組方法

Array.prototype.slice.call(arrayLike)

//將arguments轉化為數組後,截取第一個元素之後的所有元素 var args = Array.prototype.slice.call(arguments,1);

首先Array.prototype.slice.call(arrayLike)的結果是將arrayLike對象轉換成一個Array對象。所以其後面可以直接調用數組具有的方法,例如

Array.prototype.slice.call(arrayLike).forEach(function(element,index){  //可以隨意操作每一個element了 })

(1)Array.prototype.slice表示數組的原型中的slice方法。註意這個slice方法返回的是一個Array類型的對象。

技術分享圖片
//slice的內部實現
Array.prototype.slice = function(start,end){  
      var result = new Array();  
      start = start || 0;  
      end = end || this.length; //this指向調用的對象,當用了call後,能夠改變this的指向,也就是指向傳進來的對象,這是關鍵  
      for(var i = start; i < end; i++){  
           result.push(this[i]);  
      }  
      return result;  
 } 
技術分享圖片

(2)能調用call的只有方法,所以不能用[].call這種形式,得用[].slice。而call的第一個參數表示真正調用slice的環境變為了arrayLike對象。所以就好像arrayLike也具有了數組的方法。

(3)附上轉成數組的通用函數

技術分享圖片
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];     //據說這樣比push快
            }  
             return arr;  
    } 
技術分享圖片

5. 將數組轉換為參數列表(類數組)

調用apply方法的時候,第一個參數是對象(this), 第二個參數是一個數組集合, 這裏就說明apply的一個巧妙用法,可以將一個數組默認的轉換為一個參數列表([param1,param2,param3] 轉換為 param1,param2,param3), 這個如果讓我們用程序來實現將數組的每一個項,來轉換為參數的列表,可能都得費一會功夫,借助apply的這點特性,所以就有了以下高效率的方法。

具體可以參考前面的文章 js函數中的apply()、call()、bind()方法 ---(apply的其他巧妙用法(一般在什麽情況下可以使用apply))

js類數組轉數組的方法(ArrayLike)