Introducción
Tu AS bajo la manga
Fundamentos del manejo de arrays
ForEach
Mutable o Inmutable
Qué es el método map
Playground: multiplica todos los elementos por dos
Map Reloaded
Playground: calcula y agrega nuevas propiedades a un array
Filter
Playground: retorna solo palabras de 4 letras o más
Reduce
Reduce Reloaded
Playground: calcula la suma total de elementos en un array
Métodos en JavaScript
Some
Playground: ¿al menos 1 de los números es par?
Every
Playground: retorna un booleano si todos los elementos son pares
Find y FindIndex
Includes
Playground: buscador de palabras con parámetros de búsqueda
Join
Playground: construye URLs a partir de strings
Concat
Flat
FlatMap
Playground: calcula el total de palabras en un texto
Mutable functions
Sort
Despedida
Despedida
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Convierte tus certificados en títulos universitarios en USA
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
El método somees inmutable y consiste retornar un valor lógico verdadero si existe al menos un elemento que cumpla la condición establecida en la función (callback).
Este método recibe dos argumentos:
this en la función. Si se lo omite, será undefined. Recuerde que this en arrow functions es el objeto global.array.some(function(), thisArg)
La función, que recibe como argumento el método some, utiliza tres parámetros:
0, y así sucesivamente.array.some(function(element, index, array))
Los métodos de arrays nos permiten realizar algoritmos con una menor cantidad de líneas que una estructura for, con un resultado igual o parecido.
Por ejemplo, hagamos un algoritmo que indique si en un array existe al menos un número par.
Si utilizamos la estructura for, necesitaremos una variable de tipo booleana con el valor false e iterar hasta que la condición se cumpla. La palabra reservada break rompe el ciclo repetitivo.
const numbers = [1, 2, 3, 5]
let respuesta = false
for (let i=0; i < numbers.length; i++){
const element = numbers[i]
if (element % 2 === 0) {
respuesta = true
break
}
}
console.log(respuesta) // true
Con el método some solo debemos establecer la función que indique la condición a cumplir para cada elemento.
const numbers = [1, 2, 3, 5]
const respuesta = numbers.some(item => item % 2 === 0)
console.log(respuesta) // true
Contribución creada por: Andrés Guano.
Aportes 37
Preguntas 17
Dejo el array de fechas del ejercicio 😃
const dates = [
{
startDate: new Date(2021, 1, 1, 10),
endDate: new Date(2021, 1, 1, 11),
title: "Cita de trabajo",
},
{
startDate: new Date(2021, 1, 1, 15),
endDate: new Date(2021, 1, 1, 15, 30),
title: "Cita con mi jefe",
},
{
startDate: new Date(2021, 1, 1, 20),
endDate: new Date(2021, 1, 1, 21),
title: "Cena",
},
];
Resumen
.
Este método nos devuelve true o false sí al menos 1 elemento de nuestro array cumple con la condición.
const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0;
console.log(array.some(even));
// resultado true
Al día de hoy (21/9/21), la librería de fechas date-fns esta en la versión 2.24.0 y funciona correctamente el ejercicio. Sí vienes del futuro, recuerda instalar la versión que usa el profe para evitar incompatibilidades si es que la sintaxis o algo de la misma librería ha sido modificada.
Recordé los corajes de Freddy al ver a programadores usando alguna herramienta externa para saber si un número es par o impar.
Soy nuevo en JS y este profesor es muy bueno, cada que termina una clase me siento con superpoderes.
Hasta me dan ganas de hacer un calendario o agenda vía web. 😄
Les dejo el encabezado del ejercicio para que se les facilite mas:
const dates = [
{
startDate: new Date(2021, 1, 1, 10),
endDate: new Date(2021, 1, 1, 11),
title: "Cita de trabajo",
},
{
startDate: new Date(2021, 1, 1, 15),
endDate: new Date(2021, 1, 1, 15, 30),
title: "Cita con mi jefe",
},
{
startDate: new Date(2021, 1, 1, 20),
endDate: new Date(2021, 1, 1, 21),
title: "Cena",
},
];
const newAppointment = {
startDate: new Date(2021, 1, 1, 8),
endDate: new Date(2021, 1, 1, 9, 30),
};
Para los que no le funciona la librería
Aquí mi versión sin uso de ella:
// exo 2
const dates = [
{
startDate: new Date(2021, 1, 1, 10),
endDate: new Date(2021, 1, 1, 11),
title: "Cita de trabajo",
},
{
startDate: new Date(2021, 1, 1, 15),
endDate: new Date(2021, 1, 1, 15, 30),
title: "Cita con mi jefe",
},
{
startDate: new Date(2021, 1, 1, 20),
endDate: new Date(2021, 1, 1, 21),
title: "Cena",
},
];
// My try
const obj1 = {
startDate: new Date(2021, 1, 1, 10),
endDate: new Date(2021, 1, 1, 11),
title: "Cita de trabajo",
}
const obj2 = {
startDate: new Date(2021, 1, 1, 10),
endDate: new Date(2021, 1, 1, 13),
title: "Cita de trabajo",
}
const datesOverlap = (start1, end1, start2, end2) => {
if (start1 <= end2 && start2 <= end1) return true
else return false;
}
//check
datesOverlap(obj1.startDate, obj1.endDate, obj2.startDate, obj2.endDate);
// exo
const newAppointment = {
startDate: new Date(2021, 1, 1, 8),
endDate: new Date(2021, 1, 1, 9, 30),
};
const newAppointment1 = {
startDate: new Date(2021, 1, 1, 10),
endDate: new Date(2021, 1, 1, 13),
};
const checkNewAppointmentAgainstDates = (newDates) => {
return dates.some(item => {
return datesOverlap(item.startDate, item.endDate, newDates.startDate, newDates.endDate)
})
}
checkNewAppointmentAgainstDates(newAppointment);
checkNewAppointmentAgainstDates(newAppointment1);
Estoy trabajando desde windows 11, y yo instalé date-fns desde mi terminal git bash usando el comando del profe:
npm i date-fns
Por si a alguien le sirve, nunca se sabe.
Some: Si alguno de esos elementos cumple con alguna condicional, regresa -> True o False
No importa si todos los cumple o solo uno (Almenos alguno)
Si alguno cumple regresa: True, si ninguno cumple con la condicion regresa: False
const dates = [
{
startDate: new Date(2021, 1, 1, 10),
endDate: new Date(2021, 1, 1, 11),
title: "Cita de trabajo",
},
{
startDate: new Date(2021, 1, 1, 15),
endDate: new Date(2021, 1, 1, 15, 30),
title: "Cita con mi jefe",
},
{
startDate: new Date(2021, 1, 1, 20),
endDate: new Date(2021, 1, 1, 21),
title: "Cena",
},
];
const newAppointment = {
startDate: new Date (2021,1,1,8),
endDate: new Date (2021,1,1,9,30),
};
const areIntervalsOverlapping = require('date-fns/areIntervalsOverlapping')
const isOverlap = (newDate) =>{
return dates.some(date => {
return areIntervalsOverlapping(
{start:date.startDate, end:date.endDate},
{start:newDate.startDate,end:newDate.endDate}
)
})
}
console.log(isOverlap(newAppointment));
Este método lo relaciono con el condicional OR si bien pueden tener usos super distintos, pero internamente es lo mismo, basta con que cumpla una sola condición para ejecute la acción en el caso de or, y en el caso de some para que devuelva true o false
Para poder usar la libreria de date-fns, con la sentencia import de ES6 modules, se tiene que agregar en el package.json, lo sgt:
{
"type": "module"
}
y luego usar import
import {areIntervalsOverlapping} from 'date-fns'
const dates = [
{
startDate: new Date(2021, 1, 1, 10),
endDate: new Date(2021, 1, 1, 11),
title: "Cita de trabajo",
},
{
startDate: new Date(2021, 1, 1, 15),
endDate: new Date(2021, 1, 1, 15, 30),
title: "Cita con mi jefe",
},
{
startDate: new Date(2021, 1, 1, 20),
endDate: new Date(2021, 1, 1, 21),
title: "Cena",
},
]
//fecha a agendar
const newAppointment = {
startDate: new Date(2021, 1, 1, 10, 10),
endDate: new Date(2021, 1, 1, 11, 30),
}
const isOverlaping = (newDate) => {
return dates.some(date => {
return areIntervalsOverlapping(
{start: date.startDate, end: date.endDate},
{start: newDate.startDate, end: newDate.endDate})
})
}
Por si no les sirve la libreria esta es una alternativa, como argumento del primer parametro se pasa el arreglo de las citas agendadas, y como segundo argumento deben de pasar el objeto con los datos de la cita que quieren verificar.
La estuve probando y creo no tiene fallas, si la tiene corrijanla por mi XD.
const verificar = function(agenda, cita){
return agenda.some(item => (cita.startDate >= item.startDate && cita.startDate <= item.endDate) || (cita.endDate >= item.startDate && cita.endDate <= item.endDate));
}
Método some: devuelve true o false si al menos un valor del array cumple la condición.
const numbers = [1, 2, 3, 4];
const rta2 = numbers.some( item => item % 2 === 0);
console.log('With some', rta2);
Que ejercicio tan valioso. ¡Super práctico y útil! Muchas gracias Nico!
revisa si es par o impar y lo inyecta en su respectivo
const numbers = [1,2,3,4];
const pares = [];
const impares = [];
for(let index = 0; numbers.length > index; index++){
const porcent = numbers[index]
if(porcent % 2 == 0){
pares.push(porcent)
}else{
impares.push(porcent)
}
}
console.log(“pares”, pares)
console.log(“impares”, impares)
para los que tienen este error se soluciona cambiando la extension de
.js a .cjs
var areIntervalsOverlapping = require(‘date-fns/areIntervalsOverlapping’)
este es el enlace:
const areIntervalsOverlapping = require('date-fns/areIntervalsOverlapping');
No estoy promocionando el ocio, pero… podemos sacar de cosas buenas de algo que está en una imagen o video y queremos sacar letras para luego editarlas.
Les recomiendo esta extensión de chrome:
muy buena clase.
Para el que no tenga la librería de las fechas.
Se puede instalar así, en la terminal:
npm install date-fns --save
# or
yarn add date-fns
Lo instalé en Mac, sin problemas.
Saludos! 😄
comparto mi solucion al reto!
const items = [1,2,4,5,4,7,3,0,1,4,6,3,6,8,3,5,7,4,3,8,5,6,1,9, 10];
const rta2 = items.reduce((obj, item) => {
if(item >= 0 && item <= 5) {
obj['1-5'] += 1;
} else if (item > 5 && item < 9) {
obj['6-8'] += 1;
} else {
obj['9-10'] += 1;
}
return obj;
}, {'1-5': 0, '6-8' : 0, '9-10' : 0});
console.log(rta2);
comparto el link
https://date-fns.org/v2.28.0/docs/areIntervalsOverlapping
const dates = [
{
startDate: new Date(2021, 1, 1, 10), //01/01/2021 10:00 am
endDate: new Date(2021, 1, 1, 11), // 11:00 am
title: "Cita de trabajo",
},
{
startDate: new Date(2021, 1, 1, 15), // 03:00 pm
endDate: new Date(2021, 1, 1, 15, 30), // 03:30 pm
title: "Cita con mi jefe",
},
{
startDate: new Date(2021, 1, 1, 20), // 08:00 pm
endDate: new Date(2021, 1, 1, 21), // 09:00 pm
title: "Cena",
},
];
parece que en este caso el profe se complica más de la cuenta.
import { useState } from "react";
import "./App.css";
function App() {
const [query, setQuery] = useState(false);
const myArray = [
{
customerName: "Nicolas",
total: 600,
delivered: true,
},
{
customerName: "Zulema",
total: 120,
delivered: true,
},
{
customerName: "Santiago",
total: 180,
delivered: false,
},
{
customerName: "Valentina",
total: 600,
delivered: true,
},
];
const totalDelivered = () => {
const rta = myArray.some((item) => !item.delivered);
setQuery(rta);
};
const handleSome = () => {
totalDelivered();
};
const myFilter = (value) => {
const newArray = value.filter((e) => !e.delivered);
return newArray.map((product, index) => (
<li className="li-same" key={index}>
<h4>
{product.customerName}_{product.total}
</h4>
</li>
));
};
return (
<header className="App-header">
<h1>veamos al método .some</h1>
<section className="query">
<button onClick={handleSome}>
consultar si hay ventas sin entregar
</button>
{query && (
<div className="module-query">
<h5>estas son las ventas sin entregar</h5>
<ul className="ul-same">{myFilter(myArray)}</ul>
</div>
)}
</section>
</header>
);
}
export default App;
buena clase
El método some() comprueba si al menos un elemento del array cumple con la condición implementada por la función proporcionada.
const users = [
{ uid: 1, name: "John", age: 34 },
{ uid: 2, name: "Amy", age: 20 },
{ uid: 3, name: "camperCat", age: 10 },
];
const existe = users.some((user) => user.uid === 2);
console.log('Este valor es:', existe);
Estos métodos son hechos en 1 línea y eso me gusta mucho 😃
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?