js类数组转数组的方法(ArrayLike)

Posted 实践出真知

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js类数组转数组的方法(ArrayLike)相关的知识,希望对你有一定的参考价值。

1. 什么是类数组ArrayLike(类数组  就是一个普通的  js对象

  • 类数组对象必须含有 length 属性,且元素属性名必须是数值或者可转换为数值的字符。
  • 类数组对象不是数组对象,所以没有数组对象的属性方法。但是可以使用 Array.from()方法,把类数组对象,转化为数组对象
//类数组示例
var a = {
    \'1\':\'gg\',
    \'2\':\'love\',
    \'4\':\'meimei\',
    length:5
};

//非类数组示例
var c = {\'1\':2};   //没有length属性就不是类数组

javascript中常见的类数组有arguments对象和DOM方法的返回结果。
比如 document.getElementsByTagName()

个人理解:类数组就是一个简单的js对象,只是这个对象有一个 length 属性,其它的属性名都是数字。Array.from()方法,转化的数组长度是和类数组中length属性的值一样的。不够用undefined补充,多了去掉。

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)的主要内容,如果未能解决你的问题,请参考以下文章

类数组转数组Array.prototype.slice.call(arrayLike)

JS手写面试题 --- 类数组转化为数组的方法

伪数组(ArrayLike)

Array.from将类对象转换为真正数组

js中的Array

伪数组(arguments及字符串)转数组的方法 贼简单