en este artículo, exploraremos algunas formas diferentes de eliminar un elemento de una matriz en JavaScript. También le mostraré operaciones mutables e inmutables para que sepa cómo afectará su código a sus estructuras de datos y referencias.
eliminar elementos de matrices simplemente se reduce a encontrar el índice del elemento, o al menos tradicionalmente. Hoy en día-tenemos otras opciones, como encontrar elementos dentro de una matriz por su valor., Lo que significa que ahora hay múltiples enfoques para eliminar elementos.
esta sección corta se sumergirá en los índices de matriz y cómo llegan a ser, es una inmersión más profunda, pero si busca las soluciones, desplácese hacia la derecha.
comprender los índices de matrices
en JavaScript, una matriz es un tipo especial de objeto.
Este objeto de matriz tiene varias propiedades diferentes, algunas de las cuales son propiedades heredadas que existen en el prototipo, y algunas son propiedades que el objeto de matriz nos expone cuando «agregamos» cosas a una matriz.,
Download Descárgalo gratis!
ir más allá de la matriz ForEach. Obtenga confianza con métodos más avanzados como Reducir, encontrar, filtrar, todos, Algunos y mapear y comprenda completamente cómo administrar estructuras de datos JavaScript.,
- entender Completamente cómo manejar JavaScript Estructuras de Datos con inmutable operaciones
- 31 páginas de profundos sintaxis, ejemplos del mundo real, consejos y trucos
- Escribir más limpio y mejor estructurada, lógica de programación, dentro de 3 horas
como un bono extra, también te enviaremos algunas golosinas adicionales a través de algunos correos electrónicos adicionales.,
por ejemplo, cuando declaramos un nuevo array a través de , ese array contiene Array.prototype propiedades y métodos que nos permiten interactuar con nuestro array. La intención con esto era permitirnos realizar mutaciones y cambios en nuestros arrays con las funciones de utilidad nice «integradas».
Una utilidad? Sí, por ejemplo Array.prototipo.forEach () o Array.prototipo.empujar(). Ambos son métodos heredados en el objeto array. Dicho esto, ahora sabe cómo las matrices son en realidad solo objetos, y los objetos tienen métodos y propiedades.,
el objeto array es especial, es diferente. Sigue siendo un objeto, pero la forma en que «usamos» una matriz es accediendo a las propiedades que se refieren a un elemento de la matriz, a través de un índice. Un índice? Sí – 0, 1, 2, 3 y adelante! Los índices de matriz comienzan en cero.
con arrays esto significa que cuando necesitamos acceso a un valor, cualquiera que sea (un objeto/primitivo), se hace a través de una «búsqueda de índice». Pida el índice de su matriz y recuperará el elemento ubicado en ese índice.,
realmente, puede pensar en cada índice como un cajón en un archivador. Cada sorteo contiene algo único! Las matrices son virtuales, por lo que el tamaño del archivador depende de usted.
«¿Por qué me estás contando todo esto, Todd?»
¡porque ahora entiendes un array, sabes cómo trabajar con uno!
sin más preámbulos, primero exploremos cómo eliminar un elemento de una matriz en JavaScript Por índice y valor.
usando .indexOf() y .,splice () – mutable Pattern
para eliminar un elemento de la matriz a través de su índice, primero introduciremos el método Array.prototype.splice y luego investigaremos un mejor patrón utilizando Array.prototype.filter, una API más reciente.
Splice es un método mutable que le permite cambiar el contenido de una matriz. Esto podría ser eliminar o reemplazar «elementos», como se conocen los elementos del array.
Vamos a tener una matriz con un par de valores de cadena:
const drinks = ;Para eliminar un elemento a través de su índice, necesitamos encontrar el índice.,
Hay dos escenarios aquí, 1) conocemos el índice y 2) no conocemos el índice pero conocemos el valor.
primero, si conocemos el índice, a continuación he utilizado id para mantener nuestro índice de ejemplo, entonces simplemente requiere pasar ese índice a .splice()., El primer argumento de splice acepta la posición del índice para comenzar a eliminar elementos, y el segundo argumento establecido en 1 representa el final, lo que significa que solo queremos eliminar un elemento después de ese índice:
const drinks = ;const id = 2;const removedDrink = drinks.splice(id, 1); Si no conocemos el índice, entonces necesitamos encontrarlo. En este caso, el índice que nos gustaría eliminar contiene un valor de 'Coffee'.
podríamos usar Array.prototipo.,indexOf() para obtener el bien… «índice de» el elemento:
const drinks = ;const id = drinks.indexOf('Coffee'); // 2const removedDrink = drinks.splice(id, 1);Array.prototipo.indexOf () devolverá
-1si el elemento no se encuentra, por lo que recomendaría una comprobación de seguridad alrededor de esto.
Usted notará también he añadido const removedDrink. Esto es porque .splice() nos devuelve el elemento eliminado(s):
// console.log(removedDrink);// console.log(drinks);Pruebe el código de ejemplo siguiente:
Uso .,filter () – patrón inmutable
así que ahora entendemos un poco más acerca de mutable e inmutable, vamos a descubrir el patrón inmutable para «eliminar» un elemento de una matriz.
la mejor manera de pensar en esto es – en lugar de «eliminar» el elemento, estarás «creando» una nueva matriz que simplemente no incluye ese elemento. Así que debemos encontrarlo y omitirlo por completo.
Download Descárgalo gratis!
ir más allá de la matriz ForEach., Obtenga confianza con métodos más avanzados como Reducir, encontrar, filtrar, todos, Algunos y mapear y comprenda completamente cómo administrar estructuras de datos JavaScript.
- entender Completamente cómo manejar JavaScript Estructuras de Datos con inmutable operaciones
- 31 páginas de profundos sintaxis, ejemplos del mundo real, consejos y trucos
- Escribir más limpio y mejor estructurada, lógica de programación, dentro de 3 horas
como un bono extra, también te enviaremos algunas golosinas adicionales a través de algunos correos electrónicos adicionales.
esa última referencia a su matriz solo vivirá, y no mutaremos la matriz original. Vamos a obtener una copia nueva cada vez con nuestras modificaciones!
Así que, tomemos la misma matriz para iniciar con:
const drinks = ;de Nuevo, vamos a apuntar a eliminar 'Coffee'., Primero, podríamos suministrar un valor destinado a representar un valor de índice, y pasarlo a .filter():
const id = 2;const removedDrink = drinks;const filteredDrinks = drinks.filter((drink, index) => index !== id); Nota incluimos (drink, index) como los parámetros de la función y comparamos div id=»40de7db180″> a la constanteid – para que podamos encontrar la exacta que necesitamos ya que los índices coincidirán!,
También he incluido const removedDrink que ofrece una forma de» pedir»una referencia de la bebida que desea eliminar (de la misma manera que puede usar el valor devuelto de .splice()).,
si no tiene una referencia al índice, por ejemplo, nuestro id apunta a 'Coffee', entonces podemos usar .indexOf() (tenga en cuenta la adición de la variable idx para capturar el índice):
usando un patrón tradicional de bucle for
una versión alternativa, pero una versión muy válida que realmente es la versión imperativa de Array.prototype.filter ya que se comporta de la misma manera: construyendo una nueva matriz para nosotros y empujando nuevos elementos, dejándonos una matriz intacta drinks.,
en este ejemplo, estamos eliminando elementos de la matriz inicial devolviendo una nueva matriz de solo los elementos que queremos, usando drinks nos permite mirar y comparar el valor del elemento de la matriz (como 'Coffee' como una cadena en este caso):
Usando filteredDrinks entonces nos daría los elementos que nos gustaría. ¡Puedes ver cómo al aprender los principios de programación podemos aplicar diferentes patrones y tener una comprensión más profunda de lo que estamos haciendo!,
Este siguiente método que he incluido para mayor claridad sobre lo que no se debe hacer al eliminar elementos de una matriz en JavaScript, a pesar de que es perfectamente «válido»
evitando la palabra clave «eliminar»
Cuando veo la palabra clavedelete en las bases de código, me estremezco un poco – es una palabra clave poderosa que debe usarse responsablemente. Dicho esto, si aprendemos lo que hace la palabra clave delete, entonces podemos tomar decisiones más informadas.,
Este es un ejemplo que puede ver en la web:
notará en la salida console.log que elimina completamente la clave. Incluí esto para mayor claridad, siempre es genial ver y entender qué efectos secundarios tienen sus operaciones.
lo que es más confuso es deleteno afecta a la propiedad .length – vea cómo todavía dice length: 4?! Otra razón para evitar usar delete.,
con eso en mente – es hora de concluir nuestro post sobre cómo eliminar un elemento, o «elemento», de una matriz en JavaScript con las herramientas adecuadas. Hemos entendido diferentes enfoques y paradigmas y tenemos algo más de conocimiento para llevar al mañana. Gracias por leer!
si te gusta aprender y tienes un deseo ardiente de subir de nivel tus habilidades de JavaScript? Enseño cursos de JavaScript aquí en Ultimate Courses que llevarán tus habilidades de JavaScript al máximo – ¡te garantizo que no te decepcionará!
Download Descárgalo gratis!,
ir más allá de la matriz ForEach. Obtenga confianza con métodos más avanzados como Reducir, encontrar, filtrar, todos, Algunos y mapear y comprenda completamente cómo administrar estructuras de datos JavaScript.
- entender Completamente cómo manejar JavaScript Estructuras de Datos con inmutable operaciones
- 31 páginas de profundos sintaxis, ejemplos del mundo real, consejos y trucos
- Escribir más limpio y mejor estructurada, lógica de programación, dentro de 3 horas
como un bono extra, también te enviaremos algunas golosinas adicionales a través de algunos correos electrónicos adicionales.
échales un vistazo y disfruta – ¡gracias por leer!