JS数组填充

JS数组填充

在JavaScript中，我们经常需要对数组进行初始化或者填充操作。数组填充是指将指定的值或对象添加到数组中，以便在特定情况下使用。本文将详细介绍在JS中如何对数组进行填充操作，包括填充固定值、填充对象、填充指定范围等。

1. 使用fill()方法填充数组

在ES6中，为数组添加了fill()方法，用于将数组所有元素设置为静态值。语法如下：

array.fill(value, start, end)

• value: 必填参数，填充的值
• start: 可选参数，起始索引，默认为0
• end: 可选参数，结束索引，默认为数组的长度

示例代码：

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

在上面的示例中，我们将数组arr的索引2到4之间的元素填充为0。

2. 使用Array.from()方法填充数组

另一种常用的方法是使用Array.from()方法创建一个新的数组，并填充指定的值。语法如下：

Array.from({length: length}, () => value);

• length: 必填参数，数组的长度
• value: 填充的值

示例代码：

let arr = Array.from({length: 5}, () => 1);
console.log(arr); // [1, 1, 1, 1, 1]

在上面的示例中，我们创建了一个长度为5的数组，并将所有元素填充为1。

3. 填充多维数组

有时候，我们可能需要填充一个多维数组，可以通过嵌套Array.from()方法来实现。示例代码如下：

let matrix = Array.from({length: 3}, () => Array.from({length: 3}, () => 0));
console.log(matrix);
// [[0, 0, 0], [0, 0, 0], [0, 0, 0]]

在上面的示例中，我们创建了一个3×3的二维数组，并将所有元素填充为0。

4. 填充不同类型的值

除了填充基本类型的值外，我们还可以填充对象、函数等复杂类型的值。示例代码如下：

let arr = Array.from({length: 3}, () => ({name: 'John', age: 30}));
console.log(arr);
// [{name: 'John', age: 30}, {name: 'John', age: 30}, {name: 'John', age: 30}]

在上面的示例中，我们创建了一个包含3个对象的数组，并且每个对象拥有相同的属性。

5. 使用Array.prototype.map()填充数组

除了上述方法外，我们还可以使用Array.prototype.map()方法来填充数组。示例代码如下：

let arr = Array(5).fill(0).map((value, index) => index + 1);
console.log(arr);
// [1, 2, 3, 4, 5]

在上面的示例中，我们首先将数组填充为0，然后通过map()方法将每个元素映射为其对应的索引加1。

结语

本文介绍了在JavaScript中对数组进行填充的几种常用方法，包括使用fill()方法、Array.from()方法、Array.prototype.map()方法等。使用这些方法能够方便快捷地初始化数组，提高代码的可读性和可维护性。