Hay muchas formas de llenar valores estáticos en una array en JavaScript. Vamos a verlos todos uno por uno.
Método Array fill(): Usamos el método array fill() para llenar valores estáticos en una array en JavaScript . Este método de relleno de array de JavaScript() se usa para llenar una array con un valor estático dado desde la posición de inicio especificada hasta la posición final especificada. Si no especificamos la posición inicial y final, toda la array se llenará con un valor estático determinado. Estemétodo fill() modifica la array original y la devuelve.
Sintaxis:
arr.fill(value, start, end)
Parámetros: El método fill() acepta tres parámetros que son value, start, end. El arr es la array .
- valor: Esto generalmente es requerido. Define el valor estático por el cual se llenará la array.
- inicio: Esto es opcional. Este es el índice de inicio, lo que significa que comenzaré a llenar la array desde ese índice con un valor estático. Si el valor del índice inicial no está definido, comenzará desde 0.
- fin: Esto es opcional. Este es el índice final o último, lo que significa que hasta ese índice llenaremos la array con un valor estático. Si el valor del índice final no está definido, entonces arr. length (exclusivo) o arr.length-1 se definirá como índice final de forma predeterminada.
Nota: Si el índice inicial o el índice final es negativo, los índices se cuentan desde atrás.
Valor devuelto: el método arr.fill() devuelve la array modificada (no devuelve ninguna array nueva), que se rellena con un valor estático.
Ejemplo 1: En el siguiente ejemplo, usamos el método fill() para llenar la array. Toda la array se llena con 50, reemplazando los valores anteriores. Aquí no definimos el índice inicial y final , por lo que el índice inicial predeterminado es 0 y el índice final es arr.length-1.
Javascript
<script> 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>
Producción:
[ 50, 50, 50, 50, 50, 50 ] [ 50, 50, 50, 50, 50, 50 ]
Ejemplo 2: En el siguiente ejemplo, usamos el método fill() para llenar la array con 45 desde el índice inicial es 1 hasta el índice final es 4 (exclusivo).
Javascript
var value = [4, 10, 5, 7, 6, 18]; value.fill(45, 1, 4); console.log(value);
Producción:
[ 4, 45, 45, 45, 6, 18 ]
Ejemplo 3: En el siguiente ejemplo, usamos el método fill() para llenar la array con 15. El índice inicial es 3 pero el índice final no está definido, por lo que el índice final predeterminado es arr.length-1.
Javascript
<Script> var value = [4, 10, 5, 7, 6, 18]; value.fill(15, 3); console.log(value); </script>
Producción:
[ 4, 10, 5, 15, 15, 15 ]
Ejemplo 4: En el siguiente ejemplo, usamos el método fill() para llenar la array con 25. Aquí el índice inicial = -4 y el índice final = -1, por lo que los índices se cuentan desde atrás.
Javascript
<script> var value = [4, 10, 5, 7, 6, 18]; value.fill(25, -4, -1); console.log(value); </script>
Producción:
[ 4, 10, 25, 25, 25, 18 ]
Ejemplo 5: en el siguiente ejemplo, si proporcionamos un índice no válido, la array nunca cambiará.
Javascript
<script> var value = [4, 10, 5, 7, 6, 18]; value.fill(25, 8, 10); console.log(value); </script>
Producción:
[ 4, 10, 5, 7, 6, 18 ]
Uso del bucle for: usamos un bucle for simplellenar valores estáticos en una array en JavaScript. Pero aún así, el método arr.fill() es el mejor para este trabajo. Veamos algunos ejemplos.
Ejemplo 1: En el siguiente ejemplo, usamos for loop para llenar la array con 2.
Javascript
<script>
let value = [5, 3, 9, 10, 50, 100];
let i;
for(i = 0; i < value.length; i++) {
value[i] = 2;
}
console.log(value);
</script>
Producción:
[ 2, 2, 2, 2, 2, 2 ]
Ejemplo 2: En el siguiente ejemplo, usamos for loop para llenar la array con 15 desde el índice inicial es 1 hasta el índice final es 4 (pero el índice final debe ser menor que arr.length).
Javascript
<script>
let value = [5, 3, 9, 10, 50, 100];
let i;
for(i = 1; i <= 4; i++) {
value[i] = 15;
}
console.log(value);
</script>
Producción:
[ 5, 15, 15, 15, 15, 100 ]
Usando el método push(): Usamos el método push() para llenar valores estáticos en una array en JavaScript. Usamos el método push() dentro del ciclo for(). El método push() siempre agrega un nuevo elemento al final de la array, lo que significa que el método push() no puede reemplazar los elementos de la array.
Ejemplo: en el siguiente ejemplo, tomamos una array vacía y usamos el método push() para llenar la array con 10.
Javascript
<script>
let value = [];
// An empty array is taken
let i, length = 5;
for(i = 0; i < length; i++) {
value.push(10);
}
console.log(value);
</script>
Producción:
[ 10, 10, 10, 10, 10 ]
Usando el método from(): Usamos el método array from() para llenar valores estáticos en una array en JavaScript. El método from() se usa para crear una nueva array que contiene una copia de una array o un objeto iterable. Usamos este método para convertir una array u objetos iterables en una array.
Sintaxis:
Array.from(object, mapFunction, thisValue)
Parámetros: El método from() acepta tres parámetros que son object, mapFunction y thisValue .
- objeto: esto suele ser necesario. Este parámetro contiene esa array u objeto iterable que convertimos en una array.
- mapFunction: Esto es opcional. Esto se usa para llamar a cada elemento de la array.
- este valor: esto es opcional. El valor de » esteValor » se usa como » esto » cuando llamamos a la función mapFunction .
Valor devuelto: el método from() devuelve una nueva array.
Ejemplo: Vemos un ejemplo de cómo usar el método from() para llenar valores estáticos en una array en JavaScript. En el siguiente ejemplo, usamos el método Array.from() para llenar la array con el valor 4. Creamos un objeto donde longitud = 6.
Javascript
<script>
let arr = Array.from({
length: 6
}, (value) => value = 4);
console.log(arr);
</script>
Producción:
[ 4, 4, 4, 4, 4, 4 ]
Uso del operador de extensión: Usamos el operador de extensión para llenar valores estáticos en una array en JavaScript. El operador de propagación se indica con tres puntos (…). El operador de propagación ayuda a copiar todos los elementos de una array existente a otra array. Veamos un ejemplo.
Ejemplo: En el siguiente ejemplo, usamos el operador de dispersión para llenar la array con 100 con la ayuda de la función de mapa.
Javascript
<script> let arr = [1, 3, 5, 8, 9, 10]; let arr2 = [...arr].map((value) => value = 100 ) ; console.log(arr2); </script>
Producción:
[ 100, 100, 100, 100, 100, 100 ]