脚本宝典收集整理的这篇文章主要介绍了

重论JavaScript伪数组的种种

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

数组

javascript的伪数组理解

什么是伪数组?

伪数组转为真·数组

自定义伪数组

类数组

//从对象构建伪数组的两个条件:
//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()等

总结

以上是脚本宝典为你收集整理的

重论JavaScript伪数组的种种

全部内容,希望文章能够帮你解决

重论JavaScript伪数组的种种

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过