Manipulación de Arrays en JavaScript 😎Part 2

rogerdimonte

Roger

Posted on June 11, 2022

Manipulación de Arrays en JavaScript 😎Part 2

👋 Hola!, el día de hoy continuaremos con la segunda parte de la sección de Manipulación de Arrays en JavaScript, si no has leído la primer parte puedes dar click aqui. En los cuales vimos los métodos de:

Así que ahora en esta sección veremos los métodos de:

Indicé

Some

Ahora veremos el metodo de some este método nos permite verificar si algún elemento de un arreglo cumple con una condición.
Este evalúa si almenos uno de los elementos del array cumple con la condición, si no cumple con ninguno devuelve false.

Como puedes ver este metodo a diferencia de map, filter y reduce este no devuelve un nuevo arreglo, sino que nos devuelve un boolen ósea true o false .

Por ejemplo:

const num = [1, 52, 33, 12, 65, 66, 37, 81, 99, 107]

const newNum = num.some(function(value) {
    return value < 5
})

console.log(newNum)

// Output

true
Enter fullscreen mode Exit fullscreen mode

Nos da true debido a que al menos uno de los elementos del array cumple con la condición, en este caso seria el de el numero 1 que es menor a 5. Aunque todos los demás elementos no cumplen con la condición por este 1 nos devuelve true.

Ahora pasemos al código:

Vamos a hacer un arreglo de alumnos, los cuales tendrán las propiedades de nombre, edad, promedio y materia, ejemplo:

const alumnos = [
  {
    nombre: "Juan",
    edad: 20,
    promedio: 2,
    materia: "Fisica",
  },
  {
    nombre: "Esteban",
    edad: 20,
    promedio: 6,
    materia: "Programacion",
  },
  {
    nombre: "Jorge",
    edad: 20,
    promedio: 8,
    materia: "Algebra",
  },
  {
    nombre: "Pedro",
    edad: 18,
    promedio: 5,
    materia: "Matematicas",
  },
  {
    nombre: "Maria",
    edad: 19,
    promedio: 7,
    materia: "Ingles",
  },
  {
    nombre: "Ana",
    edad: 21,
    promedio: 9,
    materia: "Geografia",
  },
  {
    nombre: "Juan",
    edad: 20,
    promedio: 8,
    materia: "Matematicas",
  },

]
Enter fullscreen mode Exit fullscreen mode

Ahora lo que queremos, es saber si existen estudiantes que han reprobado alguna materia (promedio < 6), entonces en lugar de andar comprobando uno por uno vamos a utilizar el método de some de la siguiente forma:

const res = alumnos.some(alumno => alumno.promedio < 6)

console.log('Alumos reprobado? :',res)
Enter fullscreen mode Exit fullscreen mode

Y en nuestra terminal veremos los siguiente:

Alumos reprobado? : true
Enter fullscreen mode Exit fullscreen mode

Como pudes ver no nos retorna un arreglo con los alumnos que han reprobado, si no solo nos dice si existe alguno o no. Como lo vimos anteriormente some solo retorno true o false y no un arreglo con los alumnos que han reprobado.

Ahora si nosotros cambiamos las calificaciones para que todos aprueben nos devuelve false y nos muestra los siguientes:

Alumos reprobado? : false
Enter fullscreen mode Exit fullscreen mode

Porque ninguno cumplió con las condiciones.

Como resumen, lo que hace some es comprobar en cada elemento si existe la condición que nosotros le entregamos, si es asi nos devuelve true y si no es así nos devuelve false.

Ahora como reto para ti es:

  • Crear un arreglo de objetos que contenga los siguientes datos: nombre, edad, promedio y materia. Y debes comprobar si alguno de los alumnos ha reprobado, si ha reprobado, debes retornar un mensaje que diga El alumno {nombre} ha reprobado {materia}. (Recuerda que puedes utilizar métodos que vimos en las clases anteriores)

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indice 👆

Every

En esta parte vamos a ver el método de every que se puede decir que es lo contrario al método some, en este caso every nos permite verificar si todos los elementos de un arreglo cumplen con una condición.

Como su traducción es todos, este método nos permite verificar si todos los elementos del arreglo cumplen con la condición, si no cumplen con ninguno devuelve false.

Por ejemplo veremos la diferencia con el método de some:

const num = [1,2,3,4,5,6,7,8,9,10]

const res1 = num.some(numero => numero % 2 === 0)
const res2 = num.every(numero => numero % 2 === 0)

console.log('Some: ',res1)
console.log('Every: ',res2)

Enter fullscreen mode Exit fullscreen mode

En nuestra terminal veremos lo siguiente:

Some:  true
Every:  false
Enter fullscreen mode Exit fullscreen mode

Como puedes ver el método some nos devuelve true pero every nos devuelve false, porque alguno de los elementos del arreglo no cumplen con la condición.

Ahora pasemos al código con un ejemplo diferente, vamos a tener un arreglo de clientes y tenemos que ver que todos los clientes sean mayores de edad:

const clientes = [
    {
        nombre: 'Juan',
        edad: 30
    },
    {
        nombre: 'Pedro',
        edad: 20
    },
    {
        nombre: 'Maria',
        edad: 25
    },
    {
        nombre: 'Luis',
        edad: 40
    },
    {
        nombre: 'Ana',
        edad: 35
    }
]
Enter fullscreen mode Exit fullscreen mode

Entonces nosotros en ves de comprobar uno por uno si cada cliente es mayor de edad, vamos a utilizar el método de every:


const mayoresDeEdad = clientes.every(cliente => cliente.edad >= 18)
console.log(mayoresDeEdad)
Enter fullscreen mode Exit fullscreen mode

Ahora en nuestra terminal veremos lo siguiente:

true
Enter fullscreen mode Exit fullscreen mode

Ahora supondremos que hay una promoción, y si los clientes tienen el mismo nombre del dueño , entonces les daremos una promoción, para verificar esto, lo haremos de la siguiente manera.

const res = clientes.every(cliente => cliente.nombre === 'Roger')

console.log('Se les da promocion? ', res)
Enter fullscreen mode Exit fullscreen mode

Y en nuestra terminal veremos lo siguiente:

Se les da promoción? :  false
Enter fullscreen mode Exit fullscreen mode

Ahora como reto para ti es:

  • Crear un arreglo de productos, en el cual debe tener las propiedades de: nombre, precio, descuento y cantidad. Y debes comprobar si todos los productos tienen un descuento, si todos tienen un descuento, debes retornar un mensaje que diga Todos los productos tienen descuento, si algún producto no tiene descuento, entonces debes retornar el nombre del producto que no tiene descuento. (Recuerda que puedes utilizar métodos que vimos en las clases anteriores)

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indicé 👆

Find y Find Index

Ahora veremos el método de find este método nos permite poder buscar un elemento dentro de un arreglo. Así que nos puede servir para buscar algún elemento dentro del arreglo. Este nos va a retornar el primer elemento que coincide con la condición que le entregamos. Esto es porque no esta haciendo un filtro, si no esta haciendo una búsqueda.

Por ejemplo:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const res = nums.find(num => num > 5)
console.log(res)

// Output
6
Enter fullscreen mode Exit fullscreen mode

Ahora para que esto quede mas claro vamos al código, vamos a crear un arreglo de productos, en el cual tendrán las condiciones de: nombre, precio, caducado y disponible. Debemos buscar un producto que este caducado.

const productos = [
    {
        nombre: 'Leche',
        precio: 100,
        caducado: false,
        disponible: true
    },
    {
        nombre: 'Arroz',
        precio: 200,
        caducado: true,
        disponible: true
    },
    {
        nombre: 'Aceite',
        precio: 300,
        caducado: false,
        disponible: true
    },
    {
        nombre: 'Sal',
        precio: 400,
        caducado: false,
        disponible: true
    },
    {
        nombre: 'Galletas',
        precio: 100,
        caducado: true,
        disponible: true
    },
]
Enter fullscreen mode Exit fullscreen mode

Esto lo haremos de la siguiente manera:

const res = productos.find(producto => producto.caducado === true)

console.log('Producto caducado: ', res)
Enter fullscreen mode Exit fullscreen mode

En nuestra terminal veremos lo siguiente:

Producto caducado:  { nombre: 'Arroz', precio: 200, caducado: true, disponible: true }
Enter fullscreen mode Exit fullscreen mode

Pero como puedes ver solo nos paso el primer producto que encontró caducado, pero que pasa si buscamos algo que no existe, en ese caso, nos devuelve un undefined.

findIndex

Lo que hace el método de findIndex es buscar un elemento dentro de un arreglo, pero este método nos va a retornar el índice del elemento que coincide con la condición que le entregamos. A diferencia de find que ese nos retorna todo el elemento.

Por ejemplo:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const res = nums.findIndex(num => num % 2 === 0)
console.log('Primer numero par: ', res)
Enter fullscreen mode Exit fullscreen mode

Y en nuestra terminal veremos lo siguiente:

Primer numero par:  1
Enter fullscreen mode Exit fullscreen mode

Esto quiere decir que el primer numero par del arreglo se encuentra en la posición 1.

Ahora como reto para ti es:

  • Como reto para ti es crear un arreglo de empleados, en el cual debe tener las propiedades de: nombre, edad y ventas. Debes hacer una búsqueda del vendedor que mas ventas ha tenido (Recuerda que puedes utilizar métodos que vimos en las clases anteriores)

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indicé 👆

Includes

Este método nos va a retornar un booleano, si el elemento que le entregamos esta dentro del arreglo. Si esta dentro del arreglo, entonces retornara true, si no esta dentro del arreglo, entonces retornara false. A diferencia de otros métodos que nos entregan elementos o arreglos, este entrega un booleano.
Por ejemplo:

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const res = nums.includes(10)
console.log('Incluye? :', res)
Enter fullscreen mode Exit fullscreen mode

Si vemos esto en nuestra terminal veremos lo siguiente:

Incluye? : true
Enter fullscreen mode Exit fullscreen mode

Ahora como reto para ti es:

  • Crear un arreglo el cual contenga los días de la semana, y debes hacer una búsqueda de los días que no sean Lunes, Martes, Miércoles o Jueves.

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indice 👆

Si quieres ver mas tutoriales como este puedes entrar a mi perfil y ahí encontraras una gran variedad de tips y tutoriales.👉Tips y Tutoriales..

💖 💪 🙅 🚩
rogerdimonte
Roger

Posted on June 11, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related