js陣列，相比大家都很熟悉，因為走到哪都要用，但它有個“雙胞胎弟弟” ，叫類陣列（也叫偽陣列），可能有的人瞭解，有的人不瞭解，今天我們來看一看。

什麼是類陣列

顧名思義，這玩意兒肯定是個長得像陣列，但又不算陣列的東西。那到底是個啥，其實它就是一個物件，一個長的像陣列的物件。

和陣列的區別

那類陣列和陣列有啥區別：
1、都有length屬性
2、類陣列也可以for迴圈遍歷，有的類陣列還可以通過 for of 遍歷
3、類陣列不具備陣列的原型方法，因此類陣列不可呼叫相關陣列方法（如，push,slicec,concat等等）

都有哪些類陣列

常見的類陣列有

• 函式的引數arguments
• 通過getElementsByTagName，getElementsByClassName，getElementsByName等方法獲取的dom列表（也叫 HTMLCollection）
• 通過querySelectorAll()方法獲取的NodeList節點列表
  

下面，我們來分別看一下這3類 類陣列

arguments

arguments是javascript的一個關鍵字。專指函式的引數集合，它包含了函式的所有引數以及其他屬性。它無需定義，可直接在函式體內使用

function args(a,b,c) {
	console.log(arguments)
	console.log(typeof arguments)
	console.log({}.toString.call(arguments))
}

args('a','b','c')

我們看看輸出結果

可以看出，arguments包含所有引數，並且存在length屬性，同時可以看出，他的型別是object，並且轉換為string後 是 object Arguments，代表是Arguments物件。同時，可以看到，他還有一個屬性callee，而這個屬性的值好像就是我們定義的這個函式體，那麼我們輸出看一下

function args(a,c) {
	console.log(arguments.callee)
}

args('a','c')

可以看到，輸出的確實是我們函式自己。那既然表示的自己，請不要隨便去呼叫這個屬性，因為一旦呼叫，會不斷的呼叫自己，進入死迴圈，直到棧溢位。就像下面這樣

function args (a,c) {
 console.log(123)
 arguments.callee()
}

args('a','c')

dom列表（HTMLCollection）

這一類是指通過getElementsByTagName或者 gwww.cppcns.cometElementsByClassName 或者alITISfwvu getElementsByName獲取到的dom列表的集合。

<div>今天天氣不太好</div>
<div>因為下雨了</div>
<script>
 var domList = document.getElementsByTagName('div')
 console.log(domList)
 console.log(typeof domList)
 console.log({}.toString.call(domList))
</script>

可以看出，domList也存在length屬性。並且，轉換為string後是 object HTMLCollection。代表是HTMLCollection物件

節點列表（NodeList）

通過document.querySelectorAll()所獲取的節點的集合

<div class="abc">今天天氣不太好</div>
<div class="abc">因為下雨了</div>
<script>
 var nodeList = document.querySelectorAll('div')
 console.log(nodeList)
 console.log(typeof nodeList)
 console.lo程式設計客棧g({}.toString.call(nodeList))
</script>

可以看出，nodeList同樣存在length屬性，且轉換成string後是 object NodeList，代表是NodeList物件。該物件是一個符合Iterator介面規範的物件，故它可以被for…of遍歷（什麼是Iterator我就不在這裡講述了，大家可以自己去看 什麼是Iterator）

特點

類陣列都不存在陣列的原型方法，但當類陣列需要呼叫陣列方法去做任何事情時，可以通過以下方式

• 利用call，apply進行方法借用，借用陣列的各自方法
http://www.cppcns.com
• 將類陣列轉換為陣列。然後再呼叫陣列方法

call，apply進行方法借用

其實我們上面也已經用過這個方法了，類陣列轉為字串時，我們上面是不是借用了物件的toString()方法啊

下面我們再多列幾個

function args(a,c) {
 Array.prototype.push.call(arguments,'123')
 consowww.cppcns.comle.log(arguments)
 Array.prototype.splice.call(arguments,1)
 console.log(arguments)
 Array.prototype.unshift.apply(arguments,[1,2,3])
 console.log(arguments)
}

args('a','c')

類陣列轉陣列

將類陣列轉成陣列後，就可以隨意呼叫各自陣列方法，那麼類陣列如何轉成陣列呢！

可借用陣列的一些方法生成一個新陣列

function args(a,c) {
 let arr = Array.prototype.slice.call(arguments)
 console.log(arr)
 arr = Array.prototype.concat.apply([],arguments)
 console.log(arr)
}

args('a','c')

利用ES6新增方法轉換為陣列

ES6新增了一個Array.from方法，可將類陣列轉為陣列。還提供了展開運算子，可以直接在一個數組中展開類陣列

function args(a,c) {
 let arr = Array.from(arguments)
 console.log(arr)
 arr = [...arguments]
 console.log(arr)
}

args('a','c')

好了，類陣列就寫到這了，歡迎一起探討

總結

到此這篇關於javascript類陣列的文章就介紹到這了,更多相關javascript類陣列內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！