Javascript Arrays - Metodos (map, filter, reduce, sort, etc.)



Aprende a utilizar los arreglos de Javascript es esencial para poder desenvolverse bien con los framework de Javascripta ya sean de Frontend como React, Angular, Vue, Svelte; de Backend como express, fastify, nest, o cualquier otro entorno en donde se use Javascript. En este video vas aprender a usar los métodos tipicos como map, reduce, filter, foreach, sort y otros más.

!Registrate en Replit! https://bit.ly/3y4F3vE

Plantilla de Repl.it

Temario del Video:
00:00 Introducción
00:53 Setup
02:58 forEach
10:31 map
25:11 filter
32:32 reduce
43:01 sort
49:20 find
52:01 some
55:56 every
58:38 combinar metodos

Código del Ejemplo
https://github.com/FaztWeb/javascript-arrays

🎥 Videos Recomendados:
Javascript Import & Exports ➜ https://youtu.be/0t-Le4kdaMg
Curso de Mongodb ➜ https://youtu.be/lWMemPN9t6Q
Github Pages npm ➜ https://youtu.be/G2FoSpsq3Rw
Mongodb Visual Studio Code ➜ https://youtu.be/fZgJHJO81dw
Mongoose ➜ https://youtu.be/gfP3aqV38q4
Curso de Nodejs ➜ https://youtu.be/BhvLIzVL8_o
Thunder Client ➜ https://youtu.be/HZx5X3s_Jl4
Variables de Entorno ➜ https://youtu.be/U6st9-lNUyY
Curso de Git ➜ https://youtu.be/HiXLkL42tMU
Rest client VSCode ➜ https://youtu.be/3QLcHjNp-08
Mongodb Atlas ➜ https://youtu.be/Imwk0HtEuGY

👨‍💻 ¿Qué servicios y productos utilizo?
Ledger (Hardware Wallet) ➞ https://bit.ly/3ijsVNW
SiteGround ➞ https://bit.ly/31u9ZEk
DigitalOcean ➞ https://m.do.co/c/8ef261d77de5
Expo ➞ https://bit.ly/2WpYKtx
Cloudinary ➞ https://bit.ly/3ohNlJ7
Namecheap ➞ namecheap.pxf.io/ErDe9

🌐 Redes:
Fazt Web ➞ https://www.faztweb.com/
Facebook ➞ https://facebook.com/fazttech
Instagram ➞ https://www.instagram.com/fazttech
Twitter ➞ https://twitter.com/fazttech
Telegram ➞ https://t.me/fazttech
Blog ➞ http://blog.faztweb.com

Más comunidades en https://faztweb.com/social

#arrays #javascript #replit

35 thoughts on “Javascript Arrays – Metodos (map, filter, reduce, sort, etc.)”
  1. No se que haria sin tus explicaciones, el detalle y la consideracion que tenes en todos los temas, hasta de explicar cada uno de los ejemplos con ECS5 para las personas que vienen de antes, es simplemente genial.

  2. es muy util todo esto… pero en ningun video nadie explica como editar un solo valor en concreto… ej tengo un Array de valores bidimensional … quiero editar solo el registro ubicado en la fila "X" y columna "Y" sin tocar un solo valor del restro.. ej. tengo el array del video, pero solo queiro cambiar la edad al estudiante de indice 3

  3. muy buenos videos, gracias por las explicaciones. Pero quedé un poco confundido con el return 1 y return -1 del 44:37 , es decir, entiendo que ayuda a ordenar y entrega el resultado esperado, y que eventualmente no se usa ya que es más práctico utilizar la función flecha, pero me gustaría saber como funciona eso de los return 1 y -1, que es lo que exactamente hace en cada iteración. Mueve los elementos? o evita que se guarde el elemento en la variable final?… quizás son formas que interpreta el sort ? y si se puede aplicar en otras funciones que no sea sort? es alguna propiedad del return? Alguien me explica por favor?

  4. Algo curioso es que cuando utilicen .sort no es necesario hacerlo:
    const newSort = students.sort((a,b) => (a.age – b.age))

    Ya que estamos mutando el arreglo original, .sort no es como map, filter o reduce que no modifican el arreglo original, en este caso sort sí modifica el original.

    Entonces si luego imprimen newSort y students van a ver que ambos están iguales. 😀

  5. Con reduce también podriamos trabajar con objetos y agrupar estudiantes segun el curso que llevan:

    //Reto: agrupar estudiantes segun su curso

    const agrupar = students.reduce((obj, student) => {

    if (!obj[student.course]) {

    obj[student.course] = [student.name]

    } else {

    obj[student.course] = […obj[student.course], student.name]

    }

    return obj

    },{})

    console.log(agrupar)

    /**

    Retorna:

    {

    Marketing: [ 'Jill' ],

    'Web Development': [ 'John', 'Ryan Jhon' ],

    Accounting: [ 'Jack' ],

    'Financial Management': [ 'Jane' ]

    }

    */

  6. Filter también podemos utilizarlo para hacer un buscador:

    //Buscador de estudiantes segun el curso que llevan

    const buscarCurso = (courseName) => {

    return students.filter(item => (

    item.course.toLocaleLowerCase().includes(courseName.toLocaleLowerCase())

    ))

    }

    console.log('Estudiantes que llevan web: ', buscarCurso('web'))

    /**

    Retorna:

    Estudiantes que llevan web: [

    { name: 'John', lastname: 'Doe', age: 22, course: 'Web Development' },

    { name: 'Ryan Jhon', lastname: 'Ray', age: 23, course: 'Web Development'}

    ]

    */

Leave a Reply

Your email address will not be published. Required fields are marked *