Operaciones con arrays

Clase 15 de 51 • Fundamentos de JavaScript 2017

Resumen

Los arrays son una forma de guardar nuestros datos muy importante en JavaScript, en este vídeo veremos como trabajar con Arrays.

Si queremos hacer una función que reciba N parámetros y devuelva la suma de estos, podemos escribirla como

function suma(...params) {
  return params.reduce((acumulativo, actual) => {acumulativo + actual}, 0)
}

suma(4,5,6,23,26,7,8)

De esta forma utilizamos el método reduce con el cual cuentan los arrays, este nos permite ir iterando por todo el array y acumulando el valor en una variable.

Ahora queremos ejecutar una operación sobre todos los elementos del array, para esto tenemos un método llamado map

function doble(...params) {
  return params.map(x=>x*2)
}

doble(2,3,4,5,6,7,5)

Si queremos filtrar ciertos valores de un array, tenemos otro método para poder hacer esto con keyword

const pares = (...numeros) => numeros.filter(x=> x % 2 == 0)

Luis Felipe Silgado Cortázar

student•

todas las operaciones en 1 linea cada una

const suma = (...numbers)=>numbers.reduce((acum,number)=>acum+=number,0)

const dobles = (...numbers)=>numbers.map(number=>number*2)

const pares=(...numbers)=>numbers.filter(numero=> numero%2==0)

Cesar Colina

student•

En la primera ni siquiera tienes que pasarle el 0 como parametro 😄

Andrés Madrigal

student•

te quedo muy lindo

Jordan Lancheros

student•

Soy solo yo, o esta clase va demasiado rapido?

Juan Sanchez

student•

eres tu 😃

Pablo Gomez

student•

A qué te refieres con demasiado rápido?

LUIS JAVIER BAUTISTA BARAHONA

student•

reduce() aplica una función a un acumulador y a cada valor de un array (de izquierda a derecha) para reducirlo a un único valor. Sintaxis: var resultado = arr.reduce(funcion[, valorInicial]);

push() agrega uno o más elementos al final de un array y devuelve la nueva longitud del array. Sintaxis: array.push(element1, …, elementN)

map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos. Sintaxis: var nuevo_array = arr.map(function callback(currentValue, index, array) {
// Elemento devuelto de nuevo_array
}[, thisArg])

filter() crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada. Sintaxis: arr.filter(callback[, thisArg])

Nathaly Stefani Riaño Bejarano

student•

Erik Elyager

student•

El titulo no corresponde con el video, está invertido con el de “¿Cuánto tiempo pasó desde tu fecha de nacimiento?”

Yeison Daza

student•

Gracias por reportar, ya esta corregido

Miguel Martinez Martinez

student•

yo lo veo igual 😐

Jose Manuel Montaño Saenz

student•

de una maneras mas global, resumí:

ARRAY.reduce recibe 3 parámetros, 1. acumulador, 2.itera con cada campo del array, 3. es un indice … sacha lo usar para sumar todos los numeros del array “numeros” pero podemos hacer las 4 operaciones matemáticas, ejemp:

const suma = (...numeros) => numeros.reduce((acum, indi) => acum+indi);
const resta= (...numeros) => numeros.reduce((acum, indi) => acum-indi);
const mulp= (...numeros) => numeros.reduce((acum, indi) => acum*indi);
const div = (...numeros) => numeros.reduce((acum, indi) => acum/indi);

-ARRAY.map recibe un solo parámetro que interaactura con la operacion matematica que elijamos, sacha lo usa para sacar el doble del numero pero podemos sumar una constante a cada array o restarla, ejemp:

const sumarCons =(...numeros) => numeros.map(numero => numero+2);
const restCons=(...numeros) => numeros.map(numero => numero-2);
const varXArray=(...numeros) => numeros.map(numero => numero*Variable);
const dobles =(...numeros) => numeros.map(numero => numero*2);

ARRAY.filter para mi es casi igual a map pero en este caso se ejecuta una condicional con el parametro que recibe.

const mayor= (...numeros) => numeros.filter( numero => numero < 5);
const menor= (...numeros) => numeros.filter( numero => numero > 5);
const iguales= (...numeros) => numeros.filter( numero => numero  == 5);

sacha eres excelente programador y se nota tu esfuerzo para explicar, pero obvias algunas cosas que son vitales para aquellos aprendices con 0 de bases en programación, como yo 😛

Omar Flores Grimontt

student•

Esto se conoce como programación funcional.

Elvis Milan

student•

Excelente, en mi vida pense que existian esas funciones reduce, map, filter

Elvis Milan

student•

De hecho ya son el ave maria de mi programacion

Ignacio Esteban Aredez Diaz

student•

Aqui se marca la diferencia entre un buen programador y uno normal

Mario Alberto Campo Londoño

student•

Les comparto algunas operaciones adicionales utilizando lo visto en esta clase

const suma = (...numeros) => numeros.reduce((acum, numero) => acum += numero)

const resta = (...numeros) => numeros.reduce((acum, numero) => acum -= numero)

const multiplicar = (...numeros) => numeros.reduce((acum, numero) => acum *= numero)

const dividir = (...numeros) => numeros.reduce((acum, numero) => acum /= numero)

const pares = (...numeros) => numeros.filter(numero => numero % 2 == 0)

const impares = (...numeros) => numeros.filter(numero => numero % 2 !== 0)

const multiplo5 = (...numeros) => numeros.filter(numero => numero % 5 == 0)

const cuadrados = (...numeros) => numeros.map(numero => Math.pow(numero, 2))

const raices = (...numeros) => numeros.map(numero => Math.sqrt(numero).toFixed(2))

const euler = (...numeros) => numeros.map(numero => Math.exp(numero).toFixed(2))

const logaritmoBase10 = (...numeros) => numeros.map(numero => Math.log10(numero).toFixed(2))

Julián Castellanos

student•

Es difícil seguirle el hilo al curso inclusive después de aprobar programación básica. Es muy avanzado para personas que están comenzando, como yo…

Oscar Barajas Tavares

Team Platzi•

Aveces puede ser un poco abrumador cuando vamos empezando en un lenguaje de programación, también ya hemos renovado este curso, puedes empezar con el nuevamente.

Fernando Gómez O.

student•

Hay un pequeño error y es que cuando se introduce 0 como parámetro devuelve 0 en la lista de pares, y obviamente no debería ser así.
Aquí lo he corregido:

const pares = (...numeros) => numeros.filter(numero => numero != 0 && numero % 2 == 0)

Wiliam Quispe

student•

Trabajar con las funciones que tienen los arrays es una muy buena práctica, de esa manera podemos reducir nuestro código monstruosamente.
Las siguientes funciones reciben como parámetro una función que se ejecuta por cada elemento del array:

Reduce: La función parámetro recibe un acumulador y el elemento actual del array, suma el elemento al acumulador y retornando el acumulador para que pueda ser usado con el siguiente elemento, reduce también puede recibir otro elemento, que es valor inicial del acumulador.
Map: La función parámetro ejecuta algo sobre cada elemento actual del array
Filter: La función parámetro realiza un filtro en base a una condición y en base a ese resultado incluye o no al elemento actual del array.

Nota: Las arrow functions son sumamente útiles

Javier Nava

student•

podemos reducir el codigo, peeero la velocidad , siempre va a ser mas rapido el ciclo ordinario del for

Jose L. Figueroa

student•

Va mi review:

Reduce: Reduce los elementos de un array, sumándolos uno a uno de izq a derecha. Recibe una función como 1er parametro y en el 2ndo parametro el valor inicial del acumulador.

Map: Crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos. Es decir, recibe una función que se va a ejecutar por cada uno de los elementos del array.

Push: Agrega uno o más elementos al final de un array y devuelve la nueva longitud del array.

Filter: Crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.

Franklyn Eduardo Barrera Medina

student•

Les comparto mi codigo, en forma pollo (Principiante) y forma pro(mas profesional) y a su vez una pequeña aclaratoria de “map, filter, reduce” por si a alguien no le quedo claro y le sirve

1-) map : Se utiliza para modificar valores en el array
2-) filter: Se utiliza para filtrar informacion, no se puede modificar. filtra para mostrar lo que se 
            desee(se usa con condicionales para filtrar)
3-) reduce: reduce el array a lo que se le pida, sirve para acumular ya que el solo puede devolver un valor unico
            de todo el array recibe dos parametros (funcion anonima, de donde comenzar) si se le pone 0 arranca desde
            el inicio
*/


/*Se requiere modificar cada valor y multiplicarlo por 2, USO DE map para modificar valores en el array*/

//Metodo pollo
function Dobles (...numeros){
    
    return numeros.map(function(num){
        
            return num*2;
            
            
        });
}

//Metodo pro
const Doble = (...numeros) => numeros.map(num => num*2)

Doble(2,3);


/*Se requiere solo tomar en cuenta los numeros pares, USO de filter para filtrar la informacion
con un condicional*/

//Metodo pollo
function Pares(...numeros){
    
    
    return numeros.filter(function(num){
        
        if(num % 2 == 0)
            return num
        
        
    })
    
    /*o puedo hacer const c = numeros.filter()...etc
    
    luego return c;
    
    es lo mismo
    */
}


//Metodo pro
const Par = (...numeros) => numeros.filter(num => (num %2 ==0)/*lo toma como un if*/  )

Par(1,2,4,8);


/*Se requiere mostrar la suma de todos los valores del arrary, Se usa Reduce para reducir todo a un solo valor*/

//Metodo pollo


function Acumular(...numeros){
    
    
    return numeros.reduce(function(acumulador,num){
        
        acumulador+=num;
        
        return acumulador;
        
    },0/*desde el inicio*/)
    
}

//Metodo pro

const acumula = (...numeros) => numeros.reduce ( (acum,num) =>acum+=num ,0)

acumula(2,1,3,5) // 11

Felipe de Jesus Ramirez Rodriguez

student•

const suma = (...numeros)=>  numeros.reduce((acum, numero)=> acum += numero)
const doble = (...numeros)=>  numeros.map(numero=> numero*2)
const pares= (...numeros)=> numeros.filter((numero)=> numero % 2 == 0 ) ```

Saúl Báez Terrez

student•

reduce me recordó al for each que utilizo en Java

Ronald Alexander Palacios Garrido

student•

function suma( ...numeros) {
    console.log( numeros )
    let acum = 0; //acumulador
    for (let index = 0; index < numeros.length; index++) {
        acum += numeros[index];   
 // length La propiedad length devuelve
 // la longitud de una cadena (número de caracteres).
    }
    return acum   
    
}
//console.log(numeros);
console.log(` ejemplo UNO incorrecto: ${suma(4,2,4,5,5,10)}`);

//De esta forma utilizamos el método reduce con el cual cuentan los arrays, este nos permite ir iterando por todo el array y acumulando el valor en una variable.

const suma1 = (...numero) =>  numero.reduce((acum, numero) => acum += numero, 0 )
    
  
  console.log(` ejemplo uno CORRECTO: ${suma1(4,8,12,56,13)}`);

  function dobles(...numeros) {
      const resultados= []
      for (let i = 0; i<numeros.length; i++){
          resultados.push(numeros[i]*2)
      }
      return resultados
  }
/* El método push () agrega nuevos elementos al final de una matriz y devuelve la nueva longitud. También puede duplicar lo que posee
Nota: Los nuevos elementos se agregarán al final de la matriz. || Nota: este método cambia la longitud de la matriz.
Sugerencia: para agregar elementos al principio de una matriz, use el método unshift () .*/ 
console.log(` ejemplo DOS incorrecto: ${dobles(4,8,12,56,13)}`);

  const dobles1 = (...numeros) => numeros.map(numero => numero * 2)
  console.log(` ejemplo dos CORRECTO : ${dobles1(4,8,12,56,13)} usando .map`);
  // El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos


  function pares(...numeros) {
  const resultado = []
  const length = numeros.length //variable creada para reducir código
    for (let i = 0; i < length; i++) {
        const numero =numeros[i]; //cada numero segun el indice que pasaron
          if (numero % 2 === 0) { // conseguir resciduo con Modulo %
              resultado.push(numero)
            }     
     }
     return resultado    
  }
  console.log(` ejemplo TRES incorrecto: ${pares(4,8,12,56,13)} Obtener pares con; .push `);
  // método filter() crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.
  const pares1 = (...numeros) => numeros.filter(numero => numero % 2 == 0)
  console.log(` ejemplo tres CORRECTO: ${pares1(4,8,12,56,13)} Obtener pares con; .filter `);```

Luis Montero

student•

El profesor Sacha es muy bueno, todo el contenido siempre de alta calidad.

Noé Muñoz

student•

La verdad es que estos métodos son muy útiles ya que te ahorran mucho código y es la forma correcta de escribirse.

Operaciones con arrays

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial