JS数组填充|极客笔记

JS数组填充

在JavaScript中，数组是一种非常常用的数据结构，它用来存储一组值或者对象，并且可以通过索引来访问这些值。有时候我们需要在数组中填充一些默认值或者特定的值，这时就可以使用数组填充的方法来实现。

JavaScript提供了一个内置的方法fill()来实现数组填充。fill()方法会用一个指定的值填充数组的所有元素，从起始索引到终止索引。下面先来看一个简单的示例：

// 创建一个长度为5的空数组
let arr = new Array(5);

// 使用fill方法填充数组
arr.fill(0);

console.log(arr);

上面的代码首先创建了一个长度为5的空数组arr，然后使用fill()方法将数组中所有的元素填充为0。运行结果如下：

[0, 0, 0, 0, 0]

从运行结果可以看到，数组arr中的所有元素都被填充为0。

除了填充相同的值之外，我们还可以填充指定的值。例如，我们可以填充一个递增的数字序列到数组中。下面是一个示例：

// 创建一个长度为5的空数组
let arr = new Array(5);

// 使用fill方法填充数组
arr.fill((value, index) => index + 1);

console.log(arr);

在上面的代码中，我们使用箭头函数来填充数组，将每个元素填充为其索引加1的值。运行结果如下：

[1, 2, 3, 4, 5]

有时候我们希望在数组的特定位置填充指定的值，而不是填充整个数组。我们可以通过fill()方法的第二个和第三个参数来实现这一目的。第二个参数指定起始索引（包含），第三个参数指定终止索引（不包含）。下面是一个示例：

// 创建一个长度为5的空数组
let arr = new Array(5);

// 在索引1到索引3之间填充值为9
arr.fill(9, 1, 3);

console.log(arr);

上面的代码中，我们在数组的索引1到索引3之间填充值为9。运行结果如下：

[<1 empty item>, 9, 9, <1 empty item>, <1 empty item>]

可以看到，在索引1到索引3之间的元素被填充为9，其他位置仍然为空。

在JS中，数组可以存储任意类型的数据，包括对象或引用类型数据。如果我们想用相同的对象填充数组的每个元素，我们可以这样做：

// 创建一个长度为3的空数组
let arr = new Array(3);

// 使用fill方法填充数组
arr.fill({ name: 'Alice', age: 25 });

arr[0].age = 30; // 修改第一个元素的值

console.log(arr);

在上面的示例中，我们填充数组arr的每个元素都是一个对象{ name: 'Alice', age: 25 }。修改第一个元素的age属性后，打印数组的结果如下：

[
  { name: 'Alice', age: 30 },
  { name: 'Alice', age: 30 },
  { name: 'Alice', age: 30 }
]

可以看到，修改了一个元素的属性值也会影响到其他元素，这是因为它们引用了同一个对象。

通过fill()方法，我们可以方便地填充数组中的元素，无论是填充相同的值、填充递增序列、填充指定的值到指定的位置，还是填充对象或引用类型数据，都可以很容易地实现。在实际开发中，了解和掌握数组填充的方法能够提高代码的效率，减少重复工作。