填图与填图之差

Question

我偶然发现了一些代码，它们填充了这样的对象数组：

const getObj = () => {
  return {a: 1, b: 2, c: 3};
}

const arr = Array(3).fill(null).map(getObj);
console.log(arr);

但是，我想知道fill(null).map(getObj)的主要目的是什么？这似乎是多余的，因为我只需编写以下内容并获得相同的结果数组：

const getObj = () => {
  return {a: 1, b: 2, c: 3};
}

const arr = Array(3).fill(getObj());
console.log(arr);

所以，我想知道这两行代码是否做了完全相同的事情，还是我遗漏了什么？

得到的数组( fill + map底部数组的top数组优先方法仅使用map)：

​

​

Answer 1

Array(3).fill(getObj())将向数组中填充对同一对象的引用，Array(3).fill(null).map(getObj)将在每个元素中创建对象。见下面的例子：

​

const getObj = () => {
  return {a: 1, b: 2, c: 3};
}

const arr = Array(3).fill(null).map(getObj);
arr[0].b=4;
console.log(JSON.stringify(arr));

const arr1 = Array(3).fill(getObj());
arr1[0].b=4;
console.log(JSON.stringify(arr1))

​

Answer 2

当涉及到Array.fill时，文档中指出：

当fill被传递给一个对象时，它将复制引用并使用对该对象的引用填充数组。

因此，与对象一起使用Array.fill在一定程度上限制了应用程序，除非您确实希望有多个对象指向相同的引用。然而，在少数几个用例中，如果不理解，就会导致bugs。

对于执行Array(3).fill(null).map(getObj)的第二种情况，这是一种基于给定任意大小创建新数组并同时填充新对象的方法之一。

对fill(null)的真正需求是因为调用Array(3)只会做一件事。创建一个新数组，并将其length属性设置为3。

​

let arr = Array(3) // returns new array with its "length" property set to 3

console.log(arr)  // [empty × 3]  <-- browser console

​

因此，该数组现在只有长度和一束empty元素。在它真正有价值之前，你不能用它做很多事情。因此，需要fill，以便您给它任何值，然后map通过它来设置您实际想要的值。使用Array.map并调用每个迭代，您的函数保证您没有相同的引用。您可以跳过fill步骤并执行如下操作：

​

const getObj = () => ({a: 1, b: 2, c: 3})

// using array destructuring
let arr = [...Array(3)].map(getObj)
arr[0].a = 3
console.log(arr)

// using Array.from
let arr2 = Array.from(Array(3)).map(getObj)
arr2[0].a = 3
console.log(arr2)

​

有一些更短的，并得到完全相同的结果，用指定的长度填充数组的对象，而不是引用相同的对象。

这里的诀窍是，在用undefined值定义数组之后，两者都会“填充”数组，然后map会用我们想要的值填充它。