Template Literals
Explicación: Usa comillas invertidas (`) para insertar variables directamente en las cadenas.
Ejemplo:
let name = "Marta"; let greeting = `Hola, ${name}!`;
Desestructuración
Explicación: Extrae valores de objetos o matrices fácilmente.
Ejemplo:
const person = { name: "Ana", age: 25 };
const { name, age } = person; // name = "Ana", age = 25
Operador de Propagación (...)
Explicación: Copia o combina objetos y arrays.
Ejemplo:
const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
Funciones Flecha
Explicación: Una forma más corta de escribir funciones.
Ejemplo:
const sum = (a, b) => a + b;
Array.map
Explicación: Aplica una función a cada elemento de un array.
Ejemplo:
const nums = [1, 2, 3]; const doubled = nums.map(n => n * 2); // [2, 4, 6]
Array.filter
Explicación: Filtra elementos de un array según una condición.
Ejemplo:
const nums = [1, 2, 3, 4]; const evens = nums.filter(n => n % 2 === 0); // [2, 4]
Array.reduce
Explicación: Reduce un array a un solo valor.
Ejemplo:
const nums = [1, 2, 3, 4]; const sum = nums.reduce((total, n) => total + n, 0); // 10
Array.find
Explicación: Encuentra el primer elemento que cumple una condición.
Ejemplo:
const nums = [1, 2, 3, 4]; const firstEven = nums.find(n => n % 2 === 0); // 2
Array.every y Array.some:
Explicación: Verifica si todos (every) o algunos (some) elementos cumplen una condición.
Ejemplo:
const nums = [1, 2, 3, 4]; const allEven = nums.every(n => n % 2 === 0); // false const someEven = nums.some(n => n % 2 === 0); // true
Array.includes
Explicación: Verifica si un array contiene un valor.
Ejemplo:
const nums = [1, 2, 3]; const hasTwo = nums.includes(2); // true
Uso de async y await
Explicación: Maneja funciones asíncronas de manera más sencilla.
Ejemplo:
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
};
fetchData();
Operador de Encadenamiento Opcional (?.)
Explicación: Accede a propiedades profundamente anidadas sin errores si alguna es undefined.
Ejemplo:
const user = { name: 'Pedro', address: { city: 'Madrid' } };
const city = user?.address?.city; // 'Madrid'
Operador Nullish Coalescing (??)
Explicación: Proporciona un valor predeterminado solo si el valor es null o undefined.
Ejemplo:
const name = null;
const greeting = `Hola, ${name ?? 'desconocido'}!`; // 'Hola, desconocido!'
Encadenamiento de Métodos
Explicación: Realiza múltiples operaciones en una sola línea.
Ejemplo:
const result = [1, 2, 3, 4] .filter(n => n % 2 === 0) .map(n => n * 2) .reduce((total, n) => total + n, 0); // 12
Object.entries y Object.fromEntries
Explicación: Convierte un objeto en una matriz de pares clave-valor y viceversa.
Ejemplo:
const obj = { a: 1, b: 2 };
const entries = Object.entries(obj); // [['a', 1], ['b', 2]]
const newObj = Object.fromEntries(entries); // { a: 1, b: 2 }
Parámetros por Defecto:Explicación: Establece valores predeterminados para los parámetros de una función.
Ejemplo:
const greet = (name = 'desconocido') => `Hola, ${name}!`;
greet(); // 'Hola, desconocido!'
Destructuración en Parámetros de Función
Explicación: Extrae propiedades directamente en los parámetros de la función.
Ejemplo:
const printUser = ({ name, age }) => {
console.log(`Nombre: ${name}, Edad: ${age}`);
};
const user = { name: 'Lucas', age: 30 };
printUser(user); // Nombre: Lucas, Edad: 30
Currying
Explicación: Divide una función que toma múltiples argumentos en una serie de funciones que toman un solo argumento.
Ejemplo:
const multiply = a => b => a * b; const double = multiply(2); double(3); // 6
Memoización
Explicación: Almacena resultados de funciones para evitar cálculos repetitivos.
Ejemplo:
const memoize = fn => {
const cache = {};
return (...args) => {
const key = JSON.stringify(args);
if (!cache[key]) {
cache[key] = fn(...args);
}
return cache[key];
};
};
const factorial = memoize(n => {
if (n === 0) return 1;
return n * factorial(n - 1);
});
factorial(5); // 120
Promises
Explicación: Maneja operaciones asíncronas.
Ejemplo:
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Datos cargados');
}, 2000);
});
};
fetchData().then(data => console.log(data)); // 'Datos cargados' después de 2 segundos
Debouncing
Explicación: Agrupa múltiples llamadas de función en un tiempo corto en una sola llamada.
Ejemplo:
const debounce = (func, delay) => {
let debounceTimer;
return function(...args) {
const context = this;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(context, args), delay);
};
};
const log = debounce(() => console.log('Hello'), 1000);
window.addEventListener('resize', log);
Throttling
Explicación: Limita la frecuencia con la que se ejecuta una función.
Ejemplo:
const throttle = (func, limit) => {
let inThrottle;
return function(...args) {
const context = this;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
};
const log = throttle(() => console.log('Hello'), 1000);
window.addEventListener('resize', log);
Array.flat
Explicación: Aplana arrays anidados.
Ejemplo:
const nestedArray = [1, [2, [3, [4]]]]; const flatArray = nestedArray.flat(2); // [1, 2, 3, [4]]
Array.flatMap
Explicación: Mapea cada elemento usando una función de mapeo y luego aplana el resultado.
Ejemplo:
const arr = [1, 2, 3]; const flatMapped = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]
Dynamic Property Names
Explicación: Usa variables como nombres de propiedades.
Ejemplo:
const propName = 'age';
const user = { name: 'Ana', [propName]: 30 };
console.log(user); // { name: 'Ana', age: 30 }
Optional Chaining with Functions:Explicación: Llama a funciones sólo si existen.
Ejemplo:
const user = {
name: 'Pedro',
greet: () => console.log('Hola')
};
user.greet?.(); // 'Hola'
user.nonExistentMethod?.(); // No error
Intl.DateTimeFormat
Explicación: Formatea fechas de manera internacionalizada.
Ejemplo:
const date = new Date();
const formatter = new Intl.DateTimeFormat('es-ES', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
console.log(formatter.format(date)); // '2 de junio de 2024' (por ejemplo)
Intl.NumberFormat
Explicación: Formatea números de manera internacionalizada.
Ejemplo:
const number = 1234567.89;
const formatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR'
});
console.log(formatter.format(number)); // '1.234.567,89 €'
Array.from
Explicación: Crea arrays a partir de objetos parecidos a arrays.
Ejemplo:
const str = 'Hola'; const arr = Array.from(str); // ['H', 'o', 'l', 'a']
Array.of
Explicación: Crea arrays a partir de un número variable de argumentos.
Ejemplo:
const arr = Array.of(1, 2, 3); // [1, 2, 3]
Object.assignExplicación: Crea una copia superficial de un objeto.
Ejemplo:
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
Dynamic ImportsExplicación: Importa módulos bajo demanda.
Ejemplo:
const loadModule = async () => {
const module = await import('./path/to/module.js');
module.default();
};loadModule();
Logical Assignment Operators
Explicación: Asigna un valor a una variable sólo si la variable es null o undefined.
Ejemplo:
let a = null; a ??= 10; // a será 10 porque inicialmente es null
Object.freeze
Explicación: Evita modificaciones a un objeto.
Ejemplo:
const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // No cambiará
Object.seal
Explicación: Evita agregar o eliminar propiedades de un objeto, pero permite modificar las existentes.
Ejemplo:
const obj = { a: 1 };
Object.seal(obj);
obj.a = 2; // Cambiará
obj.b = 3; // No se agregará
Event Delegation
Explicación: Usa un solo manejador de eventos para múltiples elementos.
Ejemplo:
document.getElementById('parent').addEventListener('click', (event) => {
if (event.target && event.target.matches('button.child')) {
console.log('Botón hijo clickeado');
}
});
Editar en modo libre una página web
document.designMode='on'
¿Te ha resultado útil??
0 / 0