127 fragmentos de JavaScript útiles que puedes entender en 30 segundos
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".
primero.all
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
2.allEqual
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
3.approximatelyEqual
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
4.arrayToCSV
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"'```
5.arrayToHtmlList
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');
6.attempt
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 = []
7.average
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
8.averageBy
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
9.bifurcate
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'] ]
diez.bifurcateBy
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'] ]
11.bottomVisible
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
duodécimo.byteSize
Este fragmento devuelve la longitud de una cadena en bytes.
const byteSize = str => new Blob([str]).size;
byteSize('😀'); // 4
byteSize('Hello World'); // 11
13.capitalize
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'
14.capitalizeEveryWord
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!'
15.castArray
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 ]
17.countOccurrences
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
18.Create Directory
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
19.currentURL
Este fragmento devuelve la URL actual.
const currentURL = () => window.location.href;
currentURL(); // 'https://medium.com/@fatosmorina'
20.dayOfYear
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
21.decapitalize
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'
22.deepFlatten
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]
23.default
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 }
24.defer
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'
25.degreesToRads
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
26.difference
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]
27.differenceBy
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 } ]
28.differenceWith
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]
29.digitize
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]
30.distance
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
trigésimo primero.Drop Elements
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); // []
32.dropRight
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); // []
33.dropRightWhile
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]
34.dropWhile
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]
35.elementContains
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
36.Filter Duplicate Elements
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]
37.findKey
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'
38.findLast
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
39.flatten
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]
40.forEachRight
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'
41.forOwn
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
42.functionName
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)
43.Get Time From Date
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"
44.Get Days Between Dates
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
45.getStyle
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'
cuarenta y seis.getType
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'
47.hasClass
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
48.head
Este fragmento devuelve el valor headde una lista.
const head = arr => arr[0];
head([1, 2, 3]); // 1
49.hide
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
50.httpsRedirect
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
51.indexOfAll
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); // []
52.initial
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]
53.insertAfter
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>
54.insertBefore
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>
55.intersection
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]
56.intersectionBy
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]
57.intersectionWith
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]
58.is
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
59.isAfterDate
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
60.isAnagram
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
sesenta y uno.isArrayLike
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
62.isBeforeDate
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
63.isBoolean
Este fragmento se puede utilizar para comprobar si un argumento es booleano.
const isBoolean = val => typeof val === 'boolean';
isBoolean(null); // false
isBoolean(false); // true
sesenta y cuatro.isBrowser
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)
sesenta y cinco.isBrowserTabFocused
Este fragmento se puede utilizar para determinar si la pestaña del navegador está enfocada.
const isBrowserTabFocused = () => !document.hidden;
isBrowserTabFocused(); // true
66.isLowerCase
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
sesenta y siete.isNil
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
68.isNull
Este fragmento se puede utilizar para comprobar si un valor es null.
const isNull = val => val === null;
isNull(null); // true
69.isNumber
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
70.isObject
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
71.isObjectLike
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
72.isPlainObject
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
setenta y tres.isPromiseLike
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
74.isSameDate
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
75.isString
Este fragmento se puede utilizar para comprobar si un argumento es una cadena.
const isString = val => typeof val === 'string';
isString('10'); // true
76.isSymbol
Este fragmento se puede utilizar para comprobar si un argumento es un símbolo.
const isSymbol = val => typeof val === 'symbol';
isSymbol(Symbol('x')); // true
77.isUndefined
Este fragmento se puede utilizar para comprobar si un valor es undefined.
const isUndefined = val => val === undefined;
isUndefined(undefined); // true
78.isUpperCase
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
79.isValidJSON
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
80.last
Este fragmento devuelve el último elemento de una matriz.
const last = arr => arr[arr.length - 1];
last([1, 2, 3]); // 3
81.matches
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
82.maxDate
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
83.maxN
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]
84.minDate
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
85.minN
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]
ochenta y seis.negate
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 ]
ochenta y siete.nodeListToArray
Este fragmento se puede utilizar para convertir a nodeListen una matriz.
const nodeListToArray = nodeList => [...nodeList];
nodeListToArray(document.childNodes); // [ <!DOCTYPE html>, html ]
88.pad
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'
89.radsToDegrees
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
90.Random Hexadecimal Color Code
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"
91.randomIntArrayInRange
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 ]
92.randomIntegerInRange
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
93.randomNumberInRange
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
noventa y cuatro.readFileLines
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']
95.Redirect to a URL
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');
96.reverse
Este fragmento se puede utilizar para invertir una cadena.
const reverseString = str => [...str].reverse().join('');
reverseString('foobar'); // 'raboof'
97.round
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
98.runPromisesInSeries
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
99.sample
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
100.sampleSize
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]
101.scrollToTop
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();
102.serializeCookie
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'
103.setStyle
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
104.shallowClone
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
105.show
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
106.shuffle
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]
107.similarity
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
108.sleep
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.');
}
109.smoothScroll
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
110.sortCharactersInString
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'
111.splitLines
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.' , '']
112.stripHTMLTags
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'
113.sum
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
114.tail
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]
115.take
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); // []
116.takeRight
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]
117.timeTaken
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
118.times
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
119.toCurrency
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
120.toDecimalMark
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"
121.toggleClass
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
122.tomorrow
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)
123.unfold
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]
124.union
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]
125.uniqueElements
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]
126.validateNumber
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
127.words
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"]
Sinopsis
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