ETZADEV
Métodos de acceso y manipulación de elementos en arrays
JavascriptJohan García Trejo20 dic 2024Comentarios (0)
Compartir

Métodos de acceso y manipulación de elementos en arrays

Los métodos de arrays son funciones que vienen integradas y hacen más fácil manipular y gestionar los arrays. Con estos métodos, puedes hacer muchas cosas, como buscar, transformar e iterar sobre los elementos. A continuación, te explico varios métodos de arrays, centrándome en cómo acceder y manipular los elementos de un array.

Estos son los métodos que permiten acceder y manipular los elementos de un array, y se dividen en:

Acceso Directo a Elementos

Array.prototype.at()

El método at() recibe un valor numérico entero y devuelve el ítem en esa posición, permitiendo el acceso a elementos positivos y negativos.

Sintaxis

arr.at(index);

Parámetros que recibe

  • index: Un entero que representa la posición del elemento que se quiere obtener. Puede ser negativo para contar desde el final del array.

Valor que retorna

Retorna el elemento del array en la posición especificada. Si el índice está fuera de los límites del array, retorna undefined.

Ejemplo

snippet.js
1let array = [10, 20, 30, 40, 50];
2console.log(array.at(2)); // Salida: 30
3console.log(array.at(-1)); // Salida: 50

En este ejemplo:

  • El array es [10, 20, 30, 40, 50].
  • array.at(2) devuelve el elemento en la posición 2, que es 30.
  • array.at(-1) devuelve el último elemento del array, que es 50.

Notas Adicionales

  • at() es útil para acceder a elementos desde el final del array sin necesidad de calcular la longitud del array.

Acceso a Índices y Valores

Array.prototype.entries()

El método entries() devuelve un nuevo objeto Array Iterator que contiene los pares clave/valor para cada índice en el array.

Sintaxis

arr.entries();

Parámetros que recibe

Este método no recibe parámetros.

Valor que retorna

Retorna un nuevo objeto Array Iterator que contiene los pares clave/valor para cada índice en el array.

Ejemplo

snippet.js
1let array = ["a", "b", "c"];
2let iterator = array.entries();
3
4for (let entry of iterator) {
5 console.log(entry);
6}
7// Salida:
8// [0, 'a']
9// [1, 'b']
10// [2, 'c']

En este ejemplo:

  • El array es
    snippet.txt
    1['a', 'b', 'c']
    .
  • array.entries() devuelve un iterador que contiene los pares clave/valor
    snippet.txt
    1[0, 'a']
    ,
    snippet.txt
    1[1, 'b']
    ,
    snippet.txt
    1[2, 'c']
    .

Notas Adicionales

  • Los valores devueltos por el iterador pueden ser utilizados en bucles for...of o desestructurados directamente.

Array.prototype.keys()

El método keys() devuelve un nuevo Array Iterator que contiene las claves para cada índice en el array.

Sintaxis

arr.keys();

Parámetros que recibe

Este método no recibe parámetros.

Valor que retorna

Retorna un nuevo objeto Array Iterator que contiene las claves para cada índice en el array.

Ejemplo

snippet.js
1let array = ["a", "b", "c"];
2let iterator = array.keys();
3
4for (let key of iterator) {
5 console.log(key);
6}
7// Salida:
8// 0
9// 1
10// 2

En este ejemplo:

  • El array es
    snippet.txt
    1['a', 'b', 'c']
    .
  • array.keys() devuelve un iterador que contiene las claves 0, 1, 2.

Notas Adicionales

  • keys() es útil cuando solo se necesitan los índices del array, no sus valores.

Array.prototype.values()

El método values() devuelve un nuevo Array Iterator que contiene los valores para cada índice en el array.

Sintaxis

arr.values();

Parámetros que recibe

Este método no recibe parámetros.

Valor que retorna

Retorna un nuevo objeto Array Iterator que contiene los valores para cada índice en el array.

Ejemplo

snippet.js
1let array = ["a", "b", "c"];
2let iterator = array.values();
3
4for (let value of iterator) {
5 console.log(value);
6}
7// Salida:
8// 'a'
9// 'b'
10// 'c'

En este ejemplo:

  • El array es
    snippet.txt
    1['a', 'b', 'c']
    .
  • array.values() devuelve un iterador que contiene los valores
    snippet.txt
    1'a'
    ,
    snippet.txt
    1'b'
    ,
    snippet.txt
    1'c'
    .

Notas Adicionales

  • values() es útil cuando se necesitan los valores del array en una secuencia iterable.

Búsqueda de Elementos

Array.prototype.find()

El método find() devuelve el primer elemento del array que cumpla con la condición implementada por la función proporcionada.

Sintaxis

snippet.js
1arr.find(callback(element[, index[, array]])[, thisArg]);

Parámetros que recibe

  • callback(element, index, array): Función que se ejecuta para cada elemento del array. Recibe tres argumentos:
    • element: El elemento actual que se está procesando en el array.
    • index (opcional): El índice del elemento actual que se está procesando en el array.
    • array (opcional): El array sobre el cual se está llamando find().
  • thisArg (opcional): Valor que se usa como this al ejecutar el callback.

Valor que retorna

Retorna el primer elemento que cumple con la condición especificada en el callback. Si no se encuentra ningún elemento, retorna undefined.

Ejemplo

snippet.js
1let array = [5, 12, 8, 130, 44];
2let found = array.find((element) => element > 10);
3console.log(found); // Salida: 12

En este ejemplo:

  • El array es [5, 12, 8, 130, 44].
  • array.find(element => element > 10) devuelve el primer elemento mayor a 10, que es 12.

Notas Adicionales

  • find() no modifica el array original.
  • Es útil para encontrar el primer elemento que cumpla con ciertos criterios.

Array.prototype.findIndex()

El método findIndex() devuelve el índice del primer elemento del array que cumpla con la condición implementada por la función proporcionada.

Sintaxis

snippet.js
1arr.findIndex(callback(element[, index[, array]])[, thisArg]);

Parámetros que recibe

  • callback(element, index, array): Función que se ejecuta para cada elemento del array. Recibe tres argumentos:
    • element: El elemento actual que se está procesando en el array.
    • index (opcional): El índice del elemento actual que se está procesando en el array.
    • array (opcional): El array sobre el cual se está llamando findIndex().
  • thisArg (opcional): Valor que se usa como this al ejecutar el callback.

Valor que retorna

Retorna el índice del primer elemento que cumple con la condición especificada en el callback. Si no se encuentra ningún elemento, retorna -1.

Ejemplo

snippet.js
1let array = [5, 12, 8, 130, 44];
2let index = array.findIndex((element) => element > 10);
3console.log(index); // Salida: 1

En este ejemplo:

  • El array es [5, 12, 8, 130, 44].
  • array.findIndex(element => element > 10) devuelve el índice del primer elemento mayor a 10, que es 1.

Notas Adicionales

  • findIndex() no modifica el array original.
  • Es útil para encontrar la posición del primer elemento que cumpla con ciertos criterios.

Array.prototype.findLast()

El método findLast() devuelve el último elemento del array que cumpla con la condición implementada por la función proporcionada.

Sintaxis

snippet.js
1arr.findLast(callback(element[, index[, array]])[, thisArg]);

Parámetros que recibe

  • callback(element, index, array): Función que se ejecuta para cada elemento del array. Recibe tres argumentos:
    • element: El elemento actual que se está procesando en el array.
    • index (opcional): El índice del elemento actual que se está procesando en el array.
    • array (opcional): El array sobre el cual se está llamando findLast().
  • thisArg (opcional): Valor que se usa como this al ejecutar el callback.

Valor que retorna

Retorna el último elemento que cumple con la condición especificada en el callback. Si no se encuentra ningún elemento, retorna undefined.

Ejemplo

snippet.js
1let array = [5, 12, 8, 130, 44];
2let found = array.findLast((element) => element > 10);
3console.log(found); // Salida: 44

En este ejemplo:

  • El array es [5, 12, 8, 130, 44].
  • array.findLast(element => element > 10) devuelve el último elemento mayor a 10, que es 44.

Notas Adicionales

  • findLast() no modifica el array original.
  • Es útil para encontrar el último elemento que cumpla con ciertos criterios.

Array.prototype.findLastIndex()

El método findLastIndex() devuelve el índice del último elemento del array que cumpla con la condición implementada por la función proporcionada.

Sintaxis

snippet.js
1arr.findLastIndex(callback(element[, index[, array]])[, thisArg]);

Parámetros que recibe

  • callback(element, index, array): Función que se ejecuta para cada elemento del array. Recibe tres argumentos:
    • element: El elemento actual que se está procesando en el array.
    • index (opcional): El índice del elemento actual que se está procesando en el array.
    • array (opcional): El array sobre el cual se está llamando findLastIndex().
  • thisArg (opcional): Valor que se usa como this al ejecutar el callback.

Valor que retorna

Retorna el índice del último elemento que cumple con la condición especificada en el callback. Si no se encuentra ningún elemento, retorna -1.

Ejemplo

snippet.js
1let array = [5, 12, 8, 130, 44];
2let index = array.findLastIndex((element) => element > 10);
3console.log(index); // Salida: 4

En este ejemplo:

  • El array es [5, 12, 8, 130, 44].
  • array.findLastIndex(element => element > 10) devuelve el índice del último elemento mayor a 10, que es 4.

Notas Adicionales

  • findLastIndex() no modifica el array original.
  • Es útil para encontrar la posición del último elemento que cumpla con ciertos criterios.

Array.prototype.includes()

El método includes() determina si un array contiene un elemento específico, devolviendo true o false según corresponda.

Sintaxis

arr.includes(valueToFind[, fromIndex]);

Parámetros que recibe

  • valueToFind: El elemento a buscar en el array.
  • fromIndex (opcional): La posición en el array en la cual se debe comenzar a buscar. El valor por defecto es 0.

Valor que retorna

Retorna true si el array contiene el elemento especificado, de lo contrario retorna false.

Ejemplo

snippet.js
1let array = [1, 2, 3];
2console.log(array.includes(2)); // Salida: true
3console.log(array.includes(4)); // Salida: false

En este ejemplo:

  • El array es [1, 2, 3].
  • array.includes(2) devuelve true porque el array contiene el valor 2.
  • array.includes(4) devuelve false porque el array no contiene el valor 4.

Notas Adicionales

  • includes() distingue entre mayúsculas y minúsculas.
  • Es útil para verificar la existencia de un elemento en el array de manera sencilla.

Array.prototype.indexOf()

El método indexOf() devuelve el primer índice en el que se puede encontrar un elemento dado en el array, o -1 si el elemento no está presente.

Sintaxis

arr.indexOf(searchElement[, fromIndex]);

Parámetros que recibe

  • searchElement: El elemento a buscar en el array.
  • fromIndex (opcional): La posición en el array desde la cual se comienza la búsqueda. El valor por defecto es 0.

Valor que retorna

Retorna el primer índice del elemento especificado en el array, o -1 si el elemento no se encuentra.

Ejemplo

snippet.js
1let array = [2, 9, 9];
2console.log(array.indexOf(2)); // Salida: 0
3console.log(array.indexOf(9)); // Salida: 1
4console.log(array.indexOf(7)); // Salida: -1

En este ejemplo:

  • El array es [2, 9, 9].
  • array.indexOf(2) devuelve el índice 0 porque el valor 2 está en la posición 0.
  • array.indexOf(9) devuelve el índice 1 porque la primera aparición del valor 9 está en la posición 1.
  • array.indexOf(7) devuelve -1 porque el valor 7 no está en el array.

Notas Adicionales

  • indexOf() compara los elementos usando la igualdad estricta (===).
  • Es útil para encontrar la posición de un elemento en el array.

Array.prototype.lastIndexOf()

El método lastIndexOf() devuelve el último índice en el que un cierto elemento puede encontrarse en el array, o -1 si el elemento no está presente. El array es recorrido de atrás hacia adelante, comenzando por el índice dado.

Sintaxis

arr.lastIndexOf(searchElement[, fromIndex]);

Parámetros que recibe

  • searchElement: El elemento a buscar en el array.
  • fromIndex (opcional): La posición en el array desde la cual se comienza la búsqueda hacia atrás. El valor por defecto es el índice de la última posición del array.

Valor que retorna

Retorna el último índice en el que el elemento especificado es encontrado en el array, o -1 si el elemento no se encuentra.

Ejemplo

snippet.js
1let array = [2, 5, 9, 2];
2console.log(array.lastIndexOf(2)); // Salida: 3
3console.log(array.lastIndexOf(7)); // Salida: -1
4console.log(array.lastIndexOf(2, 2)); // Salida: 0

En este ejemplo:

  • El array es [2, 5, 9, 2].
  • array.lastIndexOf(2) devuelve el índice 3 porque el último 2 está en la posición 3.
  • array.lastIndexOf(7) devuelve -1 porque el valor 7 no está en el array.
  • array.lastIndexOf(2, 2) devuelve el índice 0 porque busca el 2 desde la posición 2 hacia atrás, encontrando el primer 2 en la posición 0.

Notas Adicionales

  • lastIndexOf() compara los elementos usando la igualdad estricta (===).
  • Es útil para encontrar la última posición de un elemento en el array, especialmente en casos donde el array puede contener elementos duplicados.

Usando estos métodos, puedes realizar búsquedas detalladas y gestionar tus datos de manera más eficiente, haciendo que tu código sea más fuerte y versátil.

¡No te pierdas mi próxima publicación! Ahí te voy a explicar los métodos de manipulación de arrays. ¡Nos vemos!

Tags:Javascript
Comentarios
Deja tu comentario
comentario.formNuevo

* Tu correo electrónico permanecerá privado. Los campos requeridos están señalados con *