JavaScript中偽數組和數組有什么區別

JavaScript中偽數組和數組有什么區別？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

JavaScript的作用是什么

1、能夠嵌入動態文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創建和修改等。7、基于Node.js技術進行服務器端編程。

偽數組和數組

在JavaScript中，除了5種原始數據類型之外，其他所有的都是對象，包括函數（Function）。

對象與數組的關系

在說區別之前，需要先提到另外一個知識，就是 JavaScript 的原型繼承。

所有 JavaScript 的內置構造函數都是繼承自 Object.prototype 。

在這個前提下，可以理解為使用 new Array() 或 [] 創建出來的數組對象，都會擁有 Object.prototype 的屬性值。

var obj = {};// 擁有 Object.prototype 的屬性值
var arr = [];
//使用數組直接量創建的數組，由于 Array.prototype 的屬性繼承自 Object.prototype，
//那么，它將同時擁有 Array.prototype 和 Object.prototype 的屬性值

可以得到對象和數組的第一個區別：對象沒有數組 Array.prototype 的屬性值。

什么是數組

數組具有一個最基本特征：索引，這是對象所沒有的，下面來看一段代碼：

var obj = {};
var arr = [];
 
obj[2] = 'a';
arr[2] = 'a';
 
console.log(obj[2]); // => a
console.log(arr[2]); // => a
console.log(obj.length); // => undefined
console.log(arr.length); // => 3

• obj[2]輸出'a'，是因為對象就是普通的鍵值對存取數據

• 而arr[2]輸出'a' 則不同，數組是通過索引來存取數據，arr[2]之所以輸出'a'，是因為數組arr索引2的位置已經存儲了數據

• obj.length并不具有數組的特性，并且obj沒有保存屬性length，那么自然就會輸出undefined

• 而對于數組來說，length是數組的一個內置屬性，數組會根據索引長度來更改length的值

• 為什么arr.length輸出3，而不是1

• 在給數組添加元素時，并沒有按照連續的索引添加，所以導致數組的索引不連續，那么就導致索引長度大于元素個數
  

什么是偽數組

1. 擁有 length 屬性，其它屬性（索引）為非負整數(對象中的索引會被當做字符串來處理，這里你可以當做是個非負整數串來理解)

2. 不具有數組所具有的方法
   

偽數組，就是像數組一樣有 length 屬性，也有 0、1、2、3 等屬性的對象，看起來就像數組一樣，但不是數組，比如:

var fakeArray = {
  "0": "first",
  "1": "second",
  "2": "third",
  length: 3
};
 
for (var i = 0; i < fakeArray.length; i++) {
  console.log(fakeArray[i]);
}
 
Array.prototype.join.call(fakeArray,'+');

常見的偽數組有：

• 函數內部的 arguments

• DOM 對象列表（比如通過 document.getElementsByTags 得到的列表）

• jQuery 對象（比如 $("div") ）
  

偽數組是一個 Object，而真實的數組是一個 Array。

偽數組存在的意義，是可以讓普通的對象也能正常使用數組的很多方法，比如：

var arr = Array.prototype.slice.call(arguments);
 
Array.prototype.forEach.call(arguments, function(v) {
  // 循環arguments對象
});

// push
// some
// every
// filter
// map
// ...

以上在借用數組的原型方法的時候都可以通過數組直接量來簡化使用：

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

;[].push.call(obj, 'd')

console.log([].slice.call(obj))

;[].forEach.call(obj, function (num, index) {
  console.log(num)
})

二者區別

1.長度：

• 真數組的長度是可變的

• 偽數組的長度不可變
  

2.方法的使用：

• 真數組可以使用數組中的方法

• 偽數組不可以使用數組中的方法
  

小結

對象沒有數組 Array.prototype 的屬性值，類型是 Object ，而數組類型是 Array
數組是基于索引的實現， length 會自動更新，而對象是鍵值對
使用對象可以創建偽數組，偽數組可以正常使用數組的大部分方法

看完上述內容，你們掌握JavaScript中偽數組和數組有什么區別的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！