JavaScript之填充数组的五种方法

点击跳转填充字符串方法

填充数组是一种常见的操作，尤其是当你需要初始化数组或填充默认值时。本文将介绍几种不同的方法来填充数组，每种方法都有其适用的场景和用法。

1. 使用 Array.prototype.fill()

fill() 方法是最直接的填充数组的方式。它可以用指定的值填充数组的所有元素，或者在指定的起始和结束索引之间填充。
语法:

arr.fill(value, start, end)

• value：要填充的值。
• start（可选）：填充的起始索引（默认为0）。
• end（可选）：填充的结束索引（默认为数组长度）。

示例:

const arr = new Array(5).fill(0); // [0, 0, 0, 0, 0]
console.log(arr);

const arrPartial = [1, 2, 3, 4, 5].fill(0, 2, 4); // [1, 2, 0, 0, 5]
console.log(arrPartial);

fill() 方法会用指定的值填充整个数组或数组的一部分。这对于初始化数组或重置数组的元素非常有用。

2. 使用 Array.from()

Array.from() 方法可以从类数组对象或可迭代对象创建一个新的数组实例，并且可以传入一个映射函数来处理数组元素。
语法:

Array.from(arrayLike, mapFunction)

• arrayLike：类数组对象或可迭代对象。
• mapFunction（可选）：一个函数，用于在创建数组的同时对每个元素进行处理。

示例:

const arr = Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]
console.log(arr);

Array.from() 允许你创建一个新数组，并通过映射函数来生成数组的每个元素。非常适合需要动态生成数组元素的情况。

3. 使用 Array.prototype.map()

如果你已经有一个数组并且需要用另一个数组的元素填充它，可以结合 map() 方法与数组的长度来实现。

示例:

const arr = new Array(5).fill(null).map((_, i) => i * 2); // [0, 2, 4, 6, 8]
console.log(arr);

map() 方法可以对数组中的每个元素应用一个函数，这对于根据某种规则生成新数组非常有用。

4. 使用 Array.prototype.concat() 和 Array.prototype.slic

你可以通过 concat() 和 slice() 方法创建一个填充的数组，尤其是在需要重复某些元素时。

示例:

const arr = new Array(5).concat([1, 2]).slice(0, 5); // [1, 2, 1, 2, 1]
console.log(arr);

concat() 可以将两个数组合并，而 slice() 可以截取指定范围的元素。通过这两个方法的组合，可以方便地创建复杂的填充模式。

5. 使用展开运算符

展开运算符 (…) 允许你将一个数组的元素展开并插入到另一个数组中。这对于复制和填充数组尤其有用。

示例:

const baseArray = [1, 2];
const arr = [...baseArray, ...baseArray, ...baseArray]; // [1, 2, 1, 2, 1, 2]
console.log(arr);

展开运算符使得在创建填充数组时可以更直观地处理重复元素的情况，代码更加简洁易读。

填充数组的方法有很多，每种方法都有其独特的优点和适用场景。fill() 是最直接的方式，Array.from() 和 map() 提供了更高的灵活性，而 concat() 和展开运算符适用于处理更复杂的填充需求。根据具体的需求选择合适的方法，可以使你的代码更加高效和简洁。
相关文章: