如何在 JavaScript 中的数组中填充静态值？

在 JavaScript 中，有很多方法可以在数组中填充静态值。让我们一一看看。

数组填充（）方法：我们使用数组填充（）方法来填充JavaScript中的数组中的静态值。这个 JavaScript 数组fill()方法用于从指定的开始位置到指定的结束位置用给定的静态值填充数组。如果我们不指定开始和结束位置，那么整个数组将被给定的静态值填充。此fill()方法修改原始数组并将其返回。

句法：

arr.fill(value, start, end)

参数： fill()方法接受三个参数，即 value、start、end。 arr是数组。

• value：这通常是必需的。它定义了将填充数组的静态值。
• 开始：这是可选的。这是起始索引，这意味着我将从该索引开始用静态值填充数组。如果未定义起始索引值，则它将从 0 开始。
• 结束：这是可选的。这是结束或最后一个索引，这意味着在该索引之前，我们将用静态值填充数组。如果未定义结束索引值，则arr.长度（不包括）或 arr.length-1 默认情况下将被定义为结束索引。

注意：如果起始索引或结束索引为负数，则索引从后面开始计算。

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

示例 1：在下面的示例中，我们使用fill()方法填充数组。整个数组用 50 填充，替换之前的值。这里我们不定义 开始和结束索引，因此默认情况下开始索引为 0，结束索引为 arr.length-1。

Javascript

    var value = [4, 10, 5, 7, 6, 18];
      
    // Whole array is filled with 50 
    // and return the modified array 
    var value2 = value.fill(50);
    console.log(value);
    console.log(value2);
<script></code></pre></div><br><hr><h5 class="code">Javascript</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace">var value = [4, 10, 5, 7, 6, 18];
value.fill(45, 1, 4); 
console.log(value);</code></pre></div><br><hr><h5 class="code">Javascript</h5><div class="hcb_wrap"><pre class="prism undefined-numbers lang-js" data-lang="JavaScript"><code class="replace"><Script>
    var value = [4, 10, 5, 7, 6, 18];
    value.fill(15, 3); 
    console.log(value);

输出：

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

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

Javascript

var 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

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

输出：

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

示例 4：在下面的示例中，我们使用fill()方法将数组填充为 25。这里 start index = -4 和 end index = -1，因此索引是从倒数开始计算的。

Javascript

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

输出：

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

例 5：在下面的例子中，如果我们给出一个无效的索引，那么数组将永远不会改变。

Javascript

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

输出：

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

使用 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 循环用 15 填充数组，从起始索引为 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 ]

使用 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 ]

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

句法：

Array.from(object, mapFunction, thisValue)

参数： from()方法接受三个参数，即object、mapFunction和thisValue 。

• 对象：这通常是必需的。此参数保存我们转换为数组的数组或可迭代对象。
• mapFunction：这是可选的。这用于调用数组的每个元素。
• thisValue：这是可选的。当我们调用mapFunction时，“ thisValue ”的值被用作“ this ”。

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

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

Javascript

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

输出：

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

使用扩展运算符：我们使用扩展运算符在 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 ]