Aprenda 127 fragmentos de JavaScript esenciales que puede comprender en 30 segundos o menos. Estos fragmentos cubren una amplia gama de temas, desde sintaxis básica hasta conceptos avanzados, por lo que podrá mejorar sus habilidades de JavaScript de forma rápida y sencilla.
JavaScript es uno de los lenguajes más populares que puedes aprender. Como dice mucha gente: "Si vas a aprender solo un lenguaje de programación, elige JavaScript".
Este fragmento regresa truesi la función de predicado regresa truepara todos los elementos de una colección y falseen caso contrario. Puede omitir el segundo argumento fnsi desea utilizarlo Booleancomo valor predeterminado.
const all = (arr, fn = Boolean) => arr.every(fn);
all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true
Este fragmento comprueba si todos los elementos de la matriz son iguales.
const allEqual = arr => arr.every(val => val === arr[0]);
allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true
Este fragmento comprueba si dos números son aproximadamente iguales entre sí, con una pequeña diferencia.
const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;
approximatelyEqual(Math.PI / 2.0, 1.5708); // true
Este fragmento convierte los elementos en cadenas con valores separados por comas.
const arrayToCSV = (arr, delimiter = ',') =>
arr.map(v => v.map(x => `"${x}"`).join(delimiter)).join('\n');
arrayToCSV([['a', 'b'], ['c', 'd']]); // '"a","b"\n"c","d"'
arrayToCSV([['a', 'b'], ['c', 'd']], ';'); // '"a";"b"\n"c";"d"'```
Este fragmento convierte los elementos de una matriz en <li>etiquetas y las agrega a la lista del ID proporcionado.
const arrayToHtmlList = (arr, listID) =>
(el => (
(el = document.querySelector('#' + listID)),
(el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
))();
arrayToHtmlList(['item 1', 'item 2'], 'myListID');
Este fragmento ejecuta una función y devuelve el resultado o el objeto de error detectado.
const attempt = (fn, ...args) => {
try {
return fn(...args);
} catch (e) {
return e instanceof Error ? e : new Error(e);
}
};
var elements = attempt(function(selector) {
return document.querySelectorAll(selector);
}, '>_>');
if (elements instanceof Error) elements = []; // elements = []
Este fragmento devuelve el promedio de dos o más valores numéricos.
const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length;
average(...[1, 2, 3]); // 2
average(1, 2, 3); // 2
Este fragmento devuelve el promedio de una matriz después de realizar inicialmente el mapeo de cada elemento a un valor usando una función determinada.
const averageBy = (arr, fn) =>
arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => acc + val, 0) /
arr.length;
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n); // 5
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 5
Este fragmento divide los valores en dos grupos y luego coloca un elemento verdadero filteren el primer grupo y, en caso contrario, en el segundo grupo.
Puede utilizar Array.prototype.reduce()y Array.prototype.push()para agregar elementos a grupos basados en filter.
const bifurcate = (arr, filter) =>
arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);
bifurcate(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]);
// [ ['beep', 'boop', 'bar'], ['foo'] ]
Este fragmento divide los valores en dos grupos, según una función de predicado. Si la función de predicado devuelve un valor verdadero, el elemento se colocará en el primer grupo. En caso contrario, quedará colocado en el segundo grupo.
Puede utilizar Array.prototype.reduce()y Array.prototype.push()para agregar elementos a grupos, según el valor devuelto por fnpara cada elemento.
const bifurcateBy = (arr, fn) =>
arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);
bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b');
// [ ['beep', 'boop', 'bar'], ['foo'] ]
Este fragmento comprueba si la parte inferior de una página es visible.
const bottomVisible = () =>
document.documentElement.clientHeight + window.scrollY >=
(document.documentElement.scrollHeight || document.documentElement.clientHeight);
bottomVisible(); // true
Este fragmento devuelve la longitud de una cadena en bytes.
const byteSize = str => new Blob([str]).size;
byteSize('😀'); // 4
byteSize('Hello World'); // 11
Este fragmento escribe en mayúscula la primera letra de una cadena.
const capitalize = ([first, ...rest]) =>
first.toUpperCase() + rest.join('');
capitalize('fooBar'); // 'FooBar'
capitalize('fooBar', true); // 'Foobar'
Este fragmento escribe en mayúscula la primera letra de cada palabra en una cadena determinada.
const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
capitalizeEveryWord('hello world!'); // 'Hello World!'
Este fragmento convierte un valor que no es de matriz en una matriz.
const castArray = val => (Array.isArray(val) ? val : [val]);
castArray('foo'); // ['foo']
castArray([1]); // [1]
dieciséis.compact
Este fragmento elimina valores falsos de una matriz.
const compact = arr => arr.filter(Boolean);
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]);
// [ 1, 2, 3, 'a', 's', 34 ]
Este fragmento cuenta las apariciones de un valor en una matriz.
const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3
Este fragmento se utiliza existsSync()para comprobar si existe un directorio y luego mkdirSync()crearlo si no es así.
const fs = require('fs');
const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);
createDirIfNotExists('test');
// creates the directory 'test', if it doesn't exist
Este fragmento devuelve la URL actual.
const currentURL = () => window.location.href;
currentURL(); // 'https://medium.com/@fatosmorina'
Este fragmento obtiene el día del año de un Dateobjeto.
const dayOfYear = date =>
Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date()); // 272
Este fragmento convierte la primera letra de una cadena en minúscula.
const decapitalize = ([first, ...rest]) =>
first.toLowerCase() + rest.join('')
decapitalize('FooBar'); // 'fooBar'
decapitalize('FooBar'); // 'fooBar'
Este fragmento aplana una matriz de forma recursiva.
const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));
deepFlatten([1, [2], [[3], 4], 5]); // [1,2,3,4,5]
Este fragmento asigna valores predeterminados para todas las propiedades de un objeto que no están definidas .
const defaults = (obj, ...defs) => Object.assign({}, obj, ...defs.reverse(), obj);
defaults({ a: 1 }, { b: 2 }, { b: 6 }, { a: 3 }); // { a: 1, b: 2 }
Este fragmento retrasa la ejecución de una función hasta que se borra la pila de llamadas actual.
const defer = (fn, ...args) => setTimeout(fn, 1, ...args);
defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a'
Este fragmento de código se puede utilizar para convertir un valor de grados a radianes.
const degreesToRads = deg => (deg * Math.PI) / 180.0;
degreesToRads(90.0); // ~1.5708
Este fragmento encuentra la diferencia entre dos matrices.
const difference = (a, b) => {
const s = new Set(b);
return a.filter(x => !s.has(x));
};
difference([1, 2, 3], [1, 2, 4]); // [3]
Este método devuelve la diferencia entre dos matrices, después de aplicar una función determinada a cada elemento de ambas listas.
const differenceBy = (a, b, fn) => {
const s = new Set(b.map(fn));
return a.filter(x => !s.has(fn(x)));
};
differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [1.2]
differenceBy([{ x: 2 }, { x: 1 }], [{ x: 1 }], v => v.x); // [ { x: 2 } ]
Este fragmento elimina los valores para los cuales devuelve la función de comparación false.
const differenceWith = (arr, val, comp) => arr.filter(a => val.findIndex(b => comp(a, b)) === -1);
differenceWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0], (a, b) => Math.round(a) === Math.round(b));
// [1, 1.2]
Este fragmento obtiene un número como entrada y devuelve una matriz de sus dígitos.
const digitize = n => [...`${n}`].map(i => parseInt(i));
digitize(431); // [4, 3, 1]
Este fragmento devuelve la distancia entre dos puntos calculando la distancia euclidiana.
const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);
distance(1, 1, 2, 3); // 2.23606797749979
Este fragmento devuelve una nueva matriz con nelementos eliminados de la izquierda.
const drop = (arr, n = 1) => arr.slice(n);
drop([1, 2, 3]); // [2,3]
drop([1, 2, 3], 2); // [3]
drop([1, 2, 3], 42); // []
Este fragmento devuelve una nueva matriz con nelementos eliminados de la derecha.
const dropRight = (arr, n = 1) => arr.slice(0, -n);
dropRight([1, 2, 3]); // [1,2]
dropRight([1, 2, 3], 2); // [1]
dropRight([1, 2, 3], 42); // []
Este fragmento elimina elementos del lado derecho de una matriz hasta que la función pasada regrese true.
const dropRightWhile = (arr, func) => {
while (arr.length > 0 && !func(arr[arr.length - 1])) arr = arr.slice(0, -1);
return arr;
};
dropRightWhile([1, 2, 3, 4], n => n < 3); // [1, 2]
Este fragmento elimina elementos de una matriz hasta que la función pasada regrese true.
const dropWhile = (arr, func) => {
while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);
return arr;
};
dropWhile([1, 2, 3, 4], n => n >= 3); // [3,4]
Este fragmento comprueba si el elemento principal contiene al elemento secundario.
const elementContains = (parent, child) => parent !== child && parent.contains(child);
elementContains(document.querySelector('head'), document.querySelector('title')); // true
elementContains(document.querySelector('body'), document.querySelector('body')); // false
Este fragmento elimina valores duplicados en una matriz.
const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));
filterNonUnique([1, 2, 2, 3, 4, 4, 5]); // [1, 3, 5]
Este fragmento devuelve la primera clave que satisface una función determinada.
const findKey = (obj, fn) => Object.keys(obj).find(key => fn(obj[key], key, obj));
findKey(
{
barney: { age: 36, active: true },
fred: { age: 40, active: false },
pebbles: { age: 1, active: true }
},
o => o['active']
); // 'barney'
Este fragmento devuelve el último elemento para el cual una función determinada devuelve un valor verdadero.
const findLast = (arr, fn) => arr.filter(fn).pop();
findLast([1, 2, 3, 4], n => n % 2 === 1); // 3
Este fragmento aplana una matriz hasta una profundidad específica mediante recursividad.
const flatten = (arr, depth = 1) =>
arr.reduce((a, v) => a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v), []);
flatten([1, [2], 3, 4]); // [1, 2, 3, 4]
flatten([1, [2, [3, [4, 5], 6], 7], 8], 2); // [1, 2, 3, [4, 5], 6, 7, 8]
Este fragmento ejecuta una función para cada elemento de una matriz a partir del último elemento de la matriz.
const forEachRight = (arr, callback) =>
arr
.slice(0)
.reverse()
.forEach(callback);
forEachRight([1, 2, 3, 4], val => console.log(val)); // '4', '3', '2', '1'
Este fragmento itera en cada propiedad de un objeto y itera una devolución de llamada para cada una respectivamente.
const forOwn = (obj, fn) => Object.keys(obj).forEach(key => fn(obj[key], key, obj));
forOwn({ foo: 'bar', a: 1 }, v => console.log(v)); // 'bar', 1
Este fragmento imprime el nombre de una función en la consola.
const functionName = fn => (console.debug(fn.name), fn);
functionName(Math.max); // max (logged in debug channel of console)
Este fragmento se puede utilizar para obtener la hora de un Dateobjeto como una cadena.
const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);
getColonTimeFromDate(new Date()); // "08:38:00"
Este fragmento se puede utilizar para encontrar la diferencia en días entre dos fechas.
const getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
(dateFinal - dateInitial) / (1000 * 3600 * 24);
getDaysDiffBetweenDates(new Date('2019-01-13'), new Date('2019-01-15')); // 2
Este fragmento se puede utilizar para obtener el valor de una regla CSS para un elemento en particular.
const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];
getStyle(document.querySelector('p'), 'font-size'); // '16px'
Este fragmento se puede utilizar para obtener el tipo de valor.
const getType = v =>
v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
getType(new Set([1, 2, 3])); // 'set'
Este fragmento comprueba si un elemento tiene una clase particular.
const hasClass = (el, className) => el.classList.contains(className);
hasClass(document.querySelector('p.special'), 'special'); // true
Este fragmento devuelve el valor headde una lista.
const head = arr => arr[0];
head([1, 2, 3]); // 1
Este fragmento se puede utilizar para ocultar todos los elementos especificados.
const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));
hide(document.querySelectorAll('img')); // Hides all <img> elements on the page
Este fragmento se puede utilizar para redirigir de HTTP a HTTPS en un dominio particular.
const httpsRedirect = () => {
if (location.protocol !== 'https:') location.replace('https://' + location.href.split('//')[1]);
};
httpsRedirect(); // If you are on http://mydomain.com, you are redirected to https://mydomain.com
Este fragmento se puede utilizar para obtener todos los índices de un valor en una matriz, que devuelve una matriz vacía, en caso de que este valor no esté incluido en ella.
const indexOfAll = (arr, val) => arr.reduce((acc, el, i) => (el === val ? [...acc, i] : acc), []);
indexOfAll([1, 2, 3, 1, 2, 3], 1); // [0,3]
indexOfAll([1, 2, 3], 4); // []
Este fragmento devuelve todos los elementos de una matriz excepto el último.
const initial = arr => arr.slice(0, -1);
initial([1, 2, 3]); // [1,2]const initial = arr => arr.slice(0, -1);
initial([1, 2, 3]); // [1,2]
Este fragmento se puede utilizar para insertar una cadena HTML después del final de un elemento en particular.
const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString);
insertAfter(document.getElementById('myId'), '<p>after</p>'); // <div id="myId">...</div> <p>after</p>
Este fragmento se puede utilizar para insertar una cadena HTML antes de un elemento en particular.
const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);
insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div>
Este fragmento se puede utilizar para obtener una matriz con elementos incluidos en otras dos matrices.
const intersection = (a, b) => {
const s = new Set(b);
return a.filter(x => s.has(x));
};
intersection([1, 2, 3], [4, 3, 2]); // [2, 3]
Este fragmento se puede utilizar para devolver una lista de elementos que existen en ambas matrices, después de que se haya ejecutado una función particular en cada elemento de ambas matrices.
const intersectionBy = (a, b, fn) => {
const s = new Set(b.map(fn));
return a.filter(x => s.has(fn(x)));
};
intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor); // [2.1]
Este fragmento se puede utilizar para devolver una lista de elementos que existen en ambas matrices mediante el uso de una función de comparación.
const intersectionWith = (a, b, comp) => a.filter(x => b.findIndex(y => comp(x, y)) !== -1);
intersectionWith([1, 1.2, 1.5, 3, 0], [1.9, 3, 0, 3.9], (a, b) => Math.round(a) === Math.round(b)); // [1.5, 3, 0]
Este fragmento se puede utilizar para comprobar si un valor es de un tipo particular.
const is = (type, val) => ![, null].includes(val) && val.constructor === type;
is(Array, [1]); // true
is(ArrayBuffer, new ArrayBuffer()); // true
is(Map, new Map()); // true
is(RegExp, /./g); // true
is(Set, new Set()); // true
is(WeakMap, new WeakMap()); // true
is(WeakSet, new WeakSet()); // true
is(String, ''); // true
is(String, new String('')); // true
is(Number, 1); // true
is(Number, new Number(1)); // true
is(Boolean, true); // true
is(Boolean, new Boolean(true)); // true
Este fragmento se puede utilizar para comprobar si una fecha es posterior a otra fecha.
const isAfterDate = (dateA, dateB) => dateA > dateB;
isAfterDate(new Date(2010, 10, 21), new Date(2010, 10, 20)); // true
Este fragmento se puede utilizar para comprobar si una cadena en particular es un anagrama de otra cadena.
const isAnagram = (str1, str2) => {
const normalize = str =>
str
.toLowerCase()
.replace(/[^a-z0-9]/gi, '')
.split('')
.sort()
.join('');
return normalize(str1) === normalize(str2);
};
isAnagram('iceman', 'cinema'); // true
Este fragmento se puede utilizar para comprobar si un argumento proporcionado es iterable como una matriz.
const isArrayLike = obj => obj != null && typeof obj[Symbol.iterator] === 'function';
isArrayLike(document.querySelectorAll('.className')); // true
isArrayLike('abc'); // true
isArrayLike(null); // false
Este fragmento se puede utilizar para comprobar si una fecha es anterior a otra.
const isBeforeDate = (dateA, dateB) => dateA < dateB;
isBeforeDate(new Date(2010, 10, 20), new Date(2010, 10, 21)); // true
Este fragmento se puede utilizar para comprobar si un argumento es booleano.
const isBoolean = val => typeof val === 'boolean';
isBoolean(null); // false
isBoolean(false); // true
Este fragmento se puede utilizar para determinar si el entorno de ejecución actual es un navegador. Esto es útil para evitar errores al ejecutar módulos de front-end en el servidor (Node).
const isBrowser = () => ![typeof window, typeof document].includes('undefined');
isBrowser(); // true (browser)
isBrowser(); // false (Node)
Este fragmento se puede utilizar para determinar si la pestaña del navegador está enfocada.
const isBrowserTabFocused = () => !document.hidden;
isBrowserTabFocused(); // true
Este fragmento se puede utilizar para determinar si una cadena está en minúsculas.
const isLowerCase = str => str === str.toLowerCase();
isLowerCase('abc'); // true
isLowerCase('a3@$'); // true
isLowerCase('Ab4'); // false
Este fragmento se puede utilizar para comprobar si un valor es nullo undefined.
const isNil = val => val === undefined || val === null;
isNil(null); // true
isNil(undefined); // true
Este fragmento se puede utilizar para comprobar si un valor es null.
const isNull = val => val === null;
isNull(null); // true
Este fragmento se puede utilizar para comprobar si un valor proporcionado es un número.
const isNumber = val => typeof val === 'number';
isNumber('1'); // false
isNumber(1); // true
Este fragmento se puede utilizar para comprobar si un valor proporcionado es un objeto. Utiliza el constructor de objetos para crear un contenedor de objetos para el valor dado.
Si ya es un objeto, se devolverá un tipo de objeto que corresponda al valor dado. De lo contrario, se devolverá un nuevo objeto.
const isObject = obj => obj === Object(obj);
isObject([1, 2, 3, 4]); // true
isObject([]); // true
isObject(['Hello!']); // true
isObject({ a: 1 }); // true
isObject({}); // true
isObject(true); // false
Este fragmento se puede utilizar para comprobar si un valor no lo es nully si typeofes "objeto".
const isObjectLike = val => val !== null && typeof val === 'object';
isObjectLike({}); // true
isObjectLike([1, 2, 3]); // true
isObjectLike(x => x); // false
isObjectLike(null); // false
Este fragmento comprueba si un valor es un objeto creado por el constructor de objetos.
const isPlainObject = val => !!val && typeof val === 'object' && val.constructor === Object;
isPlainObject({ a: 1 }); // true
isPlainObject(new Map()); // false
Este fragmento comprueba si un objeto se parece a un archivo Promise.
const isPromiseLike = obj =>
obj !== null &&
(typeof obj === 'object' || typeof obj === 'function') &&
typeof obj.then === 'function';
isPromiseLike({
then: function() {
return '';
}
}); // true
isPromiseLike(null); // false
isPromiseLike({}); // false
Este fragmento se puede utilizar para comprobar si dos fechas son iguales.
const isSameDate = (dateA, dateB) => dateA.toISOString() === dateB.toISOString();
isSameDate(new Date(2010, 10, 20), new Date(2010, 10, 20)); // true
Este fragmento se puede utilizar para comprobar si un argumento es una cadena.
const isString = val => typeof val === 'string';
isString('10'); // true
Este fragmento se puede utilizar para comprobar si un argumento es un símbolo.
const isSymbol = val => typeof val === 'symbol';
isSymbol(Symbol('x')); // true
Este fragmento se puede utilizar para comprobar si un valor es undefined.
const isUndefined = val => val === undefined;
isUndefined(undefined); // true
Este fragmento se puede utilizar para comprobar si una cadena está en mayúsculas.
const isUpperCase = str => str === str.toUpperCase();
isUpperCase('ABC'); // true
isLowerCase('A3@$'); // true
isLowerCase('aB4'); // false
Este fragmento se puede utilizar para comprobar si una cadena es un JSON válido.
const isValidJSON = str => {
try {
JSON.parse(str);
return true;
} catch (e) {
return false;
}
};
isValidJSON('{"name":"Adam","age":20}'); // true
isValidJSON('{"name":"Adam",age:"20"}'); // false
isValidJSON(null); // true
Este fragmento devuelve el último elemento de una matriz.
const last = arr => arr[arr.length - 1];
last([1, 2, 3]); // 3
Este fragmento compara dos objetos para determinar si el primero contiene los mismos valores de propiedad que el segundo.
const matches = (obj, source) =>
Object.keys(source).every(key => obj.hasOwnProperty(key) && obj[key] === source[key]);
matches({ age: 25, hair: 'long', beard: true }, { hair: 'long', beard: true }); // true
matches({ hair: 'long', beard: true }, { age: 25, hair: 'long', beard: true }); // false
Este fragmento se puede utilizar para obtener la fecha más reciente.
const maxDate = (...dates) => new Date(Math.max.apply(null, ...dates));
const array = [
new Date(2017, 4, 13),
new Date(2018, 2, 12),
new Date(2016, 0, 10),
new Date(2016, 0, 9)
];
maxDate(array); // 2018-03-11T22:00:00.000Z
Este fragmento devuelve los nelementos más grandes de una lista. Si nes mayor o igual que la longitud de la lista, devolverá la lista original (ordenada en orden descendente).
const maxN = (arr, n = 1) => [...arr].sort((a, b) => b - a).slice(0, n);
maxN([1, 2, 3]); // [3]
maxN([1, 2, 3], 2); // [3,2]
Este fragmento se puede utilizar para obtener la fecha más temprana.
const minDate = (...dates) => new Date(Math.min.apply(null, ...dates));
const array = [
new Date(2017, 4, 13),
new Date(2018, 2, 12),
new Date(2016, 0, 10),
new Date(2016, 0, 9)
];
minDate(array); // 2016-01-08T22:00:00.000Z
Este fragmento devuelve los nelementos más pequeños de una lista. Si nes mayor o igual que la longitud de la lista, devolverá la lista original (ordenada en orden ascendente).
const minN = (arr, n = 1) => [...arr].sort((a, b) => a - b).slice(0, n);
minN([1, 2, 3]); // [1]
minN([1, 2, 3], 2); // [1,2]
Este fragmento se puede utilizar para aplicar el operador not ( !) a una función de predicado con sus argumentos.
const negate = func => (...args) => !func(...args);
[1, 2, 3, 4, 5, 6].filter(negate(n => n % 2 === 0)); // [ 1, 3, 5 ]
Este fragmento se puede utilizar para convertir a nodeListen una matriz.
const nodeListToArray = nodeList => [...nodeList];
nodeListToArray(document.childNodes); // [ <!DOCTYPE html>, html ]
Este fragmento se puede utilizar para paduna cadena en ambos lados con un carácter específico si es más corto que la longitud especificada.
const pad = (str, length, char = ' ') =>
str.padStart((str.length + length) / 2, char).padEnd(length, char);
pad('cat', 8); // ' cat '
pad(String(42), 6, '0'); // '004200'
pad('foobar', 3); // 'foobar'
Este fragmento se puede utilizar para convertir un ángulo de radianes a grados.
const radsToDegrees = rad => (rad * 180.0) / Math.PI;
radsToDegrees(Math.PI / 2); // 90
Este fragmento se puede utilizar para generar un código de color hexadecimal aleatorio.
const randomHexColorCode = () => {
let n = (Math.random() * 0xfffff * 1000000).toString(16);
return '#' + n.slice(0, 6);
};
randomHexColorCode(); // "#e34155"
Este fragmento se puede utilizar para generar una matriz con nnúmeros enteros aleatorios en un rango específico.
const randomIntArrayInRange = (min, max, n = 1) =>
Array.from({ length: n }, () => Math.floor(Math.random() * (max - min + 1)) + min);
randomIntArrayInRange(12, 35, 10); // [ 34, 14, 27, 17, 30, 27, 20, 26, 21, 14 ]
Este fragmento se puede utilizar para generar un número entero aleatorio en un rango específico.
const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
randomIntegerInRange(0, 5); // 3
Este fragmento se puede utilizar para devolver un número aleatorio en un rango específico.
const randomNumberInRange = (min, max) => Math.random() * (max - min) + min;
randomNumberInRange(2, 10); // 6.0211363285087005
Este fragmento se puede utilizar para leer un archivo obteniendo una serie de líneas de un archivo.
const fs = require('fs');
const readFileLines = filename =>
fs
.readFileSync(filename)
.toString('UTF8')
.split('\n');
let arr = readFileLines('test.txt');
console.log(arr); // ['line1', 'line2', 'line3']
Este fragmento se puede utilizar para realizar una redirección a una URL específica.
const redirect = (url, asLink = true) =>
asLink ? (window.location.href = url) : window.location.replace(url);
redirect('https://google.com');
Este fragmento se puede utilizar para invertir una cadena.
const reverseString = str => [...str].reverse().join('');
reverseString('foobar'); // 'raboof'
Este fragmento se puede utilizar para redondear un número a un número específico de dígitos.
const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);
round(1.005, 2); // 1.01
Este fragmento se puede utilizar para ejecutar una serie de promesas en serie.
const runPromisesInSeries = ps => ps.reduce((p, next) => p.then(next), Promise.resolve());
const delay = d => new Promise(r => setTimeout(r, d));
runPromisesInSeries([() => delay(1000), () => delay(2000)]);
// Executes each promise sequentially, taking a total of 3 seconds to complete
Este fragmento se puede utilizar para obtener un número aleatorio de una matriz.
const sample = arr => arr[Math.floor(Math.random() * arr.length)];
sample([3, 7, 9, 11]); // 9
Este fragmento se puede utilizar para obtener nelementos aleatorios desde posiciones únicas de una matriz hasta el tamaño de la matriz. Los elementos de la matriz se mezclan mediante el algoritmo de Fisher-Yates .
const sampleSize = ([...arr], n = 1) => {
let m = arr.length;
while (m) {
const i = Math.floor(Math.random() * m--);
[arr[m], arr[i]] = [arr[i], arr[m]];
}
return arr.slice(0, n);
};
sampleSize([1, 2, 3], 2); // [3,1]
sampleSize([1, 2, 3], 4); // [2,3,1]
Este fragmento se puede utilizar para desplazarse suavemente hasta la parte superior de la página actual.
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
};
scrollToTop();
Este fragmento se puede utilizar para serializar un par nombre-valor de cookie en una cadena de encabezado Set-Cookie.
const serializeCookie = (name, val) => `${encodeURIComponent(name)}=${encodeURIComponent(val)}`;
serializeCookie('foo', 'bar'); // 'foo=bar'
Este fragmento se puede utilizar para establecer el valor de una regla CSS para un elemento en particular.
const setStyle = (el, ruleName, val) => (el.style[ruleName] = val);
setStyle(document.querySelector('p'), 'font-size', '20px');
// The first <p> element on the page will have a font-size of 20px
Este fragmento se puede utilizar para crear un clon superficial de un objeto.
const shallowClone = obj => Object.assign({}, obj);
const a = { x: true, y: 1 };
const b = shallowClone(a); // a !== b
Este fragmento se puede utilizar para mostrar todos los elementos especificados.
const show = (...el) => [...el].forEach(e => (e.style.display = ''));
show(...document.querySelectorAll('img')); // Shows all <img> elements on the page
Este fragmento se puede utilizar para ordenar los elementos de una matriz de forma aleatoria utilizando el algoritmo de Fisher-Yates .
const shuffle = ([...arr]) => {
let m = arr.length;
while (m) {
const i = Math.floor(Math.random() * m--);
[arr[m], arr[i]] = [arr[i], arr[m]];
}
return arr;
};
const foo = [1, 2, 3];
shuffle(foo); // [2, 3, 1], foo = [1, 2, 3]
Este fragmento se puede utilizar para devolver una matriz de elementos que aparecen en dos matrices.
https://medium.com/better-programming/127-helpful-javascript-snippets-you-can-learn-in-30-seconds-or-less-part-6-of-6-862a6403d334
Este fragmento se puede utilizar para retrasar la ejecución de una función asincrónica poniéndola en suspensión.
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
async function sleepyWork() {
console.log("I'm going to sleep for 1 second.");
await sleep(1000);
console.log('I woke up after 1 second.');
}
Este fragmento se puede utilizar para desplazar suavemente el elemento en el que se llama al área visible de la ventana del navegador.
const smoothScroll = element =>
document.querySelector(element).scrollIntoView({
behavior: 'smooth'
});
smoothScroll('#fooBar'); // scrolls smoothly to the element with the id fooBar
smoothScroll('.fooBar'); // scrolls smoothly to the first element with a class of fooBar
Este fragmento se puede utilizar para ordenar alfabéticamente los caracteres de una cadena.
const sortCharactersInString = str => [...str].sort((a, b) => a.localeCompare(b)).join('');
sortCharactersInString('cabbage'); // 'aabbceg'
Este fragmento se puede utilizar para dividir una cadena de varias líneas en una matriz de líneas.
const splitLines = str => str.split(/\r?\n/);
splitLines('This\nis a\nmultiline\nstring.\n'); // ['This', 'is a', 'multiline', 'string.' , '']
Este fragmento se puede utilizar para eliminar etiquetas HTML/XML de una cadena.
const stripHTMLTags = str => str.replace(/<[^>]*>/g, '');
stripHTMLTags('<p><em>lorem</em> <strong>ipsum</strong></p>'); // 'lorem ipsum'
Este fragmento se puede utilizar para encontrar la suma de dos o más números o matrices.
const sum = (...arr) => [...arr].reduce((acc, val) => acc + val, 0);
sum(1, 2, 3, 4); // 10
sum(...[1, 2, 3, 4]); // 10
Este fragmento se puede utilizar para obtener una matriz con todos los elementos de una matriz excepto el primero. Si la matriz tiene solo un elemento, entonces se devolverá una matriz con ese elemento.
const tail = arr => (arr.length > 1 ? arr.slice(1) : arr);
tail([1, 2, 3]); // [2,3]
tail([1]); // [1]
Este fragmento se puede utilizar para obtener una matriz con nelementos eliminados desde el principio.
const take = (arr, n = 1) => arr.slice(0, n);
take([1, 2, 3], 5); // [1, 2, 3]
take([1, 2, 3], 0); // []
Este fragmento se puede utilizar para obtener una matriz con nelementos eliminados del final.
const takeRight = (arr, n = 1) => arr.slice(arr.length - n, arr.length);
takeRight([1, 2, 3], 2); // [ 2, 3 ]
takeRight([1, 2, 3]); // [3]
Este fragmento se puede utilizar para averiguar el tiempo que lleva ejecutar una función.
const timeTaken = callback => {
console.time('timeTaken');
const r = callback();
console.timeEnd('timeTaken');
return r;
};
timeTaken(() => Math.pow(2, 10)); // 1024, (logged): timeTaken: 0.02099609375ms
Este fragmento se puede utilizar para iterar los ntiempos de devolución de llamada.
const times = (n, fn, context = undefined) => {
let i = 0;
while (fn.call(context, i) !== false && ++i < n) {}
};
var output = '';
times(5, i => (output += i));
console.log(output); // 01234
Este fragmento se puede utilizar para formatear un número como si fuera una moneda.
const toCurrency = (n, curr, LanguageFormat = undefined) =>
Intl.NumberFormat(LanguageFormat, { style: 'currency', currency: curr }).format(n);
toCurrency(123456.789, 'EUR'); // €123,456.79 | currency: Euro | currencyLangFormat: Local
toCurrency(123456.789, 'USD', 'en-us'); // $123,456.79 | currency: US Dollar | currencyLangFormat: English (United States)
toCurrency(123456.789, 'USD', 'fa'); // ۱۲۳٬۴۵۶٫۷۹ $ | currency: US Dollar | currencyLangFormat: Farsi
toCurrency(322342436423.2435, 'JPY'); // ¥322,342,436,423 | currency: Japanese Yen | currencyLangFormat: Local
toCurrency(322342436423.2435, 'JPY', 'fi'); // 322 342 436 423 ¥ | currency: Japanese Yen | currencyLangFormat: Finnish
Este fragmento utiliza la toLocaleString()función para convertir la aritmética de punto flotante al formato de marca decimal utilizando un número para crear una cadena separada por comas.
const toDecimalMark = num => num.toLocaleString('en-US');
toDecimalMark(12305030388.9087); // "12,305,030,388.909"
Este fragmento se puede utilizar para alternar una clase para un elemento.
const toggleClass = (el, className) => el.classList.toggle(className);
toggleClass(document.querySelector('p.special'), 'special'); // The paragraph will not have the 'special' class anymore
Este fragmento se puede utilizar para obtener una representación de cadena de la fecha de mañana.
const tomorrow = () => {
let t = new Date();
t.setDate(t.getDate() + 1);
return t.toISOString().split('T')[0];
};
tomorrow(); // 2019-09-08 (if current date is 2018-09-08)
Este fragmento se puede utilizar para crear una matriz utilizando una función iteradora y un valor inicial.
const unfold = (fn, seed) => {
let result = [],
val = [null, seed];
while ((val = fn(val[1]))) result.push(val[0]);
return result;
};
var f = n => (n > 50 ? false : [-n, n + 10]);
unfold(f, 10); // [-10, -20, -30, -40, -50]
Este fragmento se puede utilizar para encontrar el valor unionde dos matrices, lo que da como resultado una matriz que tiene elementos que provienen de ambas matrices pero que no se repiten.
const union = (a, b) => Array.from(new Set([...a, ...b]));
union([1, 2, 3], [4, 3, 2]); // [1,2,3,4]
Este fragmento utiliza ES6 Sety el …restoperador para obtener cada elemento solo una vez.
const uniqueElements = arr => [...new Set(arr)];
uniqueElements([1, 2, 2, 3, 4, 4, 5]); // [1, 2, 3, 4, 5]
Este fragmento se puede utilizar para comprobar si un valor es un número.
const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;
validateNumber('10'); // true
Este fragmento convierte una cadena en una matriz de palabras.
const words = (str, pattern = /[^a-zA-Z-]+/) => str.split(pattern).filter(Boolean);
words('I love javaScript!!'); // ["I", "love", "javaScript"]
words('python, javaScript & coffee'); // ["python", "javaScript", "coffee"]
Estos fragmentos se tomaron de este proyecto en el que puede encontrar más fragmentos de JavaScript y también fragmentos de otras tecnologías y marcos.
#javascript