理解 JavaScript 中的数组引用：fill([]) 与 map(() => []) 的区别为什么 `fill([

在 JavaScript 中，数组和对象是引用类型，这意味着数组和对象的赋值、修改等操作是基于引用而非值。这一点在处理数组时，尤其是在使用 fill() 和 map() 方法时，可能会带来一些微妙的差异。

今天，我们来深入探讨一个常见的 JavaScript 问题：为什么 fill([]) 和 map(() => []) 在创建数组时的行为不同？通过这个问题，我们也能够更加清晰地理解 JavaScript 中的数组引用和复制机制。

fill() 是 JavaScript 数组方法之一，它将数组中的所有元素填充为相同的值。在使用 fill() 方法时，尤其是填充数组的元素为对象类型（包括数组）时，可能会遇到一些困惑。我们来看一个例子：

const arr = new Array(3).fill([]);  // 用一个空数组填充所有位置
console.log(arr); // 输出：[ [], [], [] ]

看似 arr 数组的每个元素都是空数组，但实际上，它们并不是独立的。它们都是指向同一个空数组对象的引用。

示例：

const arr = new Array(3).fill([]);  // 所有元素指向同一个空数组
arr[0].push(1); // 修改 arr[0]
console.log(arr); // 输出：[[1], [1], [1]] — 所有元素都变了

这里，arr[0] 的修改（push(1)）会影响到所有其他元素，因为它们指向的是同一个数组。

相比之下，map() 方法会遍历数组，并为每个元素执行一个回调函数。假如我们在回调函数中返回一个新的空数组，每次 map() 执行时，都会创建一个新的数组对象，而不是引用相同的数组。

const arr = new Array(3).fill(null).map(() => []);  // 每个元素是一个新的空数组
console.log(arr); // 输出：[ [], [], [] ]

在 map(() => []) 中，() => [] 表示每次执行时都返回一个新的空数组。
因为每次 map() 都创建了新的数组对象，所以 arr[0]、arr[1]、arr[2] 分别是不同的数组对象，它们有不同的内存地址。

示例：

const arr = new Array(3).fill(null).map(() => []); // 每个元素是独立的空数组
arr[0].push(1); // 修改 arr[0]
console.log(arr); // 输出：[[1], [], []] — 只有 arr[0] 被修改

这一次，arr[0] 被修改为 [1]，但 arr[1] 和 arr[2] 保持不变，因为它们是独立的数组对象。

理解 fill([]) 和 map(() => []) 之间的区别，有助于我们更好地控制数组的操作，避免一些不必要的 引用共享 问题。在实际开发中，如果你需要每个数组元素都是独立的，避免修改一个元素时影响到其他元素，使用 map(() => []) 是更安全的选择。

理解 JavaScript 中的数组引用：fill([]) 与 map(() => []) 的区别