Introducción

1

Manipulación de Arrays en JavaScript para Desarrollo Full Stack

Fundamentos del manejo de arrays

2

Recorrido de Arrays con Foreach en JavaScript

3

Mutabilidad vs Inmutabilidad en Programación JavaScript

4

Uso de Map para Transformaciones en JavaScript y Renderizado HTML

5

Playground: multiplica todos los elementos por dos

6

Transformaciones avanzadas con map en JavaScript

7

Playground: calcula y agrega nuevas propiedades a un array

8

Filtrado de Arrays en JavaScript con el Método Filter

9

Playground: retorna solo palabras de 4 letras o más

10

Uso del método reduce en JavaScript para sumar elementos de un array

11

Contar elementos en un array con reduce y agrupar por rango

12

Playground: calcula la suma total de elementos en un array

Métodos en JavaScript

13

Uso de la función "sum" en JavaScript para evaluar condiciones

14

Playground: ¿al menos 1 de los números es par?

15

Uso del método `every` en JavaScript para validaciones de arrays

16

Playground: retorna un booleano si todos los elementos son pares

17

Uso de los métodos find y findIndex en JavaScript

18

Uso del método includes en JavaScript para arrays y strings

19

Playground: buscador de palabras con parámetros de búsqueda

20

Unificación y separación de arrays con join y split en JavaScript

21

Playground: construye URLs a partir de strings

22

Fusión de Arrays con Concat y Operador Spread en JavaScript

23

Aplanar Arrays en JavaScript con Flat y FlatMap

24

Uso de FlatMap para Extraer Fechas de Calendarios en JavaScript

25

Playground: calcula el total de palabras en un texto

26

Métodos Mutables e Inmutables en Arrays: Manipulación y Búsqueda

27

Ordenamiento de Arrays con el Método Sort en JavaScript

Despedida

28

Manipulación de Rides con JavaScript

Manipulación de Arrays en JavaScript para Desarrollo Full Stack

1/28
Recursos
Transcripción

Bienvenido/a al curso de Manipulación de Arrays en JavaScript. Esta vez conocerás los arrays en JavaScript, aprenderás desde cómo crearlos hasta los distintos métodos que tiene.

Profesor: Nicolas Molina, Google Developer Expert.

Requisitos iniciales

Como requisito inicial, deberás tener dos carpetas: client y server que servirán para ejercicios en el navegador y en el servidor, respectivamente. También necesitarás instalar una dependencia llamada http-server. Asimismo puedes clonar el repositorio de GitHub del curso.

Estructura inicial del proyecto del curso

Si no conoces cómo iniciar un proyector para instalar dependencias, te recomiendo que realices el curso de Gestión de Dependencias y Paquetes con NPM.

Te recomiendo usar Codi.link, es un editor de código para escribir HTML, CSS y JavaScript y visualizar el resultado a tiempo real. Daña el código, resuelve los problemas de cada clase o genera nuevos ejemplos que te ayuden a reforzar los temas aprendidos.

Contribuciones del curso creadas por: Andrés Guano.

Aportes 37

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

¡Esperaba con ansias este curso!
.
Clonamos el repo (https://github.com/platzi/curso-manipulacion-de-arrays/tree/main) en el primer commit, en consola mandamos npm install y arrancamos con todo el curso!
.
El que venga en el futuro, recuerde instalar desde el
package.json las versiones así no tiene problemas de compatibilidad a futuro.
.
¡Éxitos a todos!

El curso perfecto que hacia falta en la escuela de JavaScript 💛

Hola a todos! 😄
Apoyándome en el curso y en la documentación oficial de Mozilla tomé algunos apuntes en Notion, espero que a alguien les sean de ayuda :3
link

Una de las cosas que diferencia a un buen programador de JavaScript es su capacidad para la manipulación de data, en este caso especificamente de Arrays. Vamos con toda a este curso 😄

Llevaba semanas entrando todos los días para ver si este curso ya estaba disponible.

Sin duda uno de los mejores profesores 💚

Aprender a dominar los Arrays es muy importante. 🥇 Justamente como explica nuestro profesor en esta clase, saber manipular los arrays nos puede ayudar a resolver problemas muy complejos. Como él lo dice, "Nuestra as bajo la Manga". 🃏 Pero una cosa más que quiero compartir, es que también deberías apoyarte sólidamente de documentación oficial. (Muy importante) 📄 Para este curso específicamente, puedes ayudarte leyendo la documentación sobre Arrays en MDN. 🦊 Te dejaría el link, pero también tienes que aprender a buscar documentación por tu propia cuenta. 😜 No pares de aprender 🚀

Este curso debería estar después de este curso de Gestión de Dependencias y Paquetes con NPM en la ruta Frontend y Backend con Javascript para Desarrollo Web, no se digo ✌😃✨.

A darle a los arrays que son el pan de cada día x)

Este es el curso que no sabía que necesitaba =0

Aquí les comparto a todos mi toma de notas de todo el curso para que entre todos podamos ir mejorándolo!
Espero que les sirva y podamos aportar al documento juntos!

Suerte en el curso, es muy entretenido!

https://docs.google.com/document/d/1fZnqvnOxUpdF3yaEkhgoa8TN578KwD2JrCU9kuQrlco/edit?usp=sharing

Este año retomo mi aprendiazje con Platzi y me emociona que este sea el primero de mi año! 😃

Por favor Platzi mas cursos con esta metodología tipo streamer

clonar :

https://github.com/platzi/curso-manipulacion-de-arrays

no:

https://github.com/platzi/curso-manipulacion-de-arrays/tree/main

para las persona que como yo no sabian hacer el clon del repositorio por acá les dejo la explicación de como hacerlo

https://platzi.com/clases/2327-javascript-practico-2021/38656-configuracion-del-entorno-de-desarrollo/

Mi primer curso con el profesor Nicolás Molina. Ya lo seguía de su canal de Youtube.

Para este curso les podría venir bien un playground que tenga todo listo para ejecutar codigo js y html como codi.link, me gusta este por que es muy limpio y tiene el autocomplete de vscode.

El mejor profesor de angular en habla Hispana 🍻 !!!

Manipular arrays y objetos de forma correcta es la base para que nuestros algoritmos sean limpios y legibles.

Brutal! a darle a este curso

Genial!!!

Si tener un as bajo la manga es bueno, tener varios es mucho mejor!

recuerden hacer el comando npm i

let’s go! 😃

Genial! Clonando el repo 😊
Me interesa mucho array en Java me gustaría aprender a programar en Java.

Llego la hora de tomar es curso. Let’s go!

Altamente productiva. 😃

Repositorio clonado, asi que! allá vamos…

creo que sé manipular bastante bien los arrays, pero siempre se aprende algo nuevo

Este curso se ve super bueno. Espero cumpla mis espectativas

El curso de manipulacion de arrays no puede no estar en la ruta de aprendizaje de JavaScript.

Hola, increíble comunidad de Platzi, lo resolví de esta manera. Sé que existen otras rutas para lograr el resultado, un de ellas podría ser con web Componets… por favor hágame saber sus opiniones.

<main>
     <section>
         <input type="text" name="taskInput" id="inputTask" placeholder="Agrega tu tarea">
        <button id="addTask" onclick="addTask()">Agregar tarea</button>
     </section>
    <section>
         <ul id="taskList"></ul>
     </section>

</main>

<script>
taskArray = [
]
function myTask(taskName){
    this.taskName = taskName
}
function showTask() {
    const taskList = document.querySelector("#taskList");
    const list = taskArray.map(item => {
        return `<li><input type="checkbox" id="doneTask">${item.taskName}</li>`;
    })
   taskList.innerHTML = list.join(''); 
}
function addTask() {
    const inputTask = document.querySelector("#inputTask");
    const taskValue = inputTask.value;
    if (!taskValue) {return}
    const task = new myTask(taskValue);
    taskArray.push(task);
    console.log(taskArray);
    inputTask.value = '';
    showTask()
}

</script>

El resultado ⬇️

Muy emocionado de iniciar este curso, siempre es importante saber como manipular arrays, sobre todo cuando ya estas en frameworks como react, vue, angular, a seguir reforzando JS.

El curso suena increíble, a darle con todo.

Vamos 😃