Javascript 類數組(Array-like)對象


Javascript中的類數組對象(Array-like object)指的是一些看起來像數組但又不是數組的對象。Javascript中的arguments變量、document.getElementsByTagName()返回值就是典型的類數組對象。

類數組特性

  • 類數組對象具有一個length屬性且length的值為非負整數。
  • 類數組對象不具有數組對象的方法。例如:push、 pop等方法。

類數組對象可以像數組一樣遍歷,但不支持數組對象的方法。

function test1() {  
    for(var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }

    console.log(arguments instanceof Array);
}
test1(2, 3);  
/* 輸出
2  
3  
false  
*/

function test2(){  
    arguments.push(1);
}
test2();  
/* 報錯
TypeError: undefined is not a function  
*/

將類數組對象轉化為數組

slice 方法可以用來將一個類數組(Array-like)對象轉換成一個數組。 你只需要用數組原型上的slice方法call這個對象。

function arrayify( a ) {  
    return Array.prototype.slice.call( a );
}

function test3() {  
    var arrayified = arrayify(arguments);
    arrayified.push(1);
    console.log(arrayified);
    console.log(arrayified instanceof Array);
}

test3(2, 3);  
/* 輸出
[2, 3, 1]
true  
*/

也可以簡單的使用 [].slice.call(a)代替Array.prototype.slice.call(a)

slice 方法可以用來將一個類數組(Array-like)對象/集合轉換成一個數組。你只需將該方法綁定到這個對象上。下述代碼中 list 函數中的 arguments 就是一個類數組對象。

1 function list() {
2   return Array.prototype.slice.call(arguments);
3 }
4 
5 var list1 = list(1, 2, 3); // [1, 2, 3]

除了使用 Array.prototype.slice.call(arguments),你也可以簡單的使用[].slice.call(arguments) 來代替。另外,你可以使用 bind 來簡化該過程。

1 var unboundSlice = Array.prototype.slice;
2 var slice = Function.prototype.call.bind(unboundSlice);
3 
4 function list() {
5   return slice(arguments);
6 }
7 
8 var list1 = list(1, 2, 3); // [1, 2, 3]

實例代碼

Array.prototype.slice.apply(document.querySelectorAll('.total-con li')).map((item)=>{
          if(item.className == 'hover1') {
            this.sortField = item.getAttribute('sortField')
            this.sortType = item.getAttribute('sortType')
            return
          }
        })

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com