js小记:伪数组

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

一、简介:

伪数组:

  • 是对象,且 obj instanceof Array === false
  • 必须有length属性,但不能调用push()、indexOf()之类的 数组方法
  • 如果这个对象的length不为0,那么必须要按照下标存储数据

为了方便大家理解,举几个例子:

// 不是伪数组
var obj = {};
var obj2 = { length: 3 };
var obj3 = { 'a':1 , length:1};

// 是伪数组
var obj4 = { length: 0 };
var obj5 = { 0: '888', length: 1 };
var obj6 = { 0: '1', 12 , length: 2 };
var obj7 = { 99: 'abc', length: 100 }

典型的伪数组:

  • 函数的arguments参数
  • HTMLCollection对象、NodeList对象 (调用getElementsByTagName,document.childNodes之类的,它们返回的是NodeList对象)
  • jQuery对象

伪数组与真数组:
要知道 数组是有length属性的,而对象没有;因而为了让对象也有length属性,所以伪数组诞生了。
其实伪数组和真数组都是对象,也都有length属性,甚至连访问元素的方式(eg:arguments[2])都一样;但不同的是,伪数组不能像数组那样调用像push()、indexOf()之类的数组方法。

怎么判断 是 伪数组 还是 真数组?
我们可以用instanceof、constructor、Object.prototype.toString.call(X)等来判断是否为伪数组。


二、伪数组转数组:

我们一般使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

例:

function myFuc(a,b){
    console.log(arguments);//Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    var arr = Array.prototype.slice.call(arguments);
    console.log(arr);//[1, 2]
}

myFuc(1,2);

模拟一下Array.prototype.slice.call(fakeArray)的内部实现:

Array.prototype.slice = function(start,end){
    var result = [];
    start = start || 0;
    end = end || this.length;
    for(var i = start; i < end; i++){
        result.push(this[i]);
    }
    return result;
};

猜你喜欢

转载自blog.csdn.net/b954960630/article/details/82019248