本文深入解析 JavaScript 中伪数组与真数组的核心区别。重点阐述两者在原型继承、length 属性行为及内置方法上的差异,并演示如何利用 call 或 apply 借用数组原型方法,实现伪数组向真数组的转换及遍历操作。
伪数组与数组的概念界定
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?
- 若添加元素未遵循连续索引,将导致索引不连续,致使索引长度大于元素实际个数。
伪数组的定义
- 具备length属性,其余索引为非负整数(对象索引视为字符串处理,此处视作非负整数串)。
- 缺乏数组所特有的方法。
伪数组指拥有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伪数组与数组的使用及区别介绍完毕,更多相关内容请参阅本站往期文章或继续浏览后续文章,感谢支持!