javascript类数组对象转数组对象的一些技巧

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wulove52/article/details/85796201

一.定义:什么是类数组对象?

拥有length属性,可以通过下标访问;

不具备数组所具有的方法

常见的类数组有arguments和NodeList,《javascript权威指南》里面给出了一个鉴别对象是否是类数组的函数:

// Determine if o is an array-like object.
// Strings and functions have numeric length properties, but are 
// excluded by the typeof test. In client-side JavaScript, DOM text
// nodes have a numeric length property, and may need to be excluded 
// with an additional o.nodeType != 3 test.
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
}

二.为什么要将类数组对象转为数组对象?

数组对象Array有很多方法:shiftunshiftsplicesliceconcatreversesort,ES6又新增了一些方法:forEachisArrayindexOflastIndexOfeverysomemapfilterreduce等。由于类数组不具有数组所具有的操作数组的方法,将类数组转换为数组之后就能调用这些强大的方法,方便快捷

三.类数组对象转为数组对象的方法:

1)Array.prototype.slice.call(arrayLike) 或 Array.prototype.slice.call(arrayLike, 0) 或 [].slice.call (arrayLike) 或 [].slice.call (arrayLike, 0)

这种方法是借用了数组原型中的slice方法,返回一个数组。slice方法的内部实现:

Array.prototype.slice = function(start,end){  
      var result = new Array();  
      start = start || 0;  
      end = end || this.length; //使用call之后this指向了类数组对象
      for(var i = start; i < end; i++){  
           result.push(this[i]);  
      }  
      return result;  
 } 

2) Array.from(arrayLike)

Array.from()是ES6中新增的方法,可以将两类对象转为真正的数组:类数组对象和可遍历(iterable)对象(包括ES6新增的数据结构Set和Map)。

var arrayLike = {
    '0':'a',
    '1':'b',
    '2':'c',
    length:3
};
var arr = Array.from(arrayLike);//['a','b','c']
//把NodeList对象转换为数组,然后使用数组的forEach方法
var ps = document.querySelectorAll('p');
Array.from(ps).forEach(p){
    console.log(p);
});                             
//转换arguments对象为数组
function foo(){
    var args = Array.from(arguments);
    //...
}
//只要是部署了Iterator接口的数据结构,Array.from都能将其转换为数组
Array.from('hello');    //['h','e','l','l','o']

3) 原生JavaScript转换

var length = arrayLike.length;
var arr = [];
for (var i = 0; i < length; i++) {
  arr.push(arrayLike[i]);
  return arr;
}

4)  扩展运算符(…) 

同样是ES6中新增的内容,扩展运算符(…)也可以将某些数据结构转为数组

//arguments对象的转换
function foo(){
    var args = [...arguments];
}
//NodeList对象的转换
[...document.querySelectorAll('p')]

说明:es5下通用的转换方法如下

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[i] = s[i];   
            }  
             return arr;  
    }

四.JavaScript如何判断一个对象是否为数组?

使用typeof运算符不能判断一个对象是否为数组,因为typeof arr返回的是object而不是array

1) arr instanceof Array 返回true

2) arr.constructor == Array 返回true

说明:使用instanceofconstructor判断数组类型的问题在于,它假定只有一个运行环境,如果网页中包含多个框架,那么实际上存在两个以上不同的全局执行环境,进而存在两个不同版本的Array构造函数,如果从一个框架向另一个框架传入一个数组,那么传入的数组与第二个框架中原生创建的数组分别具有各自不同的构造函数,也就是说,object.constructor == Array 会返回false。

原因:Array属于引用型数据,传递过程仅仅是引用地址的传递,每个页面的Array原生对象所引用的地址是不一样的,在子页面声明的Array所对应的构造函数,是子页面的Array对象,父页面进行判断时使用的Array并不等于子页面的Array。

3) Array.isArray(arr)方法返回true

ES5新增了Array.isArray()方法,这个方法的目的是:最终确定一个值是否是数组,不管它是在哪个全局环境创建的。

4) Object.prototype.toString.call(arr) === "[object Array]"返回true

猜你喜欢

转载自blog.csdn.net/wulove52/article/details/85796201
今日推荐