为什么 Array.from() 返回第一个未定义的元素?

Question

当我这样做时

const arrayLike = { 1:'foo', 2:'bar', length:2 };
Array.from(arrayLike);

我得到

[ undefined, 'foo' ]

当我这样做时

const arrayLike = { 1:'foo', 2:'bar', length:3 };
Array.from(arrayLike)

我得到

[ undefined, 'foo', 'bar' ]

• 为什么设置长度时看不到bar？
• 为什么只有当我硬设置为 3 时才看到我的元素？
• 为什么第一个元素显示为undefined？

Answer 1

数组

在JavaScript中0索引

所有这些问题都得到了非常简单的回答。Array.from假设您为其提供的类似数组的对象是零索引的。如果不是，您将获得一个零索引的数组，其中包含所有未设置的元素，包括设置为undefined的元素0。所以在你的例子中，

const arrayLike = { 1:'foo', 2:'bar', length:2 };
Array.from(arrayLike);

本质上与，

const arrayLike = { 0:undefined, 1:'foo', 2:'bar', length:2 };
Array.from(arrayLike);

由于长度小于 max 元素，因此它基本上在该点停止迭代，并且假长度充当截断。你想要的很可能，

const arrayLike = { 0:'foo', 1:'bar', length:2 };
Array.from(arrayLike);

或者，如果您从 1 索引的源获取类似数组的源，请适当地设置length以免丢失最后一个元素，然后从结果中丢弃第一个元素(相当于shift(。

const arrayLike = { 1:'foo', 2:'bar', length:3 };
let arr = Array.from(arrayLike).splice(1);
let arr = Array.from(arrayLike);
arr.shift();

let [, ...arr] = Array.from(arrayLike);

Answer 2

Array.from(obj)

不返回undefined，它使用来自给定数组类对象的属性返回一个新数组obj。

并且创建的每个索引位置的默认值在未给出时是未定义的。

您看到的undefined值位于所创建数组的索引0处。

无论如何，这不是问题，您仍然可以访问索引1和2，它们将返回您希望它们返回的值。

您还可以使用以下方法验证所创建数组的默认行为：

console.log(new Array(10))

哪些日志(索引位置0..9((长度10(：

[undefined x 10]

在 JavaScript 中，您不会看到除0之外具有第一个索引的任何数组。独立地创建阵列的方式。

---

您正在执行的操作的另一种选择是设置原型：

const arrayLike = { 1:'foo', 7:'bar' };
//Dynamic set the length
arrayLike.length = Math.max(...Object.keys(arrayLike)) + 1;
//Get built-in features of Array to your arrayLike
Object.setPrototypeOf(arrayLike, Array.prototype);
//Do something
arrayLike.forEach((x, i) => console.log("%i: %s", i, x))