JavaScript 伪数组与真数组的区别及转换方法

伪数组与数组的概念界定

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'，源于数组通过索引存取数据，该位置已存储数据。
• obj.length无数组特性，因对象未保存length属性，故返回undefined。
• 数组中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伪数组与数组的使用及区别介绍完毕，更多相关内容请参阅本站往期文章或继续浏览后续文章，感谢支持！