A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Map

4/19
Recursos

Aportes 28

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Resumen
.
Lo m谩s sencillo:

驴Qu茅 hace el .map()? TRANSFORMAR.

.map() es INMUTABLE por lo tanto no modifica el array original, sino que crea uno nuevo con la 鈥渢ransformaci贸n鈥 aplicada.
.
Adem谩s, mantienes el mismo length que el array original, te devuelve en el nuevo array la misma cantidad que el array que le aplicaste el m茅todo.
.
C贸digo de la clase:

const products = [
            { title: 'Burger', price: 121 },
            { title: 'Pizza', price: 202 },
        ];
        const app = document.getElementById('app');
        const list = products.map(product => {
            return `<li>${product.title} - ${product.price}</li>`;
        })

        app.innerHTML = list.join('');

El m茅todo join() une todos los elementos de una matriz (o un objeto similar a una matriz) en una cadena y devuelve esta cadena.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected "Fire,Air,Water"

console.log(elements.join(''));
// expected  "FireAirWater"

console.log(elements.join('-'));
// expected "Fire-Air-Water"

脡xitos 馃槂

Esta imagen ilustra muy bien los 3 metodos mas usados para la manipulaci贸n de arrays

Importante: Array.map siempre necesita que se devuelva algo en la funci贸n.
En una arrow function si no se usan par茅ntesis se conoce como un return impl铆cito, en otras palabras, devuelve autom谩ticamente el resultado de la operaci贸n Esto solo funciona con cosas sencillas.
Si necesitas usar m谩s de una l铆nea de c贸digo para devolver el resultado es mejor que uses { c贸digo } y return () para que no tengas problemas.

Diferencia pr谩ctica entre .forEach()y .map()

Por si llegan a pregunt谩rselo, si, 茅stos m茅todos son muy parecidos, ya que ejecutan una funci贸n sobre cada elemento de un array, pero hay una diferencia fundamental: .forEach() no crea o devuelve, por defecto, un nuevo array con los elementos modificados, en cambio .map() si.

Map lo que te permite es iterar sobre cada elemento del array y segun lo que hayas indicado que haga, te devuelve un nuevo array con los valores modificados.

Por lo tanto ser铆a un metodo inmutable para transformar los valores de un array

Mala Practica en React con map

Usar el index del map

馃憠Representa varios elementos en React con el array.map() . Las claves deben ser 煤nicas para que React pueda manejar el seguimiento adecuado de ese elemento o componente. Si tuviera que utilizar el 铆ndice como clave, esa clave puede ser un duplicado en algunos casos, lo que debe evitarse.
Imagine tener una matriz de elementos a trav茅s de los cuales va a representar .map y usar el 铆ndice como claves. Adem谩s, imagine agregar al medio o eliminar un elemento del medio de la matriz. La clave terminar谩 siendo la misma que antes, y React asumir谩 que es el mismo elemento / componente id茅ntico que antes.
馃槨Esto podr铆a provocar efectos no deseados y debe evitarse.

Par谩metros

  • callback
    Funci贸n que producir谩 un elemento del nuevo array, recibe tres argumentos:
  • currentValue
    El elemento actual del array que se est谩 procesando.
  • index
    El 铆ndice del elemento actual dentro del array.
  • array
    El array sobre el que se llama map.
  • thisArg
    Opcional. Valor a usar como this al ejecutar callback.

En la clase de forEach, prob茅 con map y me dio el mismo resultado sin tener que usar join. Fue algo as铆:

const list = listBurger.map(product => app.innerHTML += `<li> ${product.name} - ${product.price} </li>`)

Acotando que listBurger es el array. Si se cambia el map por el forEach, el resultado me da lo mismo. En este caso particular en el cual no se necesita un nuevo array, o el objeto modificado, map y forEach hacen casi lo mismo en el document con solo cambiar una palabra por otra. Sin embargo, si analizamos la constante 鈥榣ist鈥, con un m茅todo regresa undefined, mientras que con map, regresa el array con el html que estamos agregando.

NodeList con map()

una de las diferencias entre map() y forEach() es que si queremos recorrer una NodeList con map no se puede en cambio foreach() si puede recorrer una NodeList

Map transforma los elementos de un array seg煤n la l贸gica de negocios y retorna un nuevo array con el mismo numero de elementos del array original

.push = mutable
.map = inmutable

El m茅todo map iterar谩 sobre cada elemento de un arreglo y devuelve un nuevo arreglo que contiene los resultados de llamar a la funci贸n callback en cada elemento. Esto lo hace sin mutar el arreglo original.

const frutas = ["馃崒", "馃崗", "馃崜"];

const nuevoArray = frutas.map((item) => {
    return item;
});

console.log(nuevoArray);

Una funci贸n de callback es una funci贸n que se pasa a otra funci贸n como un argumento, que luego se invoca dentro de la funci贸n externa para completar alg煤n tipo de rutina o acci贸n.

En este video lo podr谩n seguir profundizando:

(https://www.youtube.com/watch?v=tP8JiVUiyDo)

.map

Genera un nuevo array transformado y deja al array original inmutable.

Ten铆a ganas de tomar el curso desde que sali贸, pero por temas de tiempo no pude hasta unos d铆as despu茅s del lanzamiento, a mi paracer ya le hac铆a falta un curso as铆 a Platzi. Hasta ahora muy bien explicado todo. 馃挌

si lo hago as铆, sin generar un nuevo elemento tambien funciona y se simplifica el c贸digo

 const show=document.querySelector(".showArray");

        const arreglo=[
            {Name:'peter',
             age:23,
             adress:'Av 23 Fort laudardale'},
             {Name:'jhon',
             age:18,
             adress:'32 Road'},
             {Name:'Mary',
             age:20,
             adress:'5 av, Fl'}
        ]
           arreglo.map(person=>{
            show.innerHTML+=`
            <div>
             <li>${'mi nombre es '+person.Name}</li>
             <li>${person.age}</li>
             <li>${person.adress}</li>
           </div>    
           `
           })

asi lo hice en React:

import "./App.css";

function App() {
  const products = [
    { title: "Burger", price: 121 },
    { title: "Pizza", price: 202 },
  ];

  return (
    <div className="App">
      <header className="App-header">
        <h1>hola</h1>
        <ul>
          {products &&
            products.map((product) => (
              <li>
                {product.title} - {product.price}
              </li>
            ))}
        </ul>
      </header>
    </div>
  );
}

Y asi renderiza

Este video de otro profesor de platzi, esta buenisimo para explicar map de una forma mas grafica: https://www.youtube.com/watch?v=tP8JiVUiyDo

Puede que a alguien le sirva este c贸digo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lista de productos</title>
  </head>
  <body>
    <div class="app">
      <h1>Lista de Productos</h1>
      <ul class="app__list"></ul>
    </div>
    <script>
      const products = [
        { id: 1, product: "Producto 1", price: 100, state: true },
        { id: 2, product: "Producto 2", price: 200, state: false},
        { id: 3, product: "Producto 3", price: 300, state: true},
        { id: 4, product: "Producto 4", price: 400, state: false},
        { id: 5, product: "Producto 5", price: 500, state: true}, 
      ];

      const listaUl = document.querySelector(".app__list");

      const element = products.map(({ id, product, price, state }) => {
        const item = `
          <li>
            <label>
              <input
                type="checkbox"              
                value=${id}
                name=${product}
                class=item${id}__checkbox
                ${state? 'checked' :''}
              />
              <span>Product: ${product}</span>
              <span>Precio: ${price}</span>
            </label>
          </li>
          `;
        return item;
      });

      listaUl.insertAdjacentHTML("beforeend", element.join(""));
    </script>
  </body>
</html>

Entrega esta respuesta:

MAP

  • Crea un nuevo array con los resultados de la transformaci贸n del orginal
  • Se obtiene el mismo numero de elementos del array original
const letra = ['a','b','c'];

const newLetra = letra.map(item => item + '--')

console.log('Original', letra);

console.log('New', newLetra);

MAP

// Tarea

const tienda = [
  {celular: 'iPhone', precio: '800$'},
  {celular: 'xiaomi', precio: '200$'}
];
const app = document.querySelector('#app');

const list = tienda.map(producto => {
  return `<li>${producto.celular} - ${producto.precio} </li>`
})

app.innerHTML = list.join('');

Ejercicio completo y renderizado

const d = document 
const products = [
    {title:'Burger',price:200},
    {title:'Pizza',price:320}
]

//RECORRER Y RENDERIZAR CON MAP
const $principal = d.getElementById('app')
const $desorderList = d.createElement('ul')
$principal.appendChild($desorderList)

const newList = products.map(e=>`<li>${e.title} costara: ${e.price}</li>`)
$desorderList.innerHTML=`${newList.join("")}`

Sobre cada elemento iterado lo transformara, en algo mas

/*Multiplicar los numeros x 2*/
//MAP
let numbers = [1,5,3,61,2,10,30,5,4]

let x2 = numbers.map((e)=>{
    return e*2
})

console.log(x2)


//CONSTRUYENDO MAP
// La variable global
const s = [23, 65, 98, 5];

Array.prototype.myMap = function(callback) {
  const newArray = [];
  // Cambia solo el c贸digo debajo de esta l铆nea
		for(let i = 0; i < this.length; i++){
		let element = callback(this[i])
		  newArray.push(element)   
  }

  // Cambia solo el c贸digo encima de esta l铆nea
  return newArray;
};

const new_s = s.myMap(function(item) {
  return item * 2;
});


console.log(new_s)

Aqu铆 hay algo bastante importante que es como funciona por debajo la funci贸n map, funcionan con el Patr贸n de dise帽o Iterator , donde se utiliza un objecto el iterador como mecanismo para recorrer una colecci贸n de elementos o contenedor de forma secuencial para acceder a su contenido, nos permite iterar la colecci贸n sin tener que conocer la estructura del contenedor.
el iterador utiliza una interface
el iterador tiene dos m茅todos:

  • hasNext()

  • next()

let myArray = new IterableList[1,2,3,4,5];
let iterator =  myArray.iterator()

while(iterator.hasNext()){
	console.log(iterator.next())
}

馃槷 Map genial

// array 
const letters = ['a', 'b', 'c', 'd', 'e']

// MAP
const neeArray =  letters.map(item => item + '++')
 console.log('New arrat from map', newArray);

Muy bien explicado todo hasta ahora. Muy buen profe, vengo realizando varios cursos con 茅l.