伪数组

javascript的伪数组理解

什么是伪数组?

• 定义：obj instanceof Array === false 但是有length属性
• 以下是常见伪数组：
• arguments
• nodelist、HTMLCollection
• jQuery对象

伪数组转为真·数组

• Array.prototype.splice.call(obj)

自定义伪数组

类数组

//从对象构建伪数组的两个条件：
//1. 具有length || 具有pushunshiftpopshift中任意一个并调用(最终结果就是生成length这个属性)
//2. 具有名为splice的方法 
VAR obj={
    length:0,
    splice(){}
};
console.LOG(obj);

var obj2={
    push:[].push, 
    splice(){}
};
obj2.push();
console.log(obj2);

类数组当作数组使用的原理：length相当于obj的键名

var obj={
    length:0,
    splice(){},
    push:Array.PRototyPE.push
};
obj[0]=10;

obj.push(1,2,3);
console.log(obj);//[1,2,3,splice:f,push:f]

var obj2={
    length:1,
    splice(){},
    push:Array.prototype.push
};
obj2[0]=10;

obj2.push(1,2,3);
console.log(obj2);//[10,1,2,3,splice:f,push:f]

//上述push也可以用apply来写
{   push:function () {
  return [].push.apply(this,arguments);
}}

特别的，两种DOM伪数组的区别

1. getelementsbytagname 得到的是 HTMLCollections类

// 如果有一个ID为'test'的元素，可以直接取得
document.getElementsByTagName('div').test

• 如上，ID元素会被直接列在HTMLCollections对象里的同名键中
• ITem(),length,namedItem()

2.querySelector 得到的是 NodeList类

document.querySelectorAll('div').foreach((a,b,c)=>{
    console.log('第一个参数:' + a + '值');
    console.log('第二个参数:' + b + '键');
   console.log('第三个参数:' + c + '自身');
});

• forEach()
• item(),length
• 典型ES6对象特性，entries,keys,values

共性

for(let i=0;i<list.length;i++){
    // 通过item方法获取值
    console.log(list.item(i))
}

• 实际上，通过控制台观察发现，两者都具备iterator接口，都可以支持for ... of语法

相比来讲，querySelector内置forEach，会更方便

援引arguments来说事

const {
   callee,//函数本身
   length,//参数长度
   [...'所有传入的参数']//可以用下标获得所有的按顺序得到的参数
}=arguments;

• 此外，arguments也具备iterator接口，可以直接用for...of遍历

总结：

1. 伪数组基本上属于一个概念问题，只需要知道的是--伪数组的原型一定不是数组，所以，不会有数组的所有方法，在使用的时候不能想当然的去直接用Array.prototype方法比如push,pop,concat等等
2. 伪数组转为真数组的方法有好多种，列下思路：

• 1.遍历伪数组存入真数组
• 2.Array.prototype.splice.call(obj)
• 3.Array.From()
• 4.原型继承,arr.__proto__=Array.prototype
• 5.其他工具库中的方法，如jQuery中的makeArray()toArray()等