Arreglos 방법: Array.every 및 Array.some

Para comenzar, un muy pequeño repaso a que es (a Grosso modo) un arreglo:

Los arreglos, son una sencilla estructura de datos basada en indices, que podemos crear al escribir [], son parte esencial en cualquier aplicación ya que casi todo tipo de datos que queramos mostrar en la interfaz será Representativeado por una colección.

En general un arreglo ( Array ) es는 여러 가지 요소와 다양한 요소를 공유할 수 있는 변수를 나타냅니다.

const array = [1,2,3,'cuatro', { number: 5} ]

console.log(array[3]); // "cuatro"

En este pequeño ejemplo se muestra que un arreglo puede almacenar cualquier tipo de elementos "al mismo tiempo". Y en la siguiente linea se muestra como acceder a un elemento del arreglo utilizando un indice numérico.

El objeto Arreglo tiene varios métodos que permiten manipular su contenido. Estos métodos son parte del prototipo por lo que puedes acceder a ellos desde cualquier instancia.

Algunos de estos métodos son "inmutables", estos métodos reciben como argumento una función tipo "callback"que el método ejecutará cada vez que itera sobre los elementos del arreglo. En esta función callback definimos lo que queremos lograr pero no indicamos el como lograrlo, cada método simplemente aplica nuestra logica, es decir son métodos declarativos.

Array.some 및 Array.every

Estos métodos son parecidos pero opuestos, ambos retornan un valor booleano true o false si se cumple o no la condición definida.

Definamos un arreglo con que trabajar:

const users = [
  {
    id: 'efe5f844-788f-42e3-8706-ae7312958576',
    username: 'Justin Elliott',
    twitter: '@justinElliot',
    email: '[email protected]'
  },
  {
    id: '309b8b06-b5f5-42a2-9808-8bda5da90fb9',
    username: 'Paul C Wiggins',
    twitter: '@RealPaul',
    email: '[email protected]'
  },
  {
    id: '47b793e4-d1cd-4ff7-8f85-37c5c3268fc0',
    username: 'Margaret J Pitre',
    twitter: '@mpitre',
    email: '[email protected]'
  },
  {
    id: 'a34b752c-2ac7-420e-ab0b-8ccf8d18deb6',
    username: 'Sharon J Jenkins',
    twitter: null,
    email: '[email protected]'
  }
]

Este es un sencillo arreglo de objetos en donde cada objeto contiene 4 propiedades. Sobre este arreglo utilizaremos Array.some y Array.every para comprobar ciertas propiedades.

Array.some retornará true si al menos uno de los elementos del arreglo "cumple"la prueba.

Array.every retorna true sólo cuando todos los elementos del arreglo "cumplen"con la función de prueba.

어레이.썸

/***
 * Array.some
 */
function isUsernameJustin(item) {
  return item.username.includes('Justin')
}

const isThereAnyJustin = users.some(isUsernameJustin)

/* ↓ ↓ ↓ ↓ ↓ ↓ Forma abreviada ↓ ↓ ↓ ↓ ↓ ↓ */

const isThereAnyJustin2 = users.some(item => item.username.includes('Justin'))

console.log({ isThereAnyJustin, isThereAnyJustin2 }) // true

Este método recibe una función callback, cuyo único argumento hacer reference a un item del arreglo que esta ciendo iterado.

En este caso set utilizó la función isUsernameJustin que revisa si la propiedad username del item incluye el string Justin .

También se puede escribir de forma "abreviada" usando functiones flecha (arrow functions).

Puedes leer más sobre funciones flecha, cómo funcionan y cómo usarlas en este artículo escrito para Escuela Frontend

La 변수isThereAnyJustin será verdadera si alguno de los item tienen el stringJustin .

어레이.에브리

En el segundo ejemplo podemos ver dos usos de Array.every a modo de verificación de que todos los elementos del arreglo tienen cierto valor.

/**
 * Array.every
 */

function haveTwitter(item) {
  return item.twitter
}

const doAllHaveTwitter = users.every(haveTwitter)

/* ↓ ↓ ↓ ↓ ↓ ↓ Forma abreviada ↓ ↓ ↓ ↓ ↓ ↓ */

const doAllHaveTwitter2 = users.every(item => item.twitter)

console.log({ doAllHaveTwitter, doAllHaveTwitter2 })

function haveUsername(item) {
  return item.username
}
const doAllHaveUsername = users.every(haveUsername)

/* ↓ ↓ ↓ ↓ ↓ ↓ Forma abreviada ↓ ↓ ↓ ↓ ↓ ↓ */

const doAllHaveUsername2 = users.every(item => item.username)

console.log({ doAllHaveUsername, doAllHaveUsername2 })

Como siempre, peudes encontrar un demo de este código en el playground.


✉️ Únete a Micro-bytes 🐦 Sígueme en ❤️ Apoya mi trabajo