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 就是一个类数组对象。

 function list() {

   return Array.prototype.slice.call(arguments);

 }

 var list1 = list(1, 2, 3); // [1, 2, 3]

除了使用 Array.prototype.slice.call( arguments ) ，你也可以简单的使用 [].slice.call(arguments) 来代替。另外，你可以使用 bind 来简化该过程。

 var unboundSlice = Array.prototype.slice;

 var slice = Function.prototype.call.bind(unboundSlice);

 function list() {

   return slice(arguments);

 }

 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

          }

        })