JS类数组对象定义和转换

98 阅读3分钟

1.定义

一个拥有 length属性和若干索引属性的对象就可以被称为类数组对象,类数组对象和数组类似 但是不能调用数组的方法。常见的类数组对象有arguments和 DOM方法的返回 结果,还有一个函数也可以被看作是类数组对象,因为它含有 length属性值,代表可接收的参数个数。

2.常见的类数组转换为数组的方法

常见的将类数组转换为数组的方法有几种,以下是其中的几种常见方法:

  1. Array.from() 方法:

    • Array.from() 方法可以将类数组或可迭代对象转换为数组。它接受一个类数组或可迭代对象作为参数,并返回一个新的数组。
    • 示例:
    var arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
    var array = Array.from(arrayLike);
    console.log(array); // ['a', 'b', 'c']
    
  2. Array.prototype.slice.call() 方法:

    • 通过调用 Array.prototype.slice 方法并传入类数组对象作为 this,可以将类数组转换为数组。
    • 示例:
    var arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
    var array = Array.prototype.slice.call(arrayLike);
    console.log(array); // ['a', 'b', 'c']
    

    补充:为什么Array.prototype.slice.call()可以把类数组转换为数组 Array.prototype.slice.call() 可以将类数组转换为数组的原理是利用了 JavaScript 中的函数调用和 this 绑定的特性。 在 JavaScript 中,每个函数都是一个对象,函数对象有一个内置的方法 call(),它允许你调用一个函数,并指定函数内部的 this 指向。当你调用一个函数时,JavaScript 引擎会创建一个活动记录(activation record)来保存函数的调用信息,其中包括 this 的值。 当你调用 Array.prototype.slice.call() 时,实际上是调用了 slice() 方法,并且将类数组对象作为 slice() 方法内部的 this 对象。由于 slice() 方法可以用来截取数组的一部分,并返回一个新的数组,因此它的执行结果就是将类数组对象转换为数组。 这种方法之所以能够成功转换类数组对象,是因为 slice() 方法内部会根据 this 指向的对象的 length 属性来确定截取的范围,而类数组对象通常具有 length 属性,所以可以正确地将类数组对象转换为数组。 总的来说,Array.prototype.slice.call() 的核心思想是利用函数调用时的 this 绑定机制,将类数组对象作为 slice() 方法的 this 对象,从而实现类数组到数组的转换。

  3. 展开运算符(Spread Operator):

    • 使用展开运算符 ... 可以将类数组转换为数组。
    • 示例:
    var arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
    var array = [...arrayLike];
    console.log(array); // ['a', 'b', 'c']
    
  4. for 循环遍历:

    • 使用 for 循环遍历类数组对象,并将每个元素添加到新数组中。
    • 示例:
    var arrayLike = {0: 'a', 1: 'b', 2: 'c', length: 3};
    var array = [];
    for (var i = 0; i < arrayLike.length; i++) {
        array.push(arrayLike[i]);
    }
    console.log(array); // ['a', 'b', 'c']
    
  5. 使用 Array.prototype.concat.apply() 方法:

    • 可以通过调用 Array.prototype.concat() 方法,传入类数组对象作为参数,将其与一个空数组连接起来,从而生成一个新的数组。
    • 示例:
    Array.prototype.concat.apply([],arrayLike)
    
  6. 使用 Array.prototype.splice.call(arrayLike,0) 方法:

    Array.prototype.splice.call(arrayLike,0)