javascript - 填充图和填充图的区别

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 底部数组仅使用 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))