插件窝 干货文章 Javascript如何使用数据填充数组

Javascript如何使用数据填充数组

数组 JavaScript 填充 const 202    来源:    2025-04-26

JavaScript 数组填充方法

在 JavaScript 中有多种方法可以填充数组数据,以下是几种常用的方式:

1. 使用字面量初始化数组

const arr1 = [1, 2, 3, 4, 5]; // 直接填充数据
const arr2 = ['a', 'b', 'c'];

2. 使用 Array.fill() 方法

// 创建长度为5的数组并用0填充
const arr = new Array(5).fill(0); // [0, 0, 0, 0, 0]

// 也可以指定填充的起始和结束位置
const arrPartial = new Array(5).fill(0, 1, 3); // [empty, 0, 0, empty, empty]

3. 使用 Array.from() 方法

// 创建长度为5的数组并用索引填充
const arr = Array.from({length: 5}, (_, i) => i); // [0, 1, 2, 3, 4]

// 创建二维数组
const matrix = Array.from({length: 3}, () => new Array(3).fill(0));

4. 使用 map() 方法

// 基于已有数组创建新数组
const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]

5. 使用展开运算符和 Array() 构造函数

// 创建序列数组
const sequence = [...Array(5).keys()]; // [0, 1, 2, 3, 4]

6. 使用循环填充数组

// 使用for循环
const arr = [];
for (let i = 0; i < 5; i++) {
  arr.push(i * 2);
}
// arr = [0, 2, 4, 6, 8]

// 使用while循环
const arr2 = [];
let j = 0;
while (j < 5) {
  arr2.push(j);
  j++;
}

7. 使用生成器函数

function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

const arr = [...range(1, 5)]; // [1, 2, 3, 4, 5]

8. 填充对象数组

const users = Array.from({length: 3}, (_, i) => ({
  id: i + 1,
  name: `User ${i + 1}`
}));
/*
[
  {id: 1, name: "User 1"},
  {id: 2, name: "User 2"},
  {id: 3, name: "User 3"}
]
*/

选择哪种方法取决于你的具体需求、代码可读性和性能考虑。对于简单的填充,Array.fill() 和字面量是最直接的;对于需要基于计算的值,Array.from()map() 更合适;对于复杂的数据结构,可能需要组合使用多种方法。