"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Métodos de matriz Javascript de uso común.

Métodos de matriz Javascript de uso común.

Publicado el 2024-07-30
Navegar:512

Commonly used Javascript Array Methods.

En esta publicación, aprenderemos sobre los métodos de matriz de Javascript de uso común que utilizan la iteración y la función de devolución de llamada para lograr su funcionalidad.

iteración se refiere a la ejecución repetida de un conjunto de declaraciones o bloques de código, lo que nos permite realizar la misma operación varias veces.

En términos simples, una devolución de llamada es una definición de función que se pasa como argumento a otra función.

Para simplificar las cosas, nos centraremos en estos tres puntos.

  1. Cuándo se debe utilizar un método de matriz en particular.
  2. Lo que devuelve el método de matriz.
  3. ejemplo de código del método de matriz. **

Antes de continuar, comprendamos cómo se estructuran estos métodos de matriz.

// Método de matriz (devolución de llamada (la condición que queremos ejecutar en cada elemento de nuestra matriz))

Cada uno de estos métodos de matriz es una función que recibe una devolución de llamada como argumento, es en esta devolución de llamada que especificamos las condiciones que queremos ejecutar en cada uno de nuestros elementos de la matriz.

Utilizaremos esta matriz de objetos para nuestros ejemplos.

`datos constantes = [
{
"ID de usuario": 1,
"nombre de usuario": "Francisco",
"mensaje": "Oye, ¿cómo te va?",
"marca de tiempo": "2024-02-18T12:30:00Z",
"estado": "en línea",
"mensajeEnviado": 28,
"rol": "usuario",
"código de contraseña": "293087O7764"

},
{
"ID de usuario": 2,
"nombre de usuario": "Moisés",
"message": "No está mal, solo estoy trabajando en un proyecto.",
"marca de tiempo": "2024-02-18T12:35:00Z",
"estado": "ausente",
"mensajeEnviado": 74,
"rol": "usuario",
"código de acceso": "675147O2234"
},
{
"ID de usuario": 3,
"nombre de usuario": "Vicky",
"message": "¡Hola amigos! ¿Cuáles son los últimos chismes?",
"marca de tiempo": "2024-02-18T12:40:00Z",
"estado": "en línea",
"mensajeEnviado": 271,
"rol": "moderador",
"código de acceso": "76352O8069"

},
{
"ID de usuario": 4,
"nombre de usuario": "Junior",
"message": "No mucho, solo relajarse. ¿Y tú?",
"marca de tiempo": "2024-02-18T12:45:00Z",
"estado": "fuera de línea",
"mensajeEnviado": 125,
"rol": "administrador",
"código de acceso": "21876O3483"
}
]`

forEach: forEach se usa cuando queremos ejecutar una condición en todos los elementos de nuestra matriz. forEach devuelve indefinido.

función getMessageSent(usuarios){
let sumMessageSent = 0;
usuarios.forEach(función(usuario){
sumMessageSent = usuario.mensajeEnviado;
})
devolver sumaMensajeEnviado;
}
getMessageSent(datos) // salida: 498

reducir: reducir se usa para reducir una matriz a un valor único, por ejemplo, esta matriz [8, 7, 3] se puede reducir al número 18. un reductor devuelve un valor único.

La función reductora toma dos parámetros, primero el reductor (que está compuesto por el total y el actual) y segundo el valor inicial

El total: a esto se le llama popularmente acumulador. el total, como yo lo llamo, es el último valor calculado de la función reductora.

La corriente se refiere a un único elemento de la matriz. en nuestro caso tenemos cuatro elementos (actuales).

El valor inicial es el valor que asignamos al total en la primera llamada. simplemente diga que inicialValue es el valor predeterminado del total

const getMessageSent = (usuarios) => {
devolver usuarios.reduce((total, actual) => total = actual.messageSent, 0)
}

getMessageSent(datos) // salida: 498

filtro: Array.filter se usa cuando queremos recopilar solo elementos en la matriz que cumplen con una condición específica. array.filter devuelve una matriz.

const usuarios en línea = (usuarios) => {
devolver usuarios.filtro(usuario => usuario.status === "en línea")
}

usuarios en línea(datos) // salida: [objeto objeto]

find Array.find se usa cuando queremos obtener solo el primer elemento de la matriz que cumple con la condición definida dentro de la devolución de llamada. array.find devuelve el primer elemento NO en una matriz sino en el formato del elemento; en nuestro caso será un objeto o indefinido si no se encontró ninguna coincidencia.

const getUserRole = (usuarios) => {
devolver usuarios.find(usuario => usuario.role === "usuario")
}

getUserRole(data) // salida: {userId: 1, nombre de usuario: 'Francis', mensaje: "Oye, ¿cómo te va?", marca de tiempo: '2024-02-18T12:30:00Z', estado: ' en línea', …}

Observe cómo solo se devolvió el primer usuario que cumplió con la condición.

map Array.map se usa cuando queremos transformar los elementos de la matriz. array.map devuelve una serie de elementos transformados que satisfacen la condición en nuestra devolución de llamada.

const getUserNameAndPass = (usuarios) => {
devolver usuarios.map((usuario) => {
const userPassCode = usuario.passCode.slice(-4);
return${user.username} ${userPassCode.padStart(
usuario.passCode.length,
"★"
)};
});
};

getUserNameAndPass(data)// salida:['Francis ★★★★★★★7764', 'Moses ★★★★★★★2234', 'Vicky ★★★★★★8069', 'Junior ★ ★★★★★3483']

cada matriz.cada se usa cuando queremos verificar si todos los elementos de la matriz pasaron nuestra condición definida. array.every devuelve un valor booleano. Verdadero si todos los elementos cumplen la condición y falso si alguno de los elementos no cumple la condición.

const isOnline = data.every(usuario => dataItem.status === 'en línea')

console.log(isOnline) // salida:false

Some array.some se usa cuando queremos verificar que algunos de los elementos de la matriz pasan una condición dada. array.some devuelve un valor booleano. Verdadero si algunos de los elementos pasaron la condición y falso si todos los elementos pasan o fallan.

const isOnline = data.every(usuario => dataItem.status === 'en línea')

console.log(isOnline) // salida: verdadero

Estos son algunos de los métodos de matriz más utilizados.

Declaración de liberación Este artículo se reproduce en: https://dev.to/mosesedges/commonly-used-javascript-array-methods-2pmh?1 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3