.map()在这种情况下做什么?


95

使用Chrome控制台,这是我的输入和输出:

[0].map(Array);

[[0, 0, [0]]]; // output

这是怎么回事

编辑

这让我感到好奇的原因是

[0].map(String);

将返回

["0"];

并不是

["0", "0", "String"]

34
我认为是因为他总是需要一些Javascript WTF才能感到快乐
npst

12
哦,这只是['10', '10', '10'].map(parseInt)
gronostaj的

2
另一个奇怪的.map()行为:stackoverflow.com/questions/14528397/…通常,.map()与带有多个参数的函数一起使用时,必须小心。
Barmar

2
只是做[0].map(console.log)
Bergi

1
@Jacksonkr:谢谢你的回答。我认为它是这样的:我写了一条评论,解释说看到JS WTF使我很高兴,我不必经常使用该语言。有人问如果我不喜欢这种语言,为什么我会看JS问题。npst回答了,并且前两个评论被删除了。有趣的是,他的评论仍然被否决了,是的。
埃里克·杜米尼尔

Answers:


123

.map()函数Array()使用三个参数调用该函数,即数组元素的值,该元素0的索引0,以及对整个数组的引用。

就像这样做:

var a = [0];
var index = 0
Array(a[index], index, a);   // create array with three elements

然后返回的数组将Array()成为.map()创建的数组的第一个元素,因此在[[0, 0, [0]]]结果中会额外嵌套。

有关您的编辑的EDIT:当您说[0].map(String);导致String()使用相同的三个参数(如)调用时String(a[index], index, a),该String()函数将忽略除第一个参数以外的Array()所有参数,而使用所有提供的参数。


39

首先Array可以用作创建数组的函数:

var arr = Array(1, 2, "Hello");

console.log(arr); // [1, 2, "Hello"]

其次map将三个参数传递给其回调:元素,其在数组中的索引以及数组本身。

因此,由于您的数组包含一个元素,因此该行:

[0].map(Array);

等效于:

[Array(0, 0, [0])];     // the element 0 in the original array will be mapped into Array(0, 0, [0])

6

更新问题后。其他答案为您提供有关地图的信息

要回答数组和字符串为何不同的原因,请看构造函数

字符串构造函数接受1个参数String(thing),而数组new Array(element0,element1 [,... [,elementN]])


2
这是为什么.map(Number)将每个项目都转换为数字,而不是[3, 2, [4, 1, 3]]为每个项目返回类似的原因。
user4642212

@Xufox是的答案是在构造函数中:)
Volodymyr Bilyachat

4

这个电话

[0].map(Array);

给您的结果与您编写如下内容相同:

[0].map(function (value, index, array) {
    return Array(value, index, array);
})

Map函数使用三个参数调用Array函数:元素的值,元素的索引和整个数组。此调用Array返回具有3个元素的数组:值(数字0),索引(数字0),整个数组([0])。

并且此新数组包装在原始Array中,因为您将原始元素(number 0)映射到新元素(包含3个元素的数组)

注意:您可能习惯于只使用第一个参数,例如

array.map(function (a) { return a * a; });

或仅使用两个来获取索引

array.map(function (item, index) { return "index=" + index + ", value=" + item; });

但是您需要记住,map仍然提供了3个参数,您只需在回调函数中忽略它们即可。这也是代码类似的原因:

[0].map(String);

退货

["0"]

这是因为String函数只关心第一个参数,而忽略其他传递的参数。如果你打电话

String(11, "Some", "other", "ignored", "parameters")

你仍然会得到

"11"
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.