JavaScript - 数组和类数组对象之间的区别

Question

我在 JavaScript 中经常遇到“类数组对象”这个术语。它是什么？它和普通数组有什么区别？类数组对象和普通对象有什么区别？

Answer 1

首先，数组是一个专门的对象。擅长：

• 有一个特殊的文字语法[ … ]
• 有一个length 属性会自动更新
• 数组原型包括您通常期望从数组中获得的函数

另一个明显的特点是所有元素都有一个数字索引。

从 JavaScript 的角度来看，任何具有 length 属性的对象都足够接近，可以被视为类似数组的对象：

var arrayLikeObject = {
    length: 3,
    name: 'thing',
    '1': 'hello'
};
console.log(arrayLikeObject);

length 属性不必是正确的。即使在普通数组中，也可以强制 length 不同于实际元素的数量。缺失的元素全部返回undefined。

您可以使用Array.from() 将类数组对象转换为真实数组。此函数将采用各种值，但最简单的是：

var arrayLikeObject = {
    length: 3,
    name: 'thing',
    '1': 'hello'
};
var array = Array.from(arrayLikeObject);
console.log(array);

从这里开始，数组具有所有常用的属性和方法。在上面的示例中，属性[1] 被复制到新数组中，但元素[name] 没有，因为它不属于真正的数组。

Array.from() 函数还接受映射函数作为第二个参数。这使您可以在运输过程中进行任何需要的更改：

var arrayLikeObject = {
    length: 3,
    name: 'thing',
    '1': 'hello'
};
var array = Array.from(arrayLikeObject,
    (element,index) => element?element.toUpperCase():`Item ${index}`
);
console.log(array);

Answer 2

还有性能差异。在这个video Mathias Bynens 建议使用数组而不是类数组对象，因为 V8 针对常见数组进行了优化。

Answer 3

著名的HTMLCollection (documentation) 和arguments (documentation) 是自动创建的类数组对象。

真实数组示例之间的一些类似数组（例如HTMLCollection）的快速差异：

var realArray = ['value1', 'value2'];
var arrayLike = document.forms; 

---

相似之处：

长度getter是一样的：

arrayLike.length; // returns 2;
realArray.length; // returns 2; //there are 2 forms in the DOM.

索引的getter是一样的：

arrayLike[0]; // returns an element.
realArray[0]; // returns an element. ('value')

他们都是objects:

typeof arrayLike; // returns "object"
typeof realArray; // returns "object"

---

区别：

在join()、concat()、includes() 等数组中，方法不是函数：

arrayLike.join(", "); // returns Uncaught TypeError: arrayLike.join is not a function (also relevant to `concat()`, `includes()` etc.)
realArray.join(", "); // returns "value1, value2"

数组 like 并不是真正的数组：

Array.isArray(arrayLike); //returns "false"
Array.isArray(realArray); //returns "true"

在数组中无法设置长度属性：

arrayLike.length = 1;
arrayLike.length; //return 2; //there are 2 forms in the DOM.
realArray.length = 1;
realArray.length; //return 1;

Answer 4

我认为，在 ES6 中，如果它是可迭代的（具有 [Symbol.iterator] 属性），则它类似于数组。

Answer 5

这是什么？

一个 Object，它具有非负 Integer 的 length 属性，通常还有一些索引属性。例如

var ao1 = {length: 0},                     // like []
    ao2 = {0: 'foo', 5: 'bar', length: 6}; // like ["foo", undefined × 4, "bar"]

您可以使用 Array.prototype.slice

将 类似数组的对象 转换为对应的 数组

var arr = Array.prototype.slice.call(ao1); // []

它和普通数组有什么区别？

它不是由Array 或数组字面量 [] 构造的，因此（通常）不会从​​Array.prototype 继承。 length 属性通常也不会自动更新。

ao1 instanceof Array; // false
ao1[0] = 'foo';
ao1.length; // 0, did not update automatically

类数组对象和普通对象有什么区别？

没有区别。即使是普通的 Arrays 在 JavaScript

中也是 Objects

ao1 instanceof Object; // true
[] instanceof Object; // true