Javascript map（）和fill（）如何在新创建的数组上组合工作

我遇到过类似的代码：

function createObj() {
  return {
    x: 'type1',
    y: 100 };
}
const newArray = Array(4).fill("Dummy").map(createObj);  
console.log(newArray);

这将创建一个包含4个元素的新数组，如下所示：

(4) [{…}, {…}, {…}, {…}]
0: {x: "type1", y: 100}
1: {x: "type1", y: 100}
2: {x: "type1", y: 100}
3: {x: "type1", y: 100}
length: 4
__proto__: Array(0)

我不知道为什么它没有填充我在fill中提供的值（“Dummy”）

我想知道这到底是怎么回事

我将代码调整为：

function createObj() {
 return {
   x: 'type1',
   y: 100 };
}
const newArray = Array(4).fill("Dummy");
newArray.map(createObj);  
console.log(newArray);

现在输出为：

(4) ["Dummy", "Dummy", "Dummy", "Dummy"]
0: "Dummy"
1: "Dummy"
2: "Dummy"
3: "Dummy"
length: 4
__proto__: Array(0)

函数createObj（）{
返回{
x:‘类型1’，
y:100}；
}
常量newArray=Array（4）.fill（“Dummy”）；
//这段代码创建一个长度为4的数组，在每个索引中填充文本“Dummy”。
newArray.map（createObj）；
console.log（newArray）；//此console.log将指向上面3行的newArray常量，它将不是以下内容的输出：newArray.map（createObj）
const newThing=newArray.map（createObj）；
//newThing现在是.map（）所做的，即从正在传递的内容中返回一个新创建的数组。
log（newThing）

当我们迭代map对象时，它返回一个新数组（不可变函数）

---

它们的主要区别在于

map（）

返回一个数组，而不是更改原始数组

在第一个示例中，

constnewarray=Array（4）.fill（“Dummy”）.map（createObj）

对

map（）

的最后一次调用返回一个新数组并将其分配给

newArray

---

在第二个示例中，

constnewarray=Array（4）.fill（“Dummy”）

fill（）调用的reult分配给

newArray

。调用

map（）

时，它会运行，但结果不会分配给任何变量。

您可以将代码行分解为：

Array(4) // [empty, empty, empty, empty]

上述操作将创建一个包含四个“空”插槽的阵列：

.fill("Dummy") // ["Dummy", "Dummy", "Dummy", "Dummy"]

对于数组中的每个空槽（从索引

0

到数组的

length

），

fill

方法将把字符串

“Dummy”

放在它的位置上（正如

所示。fill

将带有特定对象的所有元素从0设置为数组的长度）。这是

.map

方法工作所必需的（因为

.map（）

只对存在的值进行迭代）

---

将遍历数组中的每个元素，并将其转换为

createObj

返回的对象的引用。如果尝试在空数组上执行

.map

，它将跳过所有空插槽，因此需要

.fill（）

。因此，通过使用

.map

可以在每个索引处创建唯一的对象。

这是因为您从

createObj

函数返回了一个对象

记住

map

函数返回一个新数组，其中的值就是返回的值。在这种情况下，您的虚拟数据没有用处，只有数组的大小

让我们逐一查看代码

//将返回[empty x 4]
阵列（4）；
//这将用“虚拟”文本填充数组
//['Dummy'，'Dummy'，'Dummy'，'Dummy']
数组（4）。填充（'Dummy'）；

这就是迄今为止在调整代码时所理解的

现在看地图。如果您从填充的数组返回值，您将得到一个新的数组，用返回的值填充

//输出为：
//['Dummy'，'Dummy'，'Dummy'，'Dummy']
数组（4）.fill（'Dummy'）.map（value=>value）；
//但是！还记得我在上面写的关于返回//新值数组并用返回的值填充的内容吗。
//在本例中，您正在处理FILL函数返回的数组。
//
//输出：
//0:{x:“类型1”，y:100}
//1:{x:“类型1”，y:100}
//2:{x:“类型1”，y:100}
//3:{x:“类型1”，y:100}
数组（4）.fill（'Dummy'）.map（（）=>({
x:‘类型1’，
y:100，
})); 

---

只需记住一些函数，如

Array

，

fill

，

filter

，

map

，

flatMap

，

reduce

，等等，它们返回一个新数组。因此，当您在返回的数组上处理每个函数时。

它确实会填充

“Dummy”

，然后在此基础上创建一个新数组并丢弃旧数组。尝试

constoldarray=Array（4）.fill（“Dummy”）；const newArray=oldArray.map（createObj）；log（“old”，oldArray）；log（“new”，newArray）

map

方法返回一个新数组。您期望的结果是什么？@apokryfos我的期望不是基于输出，我想知道fill和map是如何结合的，我已经找到了答案。。在这里，fill（）除了为map提供一个操作平台之外什么都不做，尽管map（）确实返回了一个数组，但如果没有fill（）它将无法工作，因为它不能在空数组上工作。这个答案解释了我想要的每一点，我发现缺少的唯一一件事是我选择@Nick Parsons answer作为批准的原因，map（）如果没有fill（），它将无法工作，除了fill（）没有太多功能之外，填充的值也不重要。有关特定方法如何与数组“洞”交互的更多信息：

.fill("Dummy") // ["Dummy", "Dummy", "Dummy", "Dummy"]

.map(createObj)