JavaScript 如何填充数组的静态值

在本文中，我们将介绍填充数组的几种方法。在JavaScript中，有多种方法可以填充数组的静态值，例如：

• 使用 Array fill() 方法
• 使用 for 循环
• 使用 push() 方法
• 使用 from() 方法
• 使用 spread operator

方法1：Array fill() 方法

我们可以使用数组的fill()方法在JavaScript中填充静态值。该方法用于从指定的起始位置到指定的结束位置，使用给定的静态值填充数组。如果不指定起始和结束位置，则整个数组将被填充为给定的静态值。fill()方法会修改原始数组并返回它。

语法：

arr.fill(value, start, end)

返回值： arr.fill() 方法返回修改后的数组（不返回任何新的数组），该数组被静态值填充。

示例1： 在下面的示例中，我们使用 fill() 方法来填充数组。整个数组都被 50 填充，替换了先前的值。在这里，我们没有定义起始索引和结束索引，所以默认起始索引是 0，结束索引是 arr.length-1。

JavaScript

let value = [4, 10, 5, 7, 6, 18];
 
// Whole array is filled with 50 
// and return the modified array 
let value2 = value.fill(50);
console.log(value);
console.log(value2);

输出：

[ 50, 50, 50, 50, 50, 50 ]
[ 50, 50, 50, 50, 50, 50 ]

示例2： 在下面的示例中，我们使用 fill() 方法将数组从索引1开始到索引4（不包括4）的位置填充为45。

Javascript

let value = [4, 10, 5, 7, 6, 18];
value.fill(45, 1, 4);
console.log(value);

输出：

[ 4, 45, 45, 45, 6, 18 ]

示例3： 在下面的示例中，我们使用 fill() 方法将数组填充为15。起始索引是3，但结束索引未定义，所以默认情况下结束索引是arr.length-1。

Javascript

let value = [4, 10, 5, 7, 6, 18];
value.fill(15, 3); 
console.log(value);

输出：

[ 4, 10, 5, 15, 15, 15 

示例4： 在下面的示例中，我们使用 fill() 方法将数组填充为25。这里的起始索引是-4，结束索引是-1，所以索引是反向计数。

JavaScript

let value = [4, 10, 5, 7, 6, 18];
value.fill(25, -4, -1);
console.log(value);

输出：

[ 4, 10, 25, 25, 25, 18 ]

示例5： 在以下示例中，如果我们提供了一个无效的索引，那么数组将永远不会改变。

Javascript

let value = [4, 10, 5, 7, 6, 18];
value.fill(25, 8, 10);
console.log(value);

输出：

[ 4, 10, 5, 7, 6, 18 ]

方法2： 使用for循环

我们可以使用简单的 for 循环来填充JavaScript数组中的静态值。但是，arr.fill()方法仍然是最适合此任务的。让我们看一些示例。

示例1： 在下面的示例中，我们使用 for循环 来用2填充数组。

Javascript

let value = [5, 3, 9, 10, 50, 100];
let i;
 
for (i = 0; i < value.length; i++) {
    value[i] = 2;
}
console.log(value);

输出：

[ 2, 2, 2, 2, 2, 2 ]

示例2： 在下面的示例中，我们使用 for 循环将数组从起始索引1填充到结束索引4（但是结束索引必须小于arr.length）。

JavaScript

let value = [5, 3, 9, 10, 50, 100];
let i;
for (i = 1; i <= 4; i++) {
    value[i] = 15;
}
console.log(value);

输出：

[ 5, 15, 15, 15, 15, 100 ]

方法3：使用push()方法

我们使用push()方法在JavaScript中填充静态值到一个数组。我们在for()循环内部使用push()方法。push()方法总是将一个新元素添加到数组的末尾，这意味着push()方法无法替换数组的元素。

示例: 在下面的示例中，我们取一个空数组并使用push()方法将数组填满10个。

Javascript

let value = [];
 
// An empty array is taken
let i, length = 5;
for (i = 0; i < length; i++) {
    value.push(10);
}
console.log(value);

输出：

[ 10, 10, 10, 10, 10 ]

方法4：使用from()方法

我们使用from()方法来填充JavaScript数组中的静态值。from()方法用于创建一个新数组，其中包含来自数组或可迭代对象的副本。我们使用该方法将数组或可迭代对象转换为数组。

语法：

Array.from(object, mapFunction, thisValue)

返回值： from() 方法返回一个新的数组。

示例： 我们看一个使用 from() 方法在 JavaScript 中填充静态值的示例。在下面的示例中，我们使用 Array.from() 方法将数组填充为值 4。我们创建了一个 length = 6 的对象。

Javascript

let arr = Array.from({
    length: 6
}, (value) => value = 4);
console.log(arr);

输出：

[ 4, 4, 4, 4, 4, 4 ]

方法5：使用展开运算符

我们使用展开运算符在JavaScript中填充数组的静态值。展开运算符由三个点（…）表示。展开运算符帮助将现有数组的所有元素复制到另一个数组。让我们来看一个示例。

示例： 在以下示例中，我们使用展开运算符结合map函数将数组填充为100。

Javascript

let arr = [1, 3, 5, 8, 9, 10];
let arr2 = [...arr].map((value) => value = 100);
console.log(arr2);

输出：

[ 100, 100, 100, 100, 100, 100 ]