Cómo vaciar un array en JavaScript

Kirill Ibrahim 12 octubre 2023
  1. Establecer el array en la nueva array de tamaño cero
  2. Usa la propiedad length para vaciar un array en JavaScript
  3. Usar el método splice() para vaciar un array en JavaScript
  4. Usa el método pop() para vaciar un array en JavaScript
  5. Modificar los métodos nativos para vaciar un array en JavaScript
Cómo vaciar un array en JavaScript

del array es una colección de artículos almacenados en un conveniente conjunto indexado. ¿Qué pasa si queremos vaciar un array que contiene múltiples elementos?

Este tutorial introduce diferentes métodos de cómo vaciar un array en JavaScript.

Establecer el array en la nueva array de tamaño cero

Es la forma más rápida. Esto hará que el array se convierta en una nueva array vacía.

let Arr = [1, 2, 3, 4];
Arr = [];

Es sencillo si no tienes ninguna referencia de otros lugares a el array original. Estas referencias no se actualizarán si lo haces, y esos lugares seguirán usando el array antigua. Significa que las referencias al contenido del array anterior se mantienen en la memoria, lo que provoca fugas de memoria.

Sólo usa esto si haces referencia al array por su variable original Arr.

El siguiente código de ejemplo muestra el problema que puedes encontrar al usar este método:

let Arr1 = [1, 2, 3, 4, 5, 6];
let Arr2 = Arr1;
Arr1 = [];
console.log({Arr1, Arr2});

Resultado:

{
  Arr1: [],
  Arr2: [1, 2, 3, 4, 5, 6]
}

Usa la propiedad length para vaciar un array en JavaScript

Borra el array existente estableciendo su longitud en 0. La propiedad de longitud de un array es una propiedad de lectura/escritura, por lo que también funciona cuando se utiliza el modo estricto en ECMAScript 5.

Arr1.length = 0

Este modo tiene una ventaja porque borra todo en el array, lo que afecta a otras referencias. Si tenemos dos referencias a la misma array, borramos el contenido de la misma usando Arr1.length = 0, ambas referencias apuntarán ahora a la misma array vacía.

Ejemplo:

let foo1 = [1, 2, 3];
let bar1 = [1, 2, 3];
let foo2 = foo1;
let bar2 = bar1;
foo1 = [];
bar1.length = 0;
console.log({foo1, bar1, foo2, bar2});

Resultado:

{
  bar1: [],
  bar2: [circular object Array],
  foo1: [],
  foo2: [1, 2, 3]
}

Usar el método splice() para vaciar un array en JavaScript

El método array.splice() es un método incorporado en JavaScript, que se usa para añadir/eliminar elementos a/de un array y devuelve los elementos eliminados.

let Arr1 = ['Tomato', 'Letcuce', 'Spinash', 'Cucumber'];
Arr1.splice(2, 0, 'Lemon', 'Kiwi')
console.log(Arr1);

Resultado:

["Tomato", "Letcuce", "Lemon", "Kiwi", "Spinash", "Cucumber"]

Para vaciar el array:

Arr1.splice(0, Arr1.length);
console.log(Arr1);

Resultado:

[]

Elimina todos los elementos del array y limpiará el array original.

Usa el método pop() para vaciar un array en JavaScript

El método pop() quita el último elemento de un array y devuelve ese elemento. Y cambiará la longitud del array.

let vegetables = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(vegetables.pop());

console.log(vegetables);

Resultado:

tomato
(4) ["broccoli", "cauliflower", "cabbage", "kale"]

Hacemos un bucle en el array, ponemos el elemento del array en cada bucle, y finalmente obtenemos el array vacía.

let Arr1 = [1, 2, 3, 4, 5];
for (let i = Arr1.length; i > 0; i--) {
  Arr1.pop();
}
console.log(Arr1);

Resultado:

[]

Esta solución no es muy concisa, y también es la solución más lenta.

Modificar los métodos nativos para vaciar un array en JavaScript

La última técnica de esta lista puede utilizarse con todos los métodos anteriores; JavaScript nos permite modificar y utilizar métodos nativos para ampliar sus capacidades. Podemos usar la función Array.proptotype.remove para modificar el proceso.

En el siguiente ejemplo, usamos el método splice(), que utilizamos en el ejemplo anterior. Ahora, podemos usar el proceso llamándolo como la función arr.remove().

var arr = [1, 2, 3, 4, 5, 6];

Array.prototype.remove = Array.prototype.remove || function() {
  this.splice(0, this.length);
};

arr.remove();
console.log(arr);

Resultado:

[]

Artículo relacionado - JavaScript Array