100 лучших фрагментов кода JavaScript для начинающих

Блог

100 лучших фрагментов кода JavaScript для начинающих

При разработке программы на JavaScript (или на любом другом языке, если на то пошло) вы часто будете выбирать между кодом DIY и существующими фрагментами кода, чтобы делать то, что вам нужно. Возможность найти нужный фрагмент кода, когда он вам нужен, может сэкономить вам много времени и предотвратить эти головные боли при написании JavaScript.



Если вам это кажется убедительным, вот список из 100 полезных фрагментов, взятых из этого проекта, которые вы можете изучить и сразу же использовать.

1. все



Этот фрагмент возвращает true если функция предиката возвращает true для всех элементов в коллекции и false иначе. Вы можете опустить второй аргумент fn, если хотите использовать Boolean в качестве значения по умолчанию.

const all = (arr, fn = Boolean) => arr.every(fn); all([4, 2, 3], x => x > 1); // true all([1, 2, 3]); // true

2. allEqual



Этот фрагмент кода проверяет, все ли элементы массива равны.

const allEqual = arr => arr.every(val => val === arr[0]); allEqual([1, 2, 3, 4, 5, 6]); // false allEqual([1, 1, 1, 1]); // true

3. примерно равно

Этот фрагмент кода проверяет, равны ли два числа друг другу с небольшой разницей.

const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2)

4. arrayToCSV

Этот фрагмент преобразует элементы без запятых или двойных кавычек в строки со значениями, разделенными запятыми.

const arrayToCSV = (arr, delimiter = ',') => arr.map(v => v.map(x => `'${x}'`).join(delimiter)).join(' '); arrayToCSV([['a', 'b'], ['c', 'd']]); // ''a','b' 'c','d'' arrayToCSV([['a', 'b'], ['c', 'd']], ';'); // ''a';'b' 'c';'d''

5. arrayToHtmlList

Этот фрагмент преобразует элементы массива в теги и добавляет их в список с заданным идентификатором.

const arrayToHtmlList = (arr, listID) => (el => ( (el = document.querySelector('#' + listID)), (el.innerHTML += arr.map(item => `
  • ${item}
  • `).join('')) ))(); arrayToHtmlList(['item 1', 'item 2'], 'myListID');

    6. попытка

    Этот фрагмент кода выполняет функцию, возвращая либо результат, либо объект обнаруженной ошибки.

    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. средний

    Этот фрагмент кода возвращает среднее значение двух или более числовых значений.

    const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length; average(...[1, 2, 3]); // 2 average(1, 2, 3); // 2

    8. средний

    Этот фрагмент кода возвращает среднее значение массива после первоначального сопоставления каждого элемента со значением с использованием заданной функции.

    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. раздвоение

    Этот фрагмент разбивает значения на две группы, а затем помещает истинный элемент filter в первую группу, а в противном случае - во вторую группу.

    Вы можете использовать Array.prototype.reduce() и Array.prototype.push() для добавления элементов в группы на основе 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'] ]

    10. bifurcateBy

    Этот фрагмент кода разбивает значения на две группы на основе функции предиката. Если функция предиката возвращает истинное значение, элемент будет помещен в первую группу. В противном случае он будет помещен во вторую группу.

    Вы можете использовать Array.prototype.reduce() и Array.prototype.push() для добавления элементов в группы в зависимости от значения, возвращаемого функцией fn для каждого элемента.

    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

    Этот фрагмент проверяет, видна ли нижняя часть страницы.

    const bottomVisible = () => document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight); bottomVisible(); // true

    12. byteSize

    Этот фрагмент возвращает длину строки в байтах.

    const byteSize = str => new Blob([str]).size; byteSize(''); // 4 byteSize('Hello World'); // 11

    13. использовать заглавные буквы

    Этот фрагмент использует первую букву строки с заглавной буквы.

    const capitalize = ([first, ...rest]) => first.toUpperCase() + rest.join(''); capitalize('fooBar'); // 'FooBar' capitalize('fooBar', true); // 'FooBar'

    14. CapitalizeEveryWord

    Этот фрагмент делает первую букву каждого слова в заданной строке заглавной.

    const capitalizeEveryWord = str => str.replace(/[a-z]/g, char => char.toUpperCase()); capitalizeEveryWord('hello world!'); // 'Hello World!'

    15. castArray

    Этот фрагмент преобразует значение, не являющееся массивом, в массив.

    const castArray = val => (Array.isArray(val) ? val : [val]); castArray('foo'); // ['foo'] castArray([1]); // [1]

    16. компактный

    Этот фрагмент удаляет ложные значения из массива.

    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

    Этот фрагмент подсчитывает количество вхождений значения в массив.

    const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0); countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3

    18. Создать каталог

    В этом фрагменте используется existsSync() чтобы проверить, существует ли каталог, а затем mkdirSync() создать его, если это не так.

    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

    Этот фрагмент возвращает текущий URL.

    const currentURL = () => window.location.href; currentURL(); // 'https://medium.com/@fatosmorina'

    20. день года

    Этот фрагмент кода получает день года от объекта Date.

    const dayOfYear = date => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24); dayOfYear(new Date()); // 272

    21. декапитализировать

    Этот фрагмент превращает первую букву строки в нижний регистр.

    const decapitalize = ([first, ...rest]) => first.toLowerCase() + rest.join('') decapitalize('FooBar'); // 'fooBar' decapitalize('FooBar'); // 'fooBar

    22. deepFlatten

    Этот фрагмент рекурсивно сглаживает массив.

    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. по умолчанию

    Этот фрагмент назначает значения по умолчанию для всех свойств объекта, которые неопределенный .

    что такое барсук дао
    const defaults = (obj, ...defs) => Object.assign({}, obj, ...defs.reverse(), obj); defaults({ a: 1 }, { b: 2 }, { b: 6 }, { a: 3 }); // { a: 1, b: 2 }

    24. отложить

    Этот фрагмент кода задерживает выполнение функции до тех пор, пока текущий стек вызовов не будет очищен.

    const defer = (fn, ...args) => setTimeout(fn, 1, ...args); defer(console.log, 'a'), console.log('b'); // logs 'b' then 'a'

    25. градусов

    Этот фрагмент кода можно использовать для преобразования значения из градусов в радианы.

    const degreesToRads = deg => (deg * Math.PI) / 180.0; degreesToRads(90.0); // ~1.5708

    26. разница

    Этот фрагмент кода находит разницу между двумя массивами.

    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

    Этот метод возвращает разницу между двумя массивами после применения данной функции к каждому элементу обоих списков.

    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. разница

    Этот фрагмент удаляет значения, для которых функция компаратора возвращает 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. оцифровать

    Этот фрагмент получает на вход число и возвращает массив его цифр.

    const digitize = n => [...`${n}`].map(i => parseInt(i)); digitize(431); // [4, 3, 1]

    30. расстояние

    Этот фрагмент кода возвращает расстояние между двумя точками, вычисляя евклидово расстояние.

    const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0); distance(1, 1, 2, 3); // 2.23606797749979

    31. Падение элементов

    Этот фрагмент возвращает новый массив с n элементы удалены слева.

    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

    Этот фрагмент возвращает новый массив с n элементы удалены справа.

    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

    Этот фрагмент удаляет элементы с правой стороны массива до тех пор, пока переданная функция не вернет 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

    Этот фрагмент удаляет элементы из массива до тех пор, пока переданная функция не вернет 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

    Этот фрагмент проверяет, содержит ли родительский элемент дочерний элемент.

    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. Фильтр повторяющихся элементов

    Этот фрагмент удаляет повторяющиеся значения в массиве.

    const filterNonUnique = arr => [ …new Set(arr)]; filterNonUnique([1, 2, 2, 3, 4, 4, 5]); // [1, 2, 3, 4, 5]

    37. findKey

    Этот фрагмент кода возвращает первый ключ, удовлетворяющий заданной функции.

    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

    Этот фрагмент кода возвращает последний элемент, для которого данная функция возвращает истинное значение.

    const findLast = (arr, fn) => arr.filter(fn).pop(); findLast([1, 2, 3, 4], n => n % 2 === 1); // 3

    39. плоский

    Этот фрагмент сглаживает массив до указанной глубины с помощью рекурсии.

    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

    Этот фрагмент кода выполняет функцию для каждого элемента массива, начиная с последнего элемента массива.

    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

    Этот фрагмент выполняет итерацию по каждому свойству объекта и повторяет обратный вызов для каждого из них соответственно.

    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

    Этот фрагмент печатает имя функции в консоли.

    const functionName = fn => (console.debug(fn.name), fn); functionName(Math.max); // max (logged in debug channel of console)

    43. Получить время по дате

    Этот фрагмент можно использовать для получения времени от объекта Date в виде строки.

    const getColonTimeFromDate = date => date.toTimeString().slice(0, 8); getColonTimeFromDate(new Date()); // '08:38:00'

    44. Выбирайте дни между свиданиями

    Этот фрагмент можно использовать для определения разницы в днях между двумя датами.

    const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24); getDaysDiffBetweenDates(new Date('2019-01-13'), new Date('2019-01-15')); // 2

    45. getStyle

    Этот фрагмент можно использовать для получения значения правила CSS для определенного элемента.

    const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName]; getStyle(document.querySelector('p'), 'font-size'); // '16px'

    46. ​​getType

    Этот фрагмент можно использовать для получения типа значения.

    const getType = v => v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase(); getType(new Set([1, 2, 3])); // 'set'

    47. hasClass

    Этот фрагмент проверяет, имеет ли элемент определенный класс.

    const hasClass = (el, className) => el.classList.contains(className); hasClass(document.querySelector('p.special'), 'special'); // true

    48. голова

    Этот фрагмент возвращает head списка.

    const head = arr => arr[0]; head([1, 2, 3]); // 1

    49. скрыть

    Этот фрагмент можно использовать, чтобы скрыть все указанные элементы.

    const hide = (...el) => [...el].forEach(e => (e.style.display = 'none')); hide(document.querySelectorAll('img')); // Hides all elements on the page

    50. httpsRedirect

    Этот фрагмент можно использовать для перенаправления с HTTP на HTTPS в определенном домене.

    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

    Этот фрагмент можно использовать для получения всех индексов значения в массиве, который возвращает пустой массив, если это значение не включено в него.

    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); // []

    Этот фрагмент возвращает все элементы массива, кроме последнего.

    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

    Этот фрагмент можно использовать для вставки строки HTML после конца определенного элемента.

    const insertAfter = (el, htmlString) => el.insertAdjacentHTML('afterend', htmlString); insertAfter(document.getElementById('myId'), '

    after

    '); // ...

    after

    54. insertBefore

    Этот фрагмент можно использовать для вставки строки HTML перед определенным элементом.

    const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString); insertBefore(document.getElementById('myId'), '

    before

    '); //

    before

    ...

    55. перекресток

    Этот фрагмент можно использовать для получения массива с элементами, включенными в два других массива.

    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. crossctionBy

    Этот фрагмент можно использовать для возврата списка элементов, которые существуют в обоих массивах, после того, как определенная функция была выполнена для каждого элемента обоих массивов.

    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. crossctionWith

    Этот фрагмент можно использовать для возврата списка элементов, которые существуют в обоих массивах, с помощью функции компаратора.

    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. это

    Этот фрагмент можно использовать для проверки того, принадлежит ли значение определенному типу.

    как увидеть удаленные учетные записи Twitter
    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

    Этот фрагмент можно использовать, чтобы проверить, не наступила ли дата после другой даты.

    const isAfterDate = (dateA, dateB) => dateA > dateB; isAfterDate(new Date(2010, 10, 21), new Date(2010, 10, 20)); // true

    60. isAnagram

    Этот фрагмент можно использовать, чтобы проверить, является ли конкретная строка анаграммой с другой строкой.

    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

    61. isArrayLike

    Этот фрагмент можно использовать, чтобы проверить, является ли предоставленный аргумент повторяемым, как массив.

    const isArrayLike = obj => obj != null && typeof obj[Symbol.iterator] === 'function'; isArrayLike(document.querySelectorAll('.className')); // true isArrayLike('abc'); // true isArrayLike(null); // false

    62. isBeforeDate

    Этот фрагмент можно использовать, чтобы проверить, не предшествует ли дата другой дате.

    const isBeforeDate = (dateA, dateB) => dateA

    63. является логическим

    Этот фрагмент можно использовать, чтобы проверить, является ли аргумент логическим.

    const isBoolean = val => typeof val === 'boolean'; isBoolean(null); // false isBoolean(false); // true

    64. isBrowser

    Этот фрагмент можно использовать, чтобы определить, является ли текущая среда выполнения браузером. Это помогает избежать ошибок при запуске интерфейсных модулей на сервере (Node).

    const isBrowser = () => ![typeof window, typeof document].includes('undefined'); isBrowser(); // true (browser) isBrowser(); // false (Node)

    65. isBrowserTabFocused

    Этот фрагмент можно использовать, чтобы определить, находится ли вкладка браузера в фокусе.

    const isBrowserTabFocused = () => !document.hidden; isBrowserTabFocused(); // true

    66. isLowerCase

    Этот фрагмент можно использовать, чтобы определить, является ли строка строчными буквами.

    const isLowerCase = str => str === str.toLowerCase(); isLowerCase('abc'); // true isLowerCase('a3@$'); // true isLowerCase('Ab4'); // false

    67. isNil

    Этот фрагмент можно использовать, чтобы проверить, равно ли значение null или undefined.

    const isNil = val => val === undefined || val === null; isNil(null); // true isNil(undefined); // true

    68. isNull

    Этот фрагмент можно использовать, чтобы проверить, равно ли значение null.

    const isNull = val => val === null; isNull(null); // true

    69. isNumber

    Этот фрагмент можно использовать, чтобы проверить, является ли указанное значение числом.

    function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); } isNumber('1'); // false isNumber(1); // true

    70. isObject

    Этот фрагмент можно использовать, чтобы проверить, является ли предоставленное значение объектом. Он использует конструктор объекта для создания оболочки объекта для данного значения.

    Если это уже объект, то будет возвращен тип объекта, соответствующий заданному значению. В противном случае будет возвращен новый объект.

    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

    Этот фрагмент можно использовать, чтобы проверить, не соответствует ли значение null и что его typeof это объект.

    const isObjectLike = val => val !== null && typeof val === 'object'; isObjectLike({}); // true isObjectLike([1, 2, 3]); // true isObjectLike(x => x); // false isObjectLike(null); // false

    72. isPlainObject

    Этот фрагмент кода проверяет, является ли значение объектом, созданным конструктором Object.

    const isPlainObject = val => !!val && typeof val === 'object' && val.constructor === Object; isPlainObject({ a: 1 }); // true isPlainObject(new Map()); // false

    73.

    Этот фрагмент кода проверяет, выглядит ли объект как 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

    Этот фрагмент можно использовать, чтобы проверить, равны ли две даты.

    const isSameDate = (dateA, dateB) => dateA.toISOString() === dateB.toISOString(); isSameDate(new Date(2010, 10, 20), new Date(2010, 10, 20)); // true

    75. isString

    Этот фрагмент можно использовать, чтобы проверить, является ли аргумент строкой.

    const isString = val => typeof val === 'string'; isString('10'); // true

    76. isSymbol

    Этот фрагмент можно использовать, чтобы проверить, является ли аргумент символом.

    const isSymbol = val => typeof val === 'symbol'; isSymbol(Symbol('x')); // true

    77. isUndefined

    Этот фрагмент можно использовать, чтобы проверить, равно ли значение undefined.

    const isUndefined = val => val === undefined; isUndefined(undefined); // true

    78. isUpperCase

    Этот фрагмент можно использовать, чтобы проверить, является ли строка прописной.

    const isUpperCase = str => str === str.toUpperCase(); isUpperCase('ABC'); // true isLowerCase('A3@$'); // true isLowerCase('aB4'); // false

    79. isValidJSON

    Этот фрагмент можно использовать, чтобы проверить, является ли строка допустимым JSON.

    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. последний

    Этот фрагмент возвращает последний элемент массива

    const last = arr => arr[arr.length - 1]; last([1, 2, 3]); // 3

    81. матчи

    Этот фрагмент кода сравнивает два объекта, чтобы определить, содержит ли первый те же значения свойств, что и второй.

    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

    Этот фрагмент можно использовать для получения последней даты.

    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

    Этот фрагмент возвращает n самые большие элементы из списка. Если n больше или равно длине списка, будет возвращен исходный список (отсортированный в порядке убывания).

    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

    Этот фрагмент можно использовать для получения самой ранней даты.

    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. минН

    Этот фрагмент возвращает n наименьшие элементы из списка. Если n больше или равно длине списка, он вернет исходный список (отсортированный в порядке возрастания).

    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]

    86. отрицать

    Этот фрагмент можно использовать для применения оператора not (!) к функции-предикату с ее аргументами.

    const negate = func => (...args) => !func(...args); [1, 2, 3, 4, 5, 6].filter(negate(n => n % 2 === 0)); // [ 1, 3, 5 ]

    87. nodeListToArray

    Этот фрагмент можно использовать для преобразования nodeList в массив.

    const nodeListToArray = nodeList => [...nodeList]; nodeListToArray(document.childNodes); // [ , html ]

    88. колодка

    Этот фрагмент можно использовать для pad строка с обеих сторон с указанным символом, если она короче указанной длины.

    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

    Этот фрагмент можно использовать для преобразования угла из радиан в градусы.

    const radsToDegrees = rad => (rad * 180.0) / Math.PI; radsToDegrees(Math.PI / 2); // 90

    90. Случайный шестнадцатеричный цветовой код.

    Этот фрагмент можно использовать для генерации случайного шестнадцатеричного цветового кода.

    const randomHexColorCode = () => { let n = (Math.random() * 0xfffff * 1000000).toString(16); return '#' + n.slice(0, 6); }; randomHexColorCode(); // '#e34155'

    91. randomIntArrayInRange

    Этот фрагмент можно использовать для создания массива с n случайные целые числа в указанном диапазоне.

    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

    Этот фрагмент можно использовать для генерации случайного целого числа в указанном диапазоне.

    const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; randomIntegerInRange(0, 5); // 3

    93. randomNumberInRange

    Этот фрагмент можно использовать для возврата случайного числа в указанном диапазоне.

    const randomNumberInRange = (min, max) => Math.random() * (max - min) + min; randomNumberInRange(2, 10); // 6.0211363285087005

    94. readFileLines

    Этот фрагмент можно использовать для чтения файла путем получения массива строк из файла.

    const fs = require('fs'); const readFileLines = filename => fs .readFileSync(filename) .toString('UTF8') .split(' '); let arr = readFileLines('test.txt'); console.log(arr); // ['line1', 'line2', 'line3']

    95. Перенаправление на URL-адрес

    Этот фрагмент можно использовать для перенаправления на указанный URL.

    const redirect = (url, asLink = true) => asLink ? (window.location.href = url) : window.location.replace(url); redirect('https://google.com');

    96. реверс

    Этот фрагмент можно использовать для переворота строки.

    const reverseString = str => [...str].reverse().join(''); reverseString('foobar'); // 'raboof'

    97. тур

    Этот фрагмент можно использовать для округления числа до указанного количества цифр.

    const round = (n, decimals = 0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`); round(1.005, 2); // 1.01

    98. runPromisesInSeries

    Этот фрагмент можно использовать для последовательного выполнения массива обещаний.

    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. образец

    Этот фрагмент можно использовать для получения случайного числа из массива.

    const sample = arr => arr[Math.floor(Math.random() * arr.length)]; sample([3, 7, 9, 11]); // 9

    100. sampleSize

    Этот фрагмент можно использовать для получения n случайных элементов из уникальных позиций массива вплоть до размера массива. Элементы в массиве перемешиваются с помощью Алгоритм Фишера-Йейтса

    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] ```.

    #javascript # ES6 # Библиотеки # Фрагменты JavaScript для начинающих