Curso
Trucos Programación
Tips que me ayudan a programar en Javascript y React
Módulos (5)
-
Array.isArray()
Array.isArray()
El método Array.isArray() comprueba si un valor pasado es un Array o no. Permite pasar un argumento, un valor de cualquier tipo. A continuación, se comprueba este valor para ver si es del tipo Array, si es, devuelve true, si no lo es, devuelve false. // las siguientes llamadas devuelven true Array.isArray([]); Array.isArray([1]); Array.isArray(new Array()); Array.isArray(new Array('a', 'b', 'c', 'd')); Array.isArray(new Array(3)); // Hecho poco conocido: Array.prototype es también un array: Array.isArray(Array.prototype); // todas las siguientes llamadas devuelven false Array.isArray(); Array.isArray({}); Array.isArray(null); Array.isArray(undefined); Array.isArray(17); Array.isArray('Array'); Array.isArray(true); Array.isArray(false); Array.isArray({ __proto__: Array.prototype });
-
Buscar cosas en un array.
Buscar cosas en un array de objetos por uno de sus valores y devolver el valor de otro atributo del objeto
El método find() devuelve el valor del primer elemento del array que cumple la función de prueba proporcionada. const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); console.log(found); // expected output: 12 const rules = [{ruleId: "333",level: "1"},{ruleId: "444",level: "2"}] const value = rules.find(obs => obs.ruleId === "333").level console.log(value); // 1 En este ejemplo la función find devuelve el primer objeto que cumple la función obs.ruleId === "333" --> {ruleId: "333",level: "1"} Desde esto objeto podemos acceder a su propiedad 'level' para que nos la devuelva.
-
Importar y exportar cosas
Formas de Importar y exportar componentes, funciones, módulos...
import * as ACTION from '../actions/actions'; Es como decir, impórtame todo y me lo metes en una constante que es ACTION Luego se puede consumir así: ACTION.getWriteoffsFilterCallInit() Para exportarlo se hará de la siguiente manera: export const getWriteoffsFilterCallInit = () => ({type: ACTION.GET_WRITEOFFS_FILTERS_INIT}); export const getActionsModalCallInit = () => ({type: ACTION.GET_WRITEOFFS_ACTIONS_MODAL_INIT}); Y desde ACTION podremos acceder a todas las funciones.
-
Vaciar Objetos y funcionamiento de función reduce()
Eliminar propiedades vacías de un objeto
const clean = (obj) => Object.entries(obj).reduce((acum, [key, value]) => (value == null ? acum : (acum[key] = value, acum)), {}); Object.entries() devuelve una matriz de pares propios de una propiedad enumerable [key, value] de un objeto dado, en el mismo orden que es proporcionado por for...in (La diferencia es que un bucle for-in enumera las propiedades en la cadena de prototipos). const persona = {nombre: 'Roberto', apellido: 'Fernández', profesión: null, apodo:'', hijos: undefined}; Object.entries(persona) --> [ [ 'nombre', 'Roberto' ], [ 'apellido', 'Fernández' ], [ 'profesión', null ], [ 'apodo', '' ], [ 'hijos', undefined ] ] reduce() ejecuta una función reductora sobre cada elemento de un array, devolviendo como resultado un único valor. const array1 = [1, 2, 3, 4]; const initialValue = 7; const sumWithInitial = array1.reduce((acumulador, currentValue) => acumulador+ currentValue, initialValue ); ---> // 17 --> 7+1+2+3+4. Sin initial value --> // 10 --> 1+2+3+4 initialValue(Opcional): Un valor a usar como primer argumento en la primera llamada de la función callback. Si no se proporciona el valorInicial, el primer elemento del array será utilizado y saltado. Llamando a reduce() sobre un array vacío sin un valorInicial lanzará un TypeError. La primera vez que se llama la función, acumulador y valorActual pueden tener uno de dos valores. Si se proveyó un valorInicial al llamar a reduce, entonces acumulador será igual al valorInicial y valorActual será igual al primer elemento del array. Si no se proveyó un valorInicial, entonces acumulador será igual al primer valor en el array y valorActual será el segundo. La función clean devuelve un objeto donde no se guarda los elementos nulos, pero se podría añadir a la condición otros atributos con otros valores: value === '' || value === null || value === undefined; reduce((acum, [key, value]) La función...
-
async / await
Cómo usar Async / Await para escribir un código mejor en JavaScript
Cómo usar Async / Await para escribir un código mejor en JavaScript async: La palabra “async” ante una función significa solamente una cosa: que la función siempre devolverá una promesa. Otros valores serán envueltos y resueltos en una promesa automáticamente. Por ejemplo, esta función devuelve una promesa resuelta con el resultado de 1 const returOne = async () => { return 7; } returOne().then(console.log()); // 7 Es lo mismo que esto: const returTwo = () => { return Promise.resolve (2); } returTwo().then(console.log()); // 2 async se asegura de que la función devuelva una promesa, o envuelve las no promesas y las transforma en una. Bastante simple, ¿correcto? Pero no solo eso. Hay otra palabra, await, que solo trabaja dentro de funciones async y es muy interesante. await hace que JavaScript espere hasta que la promesa responda y devuelve su resultado. OJO con esto: const showNumber = () => { return new Promise(resolve => { setTimeout(()=> { resolve('999999'); }, 5000) }) } const msg = async () => { const msg =await showNumber(); ---> Esperará 5 segundos y luego mostrará 'Message' '999999' console.log('Message', msg); } msg().then(console.log('HOOOOOOOLAAAAAAAA')); ---> El then no hace que se espere los 5 segundos.... ASINCRONO: pueden suceder varias cosas relacionadas sin esperar a que se complete la acción anterior. Cómo funcionan las promesas en JavaScript El objeto Promise en JavaScript representa una operación asíncrona (y su valor resultante) que eventualmente se completará (o fallará). Una Promise puede estar en uno de estos estados: pending (pendiente): estado inicial, ni cumplida ni rechazada. fulfilled (cumplida): significa que la operación se completó con éxito. rejected (rechazada): significa que la operación falló. Link interesante: Más link