JS数组填充技巧全解析

本篇文章给大家分享《JS数组填充方法大全》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

填充JavaScript数组的常用方法有：1. 使用Array.prototype.fill()可快速用单一值填充整个或部分数组，但需注意引用类型共享问题；2. 使用for或forEach循环可精确控制填充过程，适合复杂逻辑；3. Array.from()结合映射函数能创建并动态填充新数组，尤其适合生成序列或独立对象；4. 扩展运算符结合map()适用于转换现有数组或生成基于索引的新值；需警惕稀疏数组行为差异及fill()对引用类型浅拷贝导致的副作用，初始化是创建数组结构，填充是赋予具体值，二者常结合使用但概念不同，正确选择方法需根据值类型、动态需求及性能考量决定。

JavaScript中填充数组，说白了就是给数组的特定位置或者整个数组赋予一些值。这事儿看起来简单，但实际操作起来，方法还真不少，而且每种方法都有它自己的脾气和适用场景。从最直接的内置方法到灵活的循环，选择哪种，往往取决于你想要填充什么、怎么填充，以及对性能和代码可读性的偏好。

解决方案

填充JavaScript数组，通常我会考虑以下几种主流方式：

1. Array.prototype.fill()：最直接的“一键填充”

这是ES6引入的方法，简直就是为了填充而生。它能用一个静态值填充数组的所有元素，或者指定范围内的元素。

// 填充整个数组
const arr1 = [1, 2, 3, 4, 5];
arr1.fill(0); // arr1 现在是 [0, 0, 0, 0, 0]
console.log(arr1);

// 填充指定范围（从索引2开始，到索引4之前）
const arr2 = ['a', 'b', 'c', 'd', 'e'];
arr2.fill('x', 2, 4); // arr2 现在是 ['a', 'b', 'x', 'x', 'e']
console.log(arr2);

// 结合 new Array() 创建并填充一个新数组
const newArr = new Array(5).fill('hello'); // newArr 是 ['hello', 'hello', 'hello', 'hello', 'hello']
console.log(newArr);

我个人觉得，当你需要用一个单一的值来初始化或覆盖数组的某个部分时，fill() 是最简洁、最直观的选择。

2. 循环（for、forEach）：给你最大的控制权

如果你需要根据索引、条件或者更复杂的逻辑来填充数组，传统的循环方式依然是王道。

// 使用 for 循环填充
const arrFor = new Array(5); // 创建一个包含5个空槽的数组
for (let i = 0; i < arrFor.length; i++) {
  arrFor[i] = i * 2; // 根据索引填充
}
console.log(arrFor); // [0, 2, 4, 6, 8]

// 使用 forEach 填充一个已存在的数组（通常用于修改元素）
const arrForEach = [10, 20, 30];
arrForEach.forEach((item, index, array) => {
  array[index] = item + 1; // 每个元素加1
});
console.log(arrForEach); // [11, 21, 31]

for 循环的优势在于，它能让你在填充过程中访问到索引，甚至可以跳过某些元素或者提前结束循环。而 forEach 更适合遍历并修改已有的数组元素。

3. Array.from()：创建并填充新数组的利器

Array.from() 是一个非常强大的静态方法，它能从一个类数组对象或可迭代对象创建一个新的、浅拷贝的 Array 实例。它还可以接受一个映射函数，让你在创建新数组的同时就完成填充。

// 从一个类数组对象创建并填充
const arrFrom1 = Array.from({ length: 5 }, (v, i) => i + 1); // [1, 2, 3, 4, 5]
console.log(arrFrom1);

// 填充所有元素为相同值（类似 fill() 但创建新数组）
const arrFrom2 = Array.from({ length: 3 }, () => 'JS'); // ['JS', 'JS', 'JS']
console.log(arrFrom2);

我发现 Array.from() 在需要创建一个特定长度的新数组，并且每个元素的值需要通过某种计算得来时，特别好用。比如，生成一个包含数字序列的数组，或者每个元素都是一个新对象。

4. 扩展运算符（...）结合 map()：优雅地转换和填充

这种组合通常用于创建一个新数组，同时对原数组的元素进行转换或填充。

// 创建一个包含5个 undefined 的数组，然后用 map 填充
const arrMap = [...Array(5)].map((_, i) => `Item ${i}`); // ['Item 0', 'Item 1', 'Item 2', 'Item 3', 'Item 4']
console.log(arrMap);

// 复制并转换现有数组
const originalArr = [1, 2, 3];
const transformedArr = [...originalArr].map(num => num * 10); // [10, 20, 30]
console.log(transformedArr);

[...Array(N)] 这种写法会创建一个包含 N 个 undefined 元素的数组，然后 map 就可以遍历这些 undefined 槽位，并用你想要的值来填充。这是一种很常见的技巧，尤其是在函数式编程风格中。

填充数组时常见的“坑”有哪些？

说实话，刚接触JavaScript数组填充时，我踩过不少坑，最典型的就是引用类型值的问题。

1. fill() 方法与引用类型值的陷阱

这是个老生常谈的问题了，但每次看到新手犯错，我还是会提醒一下。当你用 fill() 填充一个数组，而填充的值是引用类型（比如对象 {} 或数组 []）时，fill() 会把同一个引用赋值给所有目标位置。这意味着，如果你修改了其中一个元素，所有引用到这个元素的其他位置都会跟着变。

const arrWithObj = new Array(3).fill({}); // 填充三个空对象
console.log(arrWithObj); // [{}, {}, {}]

// 尝试修改第一个对象的一个属性
arrWithObj[0].name = 'Alice';

// 结果呢？所有元素都受到了影响！
console.log(arrWithObj);
// 预期：[{ name: 'Alice' }, {}, {}]
// 实际：[{ name: 'Alice' }, { name: 'Alice' }, { name: 'Alice' }]

这背后其实藏着一个核心概念：fill() 进行的是浅拷贝。它只是复制了引用，而不是创建了新的对象实例。要避免这个坑，如果你需要每个元素都是独立的对象，你得用 Array.from() 结合一个返回新对象的映射函数，或者用循环手动创建：

// 正确的做法：使用 Array.from() 确保每个元素都是独立的新对象
const arrCorrect = Array.from({ length: 3 }, () => ({}));
arrCorrect[0].name = 'Bob';
console.log(arrCorrect); // [{ name: 'Bob' }, {}, {}]

// 或者用 for 循环
const arrForLoop = [];
for (let i = 0; i < 3; i++) {
    arrForLoop.push({});
}
arrForLoop[0].name = 'Charlie';
console.log(arrForLoop); // [{ name: 'Charlie' }, {}, {}]

2. 稀疏数组与密集数组的处理差异

new Array(length) 在不带参数调用时，会创建一个稀疏数组，这意味着它里面并没有实际的 undefined 值，而是“空槽”。而 fill() 方法会把这些空槽填充成实际的值。但像 map() 这样的方法，在处理稀疏数组时，它会跳过这些空槽。

const sparseArr = new Array(3); // [empty × 3]
console.log(sparseArr);

sparseArr.fill(1); // fill() 会填充这些空槽
console.log(sparseArr); // [1, 1, 1]

const anotherSparseArr = new Array(3);
anotherSparseArr.map((_, i) => i); // map() 会跳过空槽，不执行回调
console.log(anotherSparseArr); // [empty × 3]

// 如果想用 map 处理，通常会先用 fill(undefined) 把它变成密集数组
const denseArr = new Array(3).fill(undefined);
const mappedDenseArr = denseArr.map((_, i) => i);
console.log(mappedDenseArr); // [0, 1, 2]

理解稀疏数组和密集数组的差异，对于避免一些意想不到的行为非常重要。我通常会倾向于使用 Array.from() 或 new Array(N).fill(undefined) 来创建密集数组，这样后续的操作会更可预测。

如何根据条件或索引动态填充数组？

动态填充数组，往往意味着数组中的每个元素不是一个固定的值，而是根据某种规则或上下文计算出来的。这时候，我们前面提到的一些方法就显得尤为灵活了。

1. Array.from() 结合映射函数：优雅且强大

这是我最推荐的方式之一，因为它同时解决了创建和填充的问题，并且映射函数提供了强大的灵活性。

// 填充一个包含奇偶性判断的数组
const parityArr = Array.from({ length: 10 }, (v, i) => {
  if (i % 2 === 0) {
    return `Index ${i} is Even`;
  } else {
    return `Index ${i} is Odd`;
  }
});
console.log(parityArr);
/*
[
  "Index 0 is Even", "Index 1 is Odd", "Index 2 is Even",
  "Index 3 is Odd", "Index 4 is Even", "Index 5 is Odd",
  "Index 6 is Even", "Index 7 is Odd", "Index 8 is Even",
  "Index 9 is Odd"
]
*/

// 填充一个斐波那契数列（需要一些技巧来访问前一个元素）
// 这里 Array.from 配合闭包或者在外部维护状态会更复杂，
// 这种场景下 for 循环更直观

Array.from() 的回调函数接收两个参数：当前元素的值（对于 length 属性创建的数组，这个值通常是 undefined）和索引 i。这个 i 就是你进行条件判断和动态计算的关键。

2. 传统的 for 循环：终极控制

当填充逻辑变得非常复杂，或者需要引用数组中其他已经填充好的元素（比如计算斐波那契数列），for 循环的直接控制力是无与伦比的。

// 填充一个斐波那契数列
const fibArr = new Array(10);
for (let i = 0; i < fibArr.length; i++) {
  if (i === 0) {
    fibArr[i] = 0;
  } else if (i === 1) {
    fibArr[i] = 1;
  } else {
    fibArr[i] = fibArr[i - 1] + fibArr[i - 2];
  }
}
console.log(fibArr); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

// 根据外部数据源动态填充
const data = ['apple', 'banana', 'cherry', 'date'];
const formattedList = [];
for (let i = 0; i < data.length; i++) {
  formattedList.push(`${i + 1}. ${data[i].toUpperCase()}`);
}
console.log(formattedList); // ["1. APPLE", "2. BANANA", "3. CHERRY", "4. DATE"]

在需要高度定制化或状态依赖的填充场景，我通常会毫不犹豫地选择 for 循环。它虽然看起来没那么“现代”，但胜在稳定和可控。

3. map() 方法：转换现有数组元素

如果你已经有一个数组，并且想根据每个元素的当前值或其索引来生成新的值，map() 是最合适的。它会返回一个全新的数组，不会修改原数组。

const numbers = [1, 2, 3, 4, 5];
// 将所有偶数翻倍，奇数保持不变
const transformedNumbers = numbers.map(num => {
  if (num % 2 === 0) {
    return num * 2;
  }
  return num;
});
console.log(transformedNumbers); // [1, 4, 3, 8, 5]

// 根据索引和值生成对象
const items = ['A', 'B', 'C'];
const itemObjects = items.map((value, index) => ({
  id: index + 1,
  name: value,
  isEvenIndex: index % 2 === 0
}));
console.log(itemObjects);
/*
[
  { id: 1, name: 'A', isEvenIndex: true },
  { id: 2, name: 'B', isEvenIndex: false },
  { id: 3, name: 'C', isEvenIndex: true }
]
*/

map() 是一种非常函数式的做法，它强调转换而不是修改，这在很多场景下能写出更健壮、副作用更少的代码。

填充数组与数组初始化有什么区别和联系？

这两个概念经常被混淆，但实际上它们是紧密相关的，有时甚至在同一个操作中完成。

数组初始化（Initialization）

初始化是指你第一次创建一个数组实例的过程。这时候，你决定了数组的初始形态，比如它是空的，还是已经包含了一些预设的值。

• 空数组字面量： const arr = [];
  • 最常见的初始化方式，创建一个没有任何元素的空数组。
• 带初始值的数组字面量： const arr = [1, 2, 'hello'];
  • 在创建的同时就指定了初始元素。
• new Array(length)： const arr = new Array(5);
  • 创建一个指定长度的数组。注意，这种方式创建的是一个稀疏数组，里面有 length 个空槽，而不是 undefined。
• Array.from()： const arr = Array.from('abc'); 或 const arr = Array.from({ length: 3 });
  • 从一个可迭代对象或类数组对象创建一个新的数组实例。
• 扩展运算符： const arr = [...anotherArr];
  • 浅拷贝一个现有数组，从而初始化一个新数组。

在我看来，初始化就是“把数组这个容器造出来”的过程。

数组填充（Filling）

填充是指你向一个已经存在（或刚刚初始化）的数组中放入具体的元素值。这个过程可能是在数组创建时就完成，也可能是在数组生命周期的后续阶段进行。

• arr.fill(value)： const arr = new Array(5).fill(0);
  • 这是一个典型的先初始化（new Array(5)）后填充（.fill(0)）的组合操作。
• 循环赋值：

  const arr = []; // 先初始化一个空数组
  for (let i = 0; i < 3; i++) {
      arr.push(i * 10); // 再通过循环填充元素
  }

• arr.map()：

  const arr = [1, 2, 3]; // 已有数组
  const newArr = arr.map(item => item * 2); // 填充一个新的数组，基于旧数组的转换

• Array.from() 的映射函数：

  const arr = Array.from({ length: 5 }, (_, i) => i + 1);
  // 这里 Array.from 同时完成了初始化（创建了5个空槽的类数组对象）和填充（通过映射函数生成值）

区别与联系

• 区别： 初始化是创建数组本身，而填充是向数组的“槽位”中放入数据。一个数组可以被初始化但未被填充（比如 new Array(5)），也可以被初始化并立即填充（比如 [1, 2, 3] 或 new Array(5).fill(0)）。
• 联系： 它们常常是同一操作的两个方面。许多时候，我们初始化一个数组的目的就是为了立即填充它。Array.from() 和 new Array().fill() 这种模式，就是将初始化和填充紧密结合在一起的例子。理解它们的区别能帮助我们更好地把握数组在内存中的状态，尤其是在处理稀疏数组或引用类型时，这种区分就显得尤为重要。

简而言之，初始化是“有”和“无”的问题（有没有这个数组），而填充是“有什么”的问题（数组里具体装了什么）。

以上就是《JS数组填充技巧全解析》的详细内容，更多关于引用类型,Array.from(),稀疏数组,JS数组填充,Array.prototype.fill()的资料请关注golang学习网公众号！