logo

Eliminación de un elemento de una matriz en JavaScript, con ejemplos

Hay varias formas de eliminar un elemento de una matriz en Javascript. Cubrimos todos los métodos que se pueden usar en este tutorial.

JavaScript es un lenguaje de programación flexible que se ejecuta prácticamente en todas partes. Puede ejecutar aplicaciones de JavaScript en navegadores web, crear aplicaciones de línea de comandos que puede ejecutar en la terminal, las aplicaciones móviles se pueden crear utilizando plataformas como Cordova y los procesos del servidor se pueden escribir en plataformas como Node.js. Naturalmente, Linux es el entorno elegido por muchos desarrolladores de JavaScript y es perfecto para herramientas de aprendizaje como Node.js, así como para hospedarlas para los usuarios finales una vez completadas.

Matrices de JavaScript

Una matriz es un tipo de variable de JavaScript que puede contener otras variables, o referencias a otras variables, en una lista en una posición determinada. Las matrices forman la columna vertebral de la mayoría de las aplicaciones:pueden contener elementos de la lista de tareas pendientes o una referencia a cada jugador de un equipo en un juego de varios jugadores. Antes de leer este artículo, recomiendo leer nuestro artículo sobre cómo verificar si existe un valor en una matriz.

Eliminar uno o más elementos de una matriz mediante splice() Método

La siguiente es una matriz que contiene una lista de colores. Podemos eliminar uno o más elementos secuenciales con splice() método. El método de empalme acepta 2 opciones al eliminar:el índice inicial y final (posición). Si son iguales, se eliminará un solo elemento:

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
var removed = colours.splice(3, 3); // Remove item at index 3 
console.log(colours); // Returns ["red", "green", "blue", "orange", "pink"] 
console.log(removed); // Returns ["purple"]

Tenga en cuenta que:

  • Recuerde que los índices se cuentan a partir de 0, no de 1:por lo que "rojo" está en el índice 0, "azul" está en el índice 3
  • Nos referimos al elemento y valor – el elemento es el elemento de la matriz. Tiene un índice (posición) y un valor. Puede tener varios elementos con el mismo valor en diferentes posiciones
  • El console.log() El método se utiliza para enviar el valor del resultado a la consola para que pueda verse
  • Hemos añadido un comentario:texto después de // no será interpretado por JavaScript para que pueda dejar notas en el código
  • empalme() ha devuelto una matriz que contiene los valores eliminados, que se asigna a la variable llamada eliminado
  • Los colores matriz ya no contiene un elemento con el valor "púrpura"
  • No tienes para asignar los valores eliminados a una variable, simplemente puede llamar a array.splice() sin asignarlo a nada para simplemente eliminar y descartar los elementos
  • ¡Cuidado! Cuando se eliminan elementos de una matriz mediante splice() , los índices de los elementos restantes cambiarán ya que sus posiciones habrán cambiado.

Eliminar varios elementos secuenciales con splice()

Para eliminar varios elementos, proporcione un índice inicial y un índice final:

var colours = ["red", "green", "blue", "purple", "orange", "pink"];
var removed = colours.splice(3, 5);// Remove items at indexes 3 to 5
console.log(colours); // Returns ["red", "green", "blue"]
console.log(removed); // Returns  ["purple", "orange", "pink"]

Eliminar el último elemento de una matriz usando pop() Método

Para eliminar el último elemento de una matriz, llame a las matrices pop() método. El pop() devolverá el elemento eliminado para que pueda asignarse opcionalmente a otra variable:

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
var removed = colours.pop(); 
console.log(colours); // Returns ["red", "green", "blue", "purple", "orange"] 
console.log(removed); // Returns "pink"
  • A diferencia de splice() , pop() devuelve el valor del elemento eliminado por sí mismo, no dentro de una matriz
  • Si la matriz estaba vacía, un valor de indefinido será devuelto por pop() ya que no se eliminó ningún valor

Eliminar el primer elemento de una matriz usando shift() Método

El cambio() El método funciona más o menos de la misma manera que pop() método, excepto que elimina y devuelve el primer elemento de la matriz:

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
var removed = colours.pop(); 
console.log(colours); // Returns ["green", "blue", "purple", "orange", "pink"]
console.log(removed); // Returns "red"
  • ¡Cuidado (otra vez)! Cuando se elimina un elemento de una matriz con shift() , los índices de los elementos restantes cambiarán ya que sus posiciones habrán cambiado.

Eliminar elementos de una matriz según su valor mediante filter()

Si desea eliminar elementos de una matriz según un conjunto de condiciones, puede usar el filter() método. El filtro() El método acepta una función que se usará para probar cada elemento de la matriz. Por ejemplo, es posible que desee eliminar todos los números impares de una matriz o eliminar todas las cadenas de una determinada longitud de una matriz:

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
colours = colours.filter(word => word.length <= 4); // Removes all strings with more than 4 letters 
console.log(colours); // Returns ["red", "blue", "pink"]
  • El filtro() método no actualizamos el valor de la matriz, por lo que reasignamos el valor de la matriz de colores al resultado de su función de filtro con colours = – tenga en cuenta que var no se vuelve a usar, porque ya definimos la variable en la línea anterior; solo estamos actualizando su valor.
  • word => word.length <= 4 es una función de JavaScript (muy corta) para probar si la palabra tiene más de 4 caracteres. Está pasando cada elemento de la matriz como una variable llamada palabra , y luego verifica si la longitud de esa cadena es igual o menor que 4.
  • Si el valor del elemento tiene 4 o menos caracteres, la comparación devuelve VERDADERO y se mantiene el elemento de la matriz. De lo contrario, se descarta.
    • ¡Cuidado (otra vez, otra vez)! Cuando se elimina un elemento de una matriz usando filter() , los índices de los elementos restantes cambiarán ya que sus posiciones habrán cambiado.

Eliminar un solo elemento de una matriz usando delete

Si desea eliminar un elemento de una matriz, pero no desea que cambien los índices de otros elementos use el eliminar Operador JavaScript

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
delete colours[3]; 
console.log(colours); // Returns ["red", "green", "purple", "orange", "pink"]
  • La matriz devuelta arriba tiene el mismo aspecto que si splice() se usaron, pero no lo es!
  • En el ejemplo donde splice() se utilizó, el índice del elemento con valor "púrpura" es 2
  • En el ejemplo anterior donde eliminar se utilizó, el índice del elemento con valor "púrpura" sigue siendo 3, como estaba en la matriz original. Se ha dejado un espacio en la matriz donde antes estaba el valor "azul"

Eliminar varios valores del final de una matriz alterando su longitud

Un atajo para eliminar varios elementos del final de una matriz es cambiar la longitud propiedad de una matriz:

var colours = ["red", "green", "blue", "purple", "orange", "pink"]; 
colours.length = 3; 
console.log(colours); // Returns ["red", "green", "blue]
  • La matriz ahora solo contiene 3 elementos, como su longitud se estableció en 3
  • Estos elementos están en el índice 0, 1 y 2:establecemos la longitud usando el conteo total, ¡pero los índices aún comienzan en 0!

Conclusión

Eliminar un elemento de una matriz es una de las funciones básicas de JavaScript que usará día a día mientras desarrolla aplicaciones y administra los datos que recopila y genera. Hay varias formas de hacerlo, la que elija usar dependerá de cómo se pretende que se vea la matriz resultante. Para obtener más información sobre matrices y funciones de JavaScript, consulte otros artículos de JavaScript.