重論JavaScript偽數(shù)組的種種

jay_tian 發(fā)布于2019-08-22 11:14 / 3339人閱讀

摘要：偽數(shù)組的偽數(shù)組理解什么是偽數(shù)組定義但是有屬性以下是常見偽數(shù)組對象偽數(shù)組轉(zhuǎn)為真數(shù)組自定義偽數(shù)組類數(shù)組從對象構(gòu)建偽數(shù)組的兩個條件具有具有中任意一個并調(diào)用最終結(jié)果就是生成這個屬性具有名為的方法類數(shù)組當(dāng)作數(shù)組使用的原理相當(dāng)于的鍵名上述也可以用來寫特

偽數(shù)組

javascript的偽數(shù)組理解

什么是偽數(shù)組?

定義：obj instanceof Array === false 但是有l(wèi)ength屬性

以下是常見偽數(shù)組：

arguments

NodeList、HTMLCollection

jQuery對象

偽數(shù)組轉(zhuǎn)為真·數(shù)組

Array.prototype.splice.call(obj)

自定義偽數(shù)組 類數(shù)組

//從對象構(gòu)建偽數(shù)組的兩個條件：
//1. 具有l(wèi)ength || 具有pushunshiftpopshift中任意一個并調(diào)用(最終結(jié)果就是生成length這個屬性)
//2. 具有名為splice的方法 
var obj={
    length:0,
    splice(){}
};
console.log(obj);

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

類數(shù)組當(dāng)作數(shù)組使用的原理：length相當(dāng)于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偽數(shù)組的區(qū)別 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("第一個參數(shù):" + a + "值");
    console.log("第二個參數(shù):" + b + "鍵");
   console.log("第三個參數(shù):" + c + "自身");
});

forEach()

item(),length

典型ES6對象特性，entries,keys,values

共性

for(let i=0;i
實際上，通過控制臺觀察發(fā)現(xiàn)，兩者都具備iterator接口，都可以支持for ... of語法
相比來講，querySelector內(nèi)置forEach，會更方便
援引Arguments來說事
const {
   callee,//函數(shù)本身
   length,//參數(shù)長度
   [..."所有傳入的參數(shù)"]//可以用下標(biāo)獲得所有的按順序得到的參數(shù)
}=arguments;
此外，arguments也具備iterator接口，可以直接用for...of遍歷
總結(jié)：

偽數(shù)組基本上屬于一個概念問題，只需要知道的是--偽數(shù)組的原型一定不是數(shù)組，所以，不會有數(shù)組的所有方法，在使用的時候不能想當(dāng)然的去直接用Array.prototype方法比如push,pop,concat等等
偽數(shù)組轉(zhuǎn)為真數(shù)組的方法有好多種，列下思路：


1.遍歷偽數(shù)組存入真數(shù)組
2.Array.prototype.splice.call(obj)
3.Array.from()
4.原型繼承,arr.__proto__=Array.prototype
5.其他工具庫中的方法，如jQuery中的makeArray()toArray()等