快捷導(dǎo)航

JavaScript偽數(shù)組和數(shù)組的使用與區(qū)別

更新時(shí)間：2021年05月07日 14:17:52 作者：流楚丶格念

這篇文章主要給大家介紹了關(guān)于JavaScript偽數(shù)組和數(shù)組使用與區(qū)別的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

偽數(shù)組和數(shù)組

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

對(duì)象與數(shù)組的關(guān)系

在說區(qū)別之前，需要先提到另外一個(gè)知識(shí)，就是 JavaScript 的原型繼承。

所有 JavaScript 的內(nèi)置構(gòu)造函數(shù)都是繼承自 Object.prototype 。

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

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

可以得到對(duì)象和數(shù)組的第一個(gè)區(qū)別：對(duì)象沒有數(shù)組 Array.prototype 的屬性值。

什么是數(shù)組

數(shù)組具有一個(gè)最基本特征：索引，這是對(duì)象所沒有的，下面來看一段代碼：

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'，是因?yàn)閷?duì)象就是普通的鍵值對(duì)存取數(shù)據(jù)
而arr[2]輸出'a' 則不同，數(shù)組是通過索引來存取數(shù)據(jù)，arr[2]之所以輸出'a'，是因?yàn)閿?shù)組arr索引2的位置已經(jīng)存儲(chǔ)了數(shù)據(jù)
obj.length并不具有數(shù)組的特性，并且obj沒有保存屬性length，那么自然就會(huì)輸出undefined
而對(duì)于數(shù)組來說，length是數(shù)組的一個(gè)內(nèi)置屬性，數(shù)組會(huì)根據(jù)索引長(zhǎng)度來更改length的值
為什么arr.length輸出3，而不是1
- 在給數(shù)組添加元素時(shí)，并沒有按照連續(xù)的索引添加，所以導(dǎo)致數(shù)組的索引不連續(xù)，那么就導(dǎo)致索引長(zhǎng)度大于元素個(gè)數(shù)

什么是偽數(shù)組

擁有 length 屬性，其它屬性（索引）為非負(fù)整數(shù)(對(duì)象中的索引會(huì)被當(dāng)做字符串來處理，這里你可以當(dāng)做是個(gè)非負(fù)整數(shù)串來理解)
不具有數(shù)組所具有的方法

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

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,'+');

常見的偽數(shù)組有：

函數(shù)內(nèi)部的 arguments
DOM 對(duì)象列表（比如通過 document.getElementsByTags 得到的列表）
jQuery 對(duì)象（比如 $("div") ）

偽數(shù)組是一個(gè) Object，而真實(shí)的數(shù)組是一個(gè) Array。

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

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

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

以上在借用數(shù)組的原型方法的時(shí)候都可以通過數(shù)組直接量來簡(jiǎn)化使用：

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)
})

二者區(qū)別

1.長(zhǎng)度：

真數(shù)組的長(zhǎng)度是可變的
偽數(shù)組的長(zhǎng)度不可變

2.方法的使用：

真數(shù)組可以使用數(shù)組中的方法
偽數(shù)組不可以使用數(shù)組中的方法

小結(jié)

對(duì)象沒有數(shù)組 Array.prototype 的屬性值，類型是 Object ，而數(shù)組類型是 Array
數(shù)組是基于索引的實(shí)現(xiàn)， length 會(huì)自動(dòng)更新，而對(duì)象是鍵值對(duì)
使用對(duì)象可以創(chuàng)建偽數(shù)組，偽數(shù)組可以正常使用數(shù)組的大部分方法

總結(jié)

到此這篇關(guān)于JavaScript偽數(shù)組和數(shù)組使用與區(qū)別的文章就介紹到這了,更多相關(guān)JavaScript偽數(shù)組和數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: