为什么“map”方法显然不适用于通过“new Array(count)”创建的数组？

Question

我在 Firefox-3.5.7/Firebug-1.5.3 和 Firefox-3.6.16/Firebug-1.6.2 中观察到这一点

当我启动 Firebug 时：

var x = new Array(3)
console.log(x) 
// [undefined, undefined, undefined]

var y = [undefined, undefined, undefined]
console.log(y) 
// [undefined, undefined, undefined]

console.log(x.constructor == y.constructor) // true

console.log( 
  x.map(function() { return 0; })
)
// [undefined, undefined, undefined]

console.log(
  y.map(function() { return 0; })
)
// [0, 0, 0]

这是怎么回事？这是一个错误，还是我误解了如何使用new Array(3)？

Answer 1

这是一个简单的实用方法作为解决方法：

Simple mapFor

function mapFor(toExclusive, callback) {
    callback = callback || function(){};
    var arr = [];
    for (var i = 0; i < toExclusive; i++) {
        arr.push(callback(i));
    }
    return arr;
};

var arr = mapFor(3, function(i){ return i; });
console.log(arr); // [0, 1, 2]
arr = mapFor(3);
console.log(arr); // [undefined, undefined, undefined]

完整示例

这是一个更完整的示例（带有健全性检查），它还允许指定可选的起始索引：

function mapFor() {
var from, toExclusive, callback;
if (arguments.length == 3) {
    from = arguments[0];
    toExclusive = arguments[1];
    callback = arguments[2];
} else if (arguments.length == 2) {
    if (typeof arguments[1] === 'function') {
        from = 0;
        toExclusive = arguments[0];
        callback = arguments[1];
    } else {
        from = arguments[0];
        toExclusive = arguments[1];
    }
} else if (arguments.length == 1) {
    from = 0;
    toExclusive = arguments[0];
}

callback = callback || function () {};

var arr = [];
for (; from < toExclusive; from++) {
    arr.push(callback(from));
}
return arr;
}

var arr = mapFor(1, 3, function (i) { return i; });
console.log(arr); // [1, 2]
arr = mapFor(1, 3);
console.log(arr); // [undefined, undefined]
arr = mapFor(3);
console.log(arr); // [undefined, undefined, undefined]

倒计时

操作传递给回调的索引可以倒数：

var count = 3;
var arr = arrayUtil.mapFor(count, function (i) {
    return count - 1 - i;
});
// arr = [2, 1, 0]

Answer 2

看来第一个示例

x = new Array(3);

创建了一个长度为 3 但没有任何元素的数组，因此未创建索引 [0]、[1] 和 [2]。

第二个创建一个包含 3 个未定义对象的数组，在这种情况下，它们自己创建了索引/属性，但它们引用的对象未定义。

y = [undefined, undefined, undefined]
// The following is not equivalent to the above, it's the same as new Array(3)
y = [,,,];

由于映射在索引/属性列表上运行，而不是在设置的长度上运行，因此如果没有创建索引/属性，它将不会运行。

Answer 3

使用 ES6，您可以快速轻松地执行 [...Array(10)].map((a, b) => a) ！

Answer 4

ES6 解决方案：

[...Array(10)]

但不适用于 typescript (2.3)

Answer 5

来自 map：

[...] callback 仅针对已分配值的数组索引调用； [...]

[undefined] 实际上将 setter 应用于索引，以便 map 进行迭代，而 new Array(1) 只是使用默认值 undefined 初始化索引，因此 map 会跳过它。

我相信这对于所有迭代方法都是相同的。

Answer 6

由于其他答案中彻底解释的原因， Array(n).map 不起作用。但是，在 ES2015 中 Array.from 接受一个地图函数：

let array1 = Array.from(Array(5), (_, i) => i + 1)
console.log('array1', JSON.stringify(array1)) // 1,2,3,4,5

let array2 = Array.from({length: 5}, (_, i) => (i + 1) * 2)
console.log('array2', JSON.stringify(array2)) // 2,4,6,8,10

Answer 7

数组不同。区别在于 new Array(3) 创建一个长度为 3 但没有属性的数组，而 [undefined, undefined, undefined] 创建一个长度为 3 的数组三个和三个属性分别称为“0”、“1”和“2”，每个属性的值为未定义。您可以使用 in 运算符看到差异：

"0" in new Array(3); // false
"0" in [undefined, undefined, undefined]; // true

这源于一个有点令人困惑的事实，即如果您尝试获取 JavaScript 中任何本机对象的不存在属性的值，它会返回 undefined（而不是抛出错误，就像您尝试引用不存在的变量时发生的那样），这与之前已将属性显式设置为 undefined 时得到的结果相同代码>.

Answer 8

在 ECMAScript 第六版规范中。

new Array(3) 仅定义属性length，不定义诸如{length: 3}之类的索引属性。请参阅 https://www.ecma-international。 org/ecma-262/6.0/index.html#sec-array-len 步骤 9.

[undefined, undefined, undefined] 将定义索引属性和长度属性，如 { 0：未定义，1：未定义，2：未定义，长度：3}。请参阅 https://www.ecma- International.org/ecma-262/6.0/index.html#sec-runtime-semantics-arrayaccumulation ElementList 步骤 5.

方法 map、every、一些、forEach、切片、reduce、reduceRight、 Array 的 filter 会通过 HasProperty 内部方法检查索引属性，因此 new Array(3).map(v => 1) 将不调用回调。

有关更多详细信息，请参阅 https:// www.ecma-international.org/ecma-262/6.0/index.html#sec-array.prototype.map

如何修复？

let a = new Array(3);
a.join('.').split('.').map(v => 1);

let a = new Array(3);
a.fill(1);

let a = new Array(3);
a.fill(undefined).map(v => 1);

let a = new Array(3);
[...a].map(v => 1);

Answer 9

我认为解释这一点的最好方法是看看 Chrome 处理它的方式。

>>> x = new Array(3)
[]
>>> x.length
3

所以实际发生的情况是 new Array() 返回一个长度为 3 的空数组，但没有值。因此，当您在技术上空数组上运行x.map时，无需设置任何内容。

Firefox 只是用 undefined '填充'那些空槽，即使它没有值。

我不认为这明显是一个错误，只是一种糟糕的表示正在发生的事情的方式。我认为 Chrome 的“更正确”，因为它表明数组中实际上没有任何内容。

Answer 10

不是错误。这就是数组构造函数的定义方式。

来自MDC：

当您使用 Array 构造函数指定单个数字参数时，您指定了数组的初始长度。以下代码创建一个包含五个元素的数组：

var billingMethod = new Array(5);

Array 构造函数的行为取决于单个参数是否为数字。

.map() 方法仅包含已显式分配值的数组的迭代元素。即使显式分配 undefined 也会导致某个值被视为有资格包含在迭代中。这看起来很奇怪，但这本质上是对象上的显式 undefined 属性和缺失属性之间的区别：

var x = { }, y = { z: undefined };
if (x.z === y.z) // true

对象 x 没有名为“z”的属性，并且对象 y 会这样做。然而，在这两种情况下，属性的“值”似乎都是未定义。在数组中，情况类似：length 的值确实隐式地对从 0 到 length - 1 的所有元素执行赋值。因此，当在使用 Array 构造函数和数字参数新构造的数组上调用时，.map() 函数不会执行任何操作（不会调用回调）。

Answer 11

刚刚遇到这个。能够使用 Array(n).map 肯定会很方便。

Array(3) 大致产生 {length: 3}

[undefined, undefined, undefined] 创建编号属性：
{0：未定义，1：未定义，2：未定义，长度：3}。

map() 实现仅作用于定义的属性。

Answer 12

如果您这样做是为了轻松地用值填充数组，则不能使用 fill 出于浏览器支持原因并且确实不想执行 for 循环，您也可以执行 x = new Array(3).join(".") .split(".").map(... 将为您提供一个空字符串数组。

我不得不说，这很丑陋，但至少问题和意图传达得相当清楚。

Answer 13

既然问题是为什么，这就和 JS 的设计方式有关。

我可以想到两个主要原因来解释这种行为：

• 性能：给定 x = 10000 和 new Array(x) 构造函数明智的做法是避免从 0 到 10000 循环以使用 未定义 值填充数组。

• 隐式“未定义”：给出a = [undefined, undefined]和b = new Array(2)、a[1]和 b[1] 都会返回 undefined，但 a[8] 和 b[8] 也会返回即使它们超出范围，也返回 undefined。

最终，符号 empty x 3 是避免设置和显示一长串 未定义 值的快捷方式，这些值无论如何都是 未定义 因为它们不是明确声明。

注意：给定数组 a = [0] 和 a[9] = 9，console.log(a) 将返回 ( 10) [0,empty x 8, 9]，通过返回显式声明的两个值之间的差异来自动填充间隙。

Answer 14

我有一个任务，我只知道数组的长度，需要转换项目。
我想做这样的事情：

let arr = new Array(10).map((val,idx) => idx);

快速创建这样的数组：

[0,1,2,3,4,5,6,7,8,9]

但它不起作用，因为：
（请参阅 Jonathan Lonowski 的回答）

解决方案可能是使用 Array.prototype.fill()

let arr = new Array(10).fill(undefined).map((val,idx) => idx);

console.log(new Array(10).fill(undefined).map((val, idx) => idx));

更新

另一种解决方案可能是：

let arr = Array.apply(null, Array(10)).map((val, idx) => idx);

console.log(Array.apply(null, Array(10)).map((val, idx) => idx));