Перевод 20 ES6-сниппетов для решения практических задач

1. Как скрыть все элементы определенного типа?

// вспомогательная функция для нахождения всех элементов определенного типаconst findAll = (parent, selector) => parent.querySelectorAll(selector)const hide = (...els) => [...els].forEach(el => el.style.display = 'none')// примерhide(findAll(document, 'img')) // находим и скрываем все элементы "img" на странице

2. Как проверить, что элемент имеет определенный класс?

// вспомогательная функция для нахождения одного элемента определенного типаconst findOne = (parent, selector) => parent.querySelector(selector)const hasClass = (el, className) => el.classList.contains(className)// примерhasClass(findOne(document, 'p'), 'special') // true

3. Как переключить классы элемента?

const toggleClass = (el, className) => el.classList.toggleClass(className)// примерtoggleClass(findOne('p'), 'special') // параграф больше не имеет класса "special"

4. Как получить величину прокрутки текущей страницы?

const getScrollPosition = (el = window) => ({  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop})// примерgetScrollPosition() // { x: 0, y: 200 }

5. Как сделать плавную прокрутку в начало страницы?

const scrollToTop = () => {  const c = document.documentElement.scrollTop || document.body.scrollTop  if (c > 0) {    requestAnimationFrame(scrollToTop)    scrollTo(0, c - c / 8)  }}// илиscrollTo({  top: 0,  behavior: 'smooth'})// примерscrollToTop()

6. Как проверить, содержит ли один элемент другой?

const elementContains = (parent, child) => parent !== child && parent.contains(child)// примерelementContains(findOne(document, 'head'), findOne(document, 'title')) // trueelementContains(findOne(document, 'body'), findOne(document, 'body')) // false

7. Как определить, попадает ли элемент в область просмотра?

const elemIsVidibleInViewport = (el, partiallyVisible = false) => {  const { top, left, bottom, right } = el.getBoundingClientRect()  const { innerHeight, innerWidth } = window  return partiallyVisible    ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&      ((left > 0 && left < innerWidth || right > 0 && right < innerWidth))    : top >= 0 & left >=0 && bottom <= innerHeight && rigth <= innerWidth}// примерelemIsVidibleInViewport(el) // элемент должен быть виден полностьюelemIsVidibleInViewport(el, true) // может быть виден частично

8. Как получить все изображения, находящиеся внутри определенного элемента?

const getImages = (el, includeDuplicates = false) => {  const images = [...el.getElementsByTagName('img')].map(img => img.getAttribute('src'))  return includeDuplicates ? images : [...new Set(images)]}// примерgetImages(document, true) // получаем все изображения на страницеgetImages(document, false) // получаем только уникальные изображения

9. Как определить устройство пользователя?

const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)    ? 'Mobile'    : 'Desktop'// ExampledetectDeviceType()

11. Как создать объект, содержащий параметры текущего URL?

const getURLParams = url => (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(  (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),  {})// примерgetURLParams('http://url.com/page?f=John&l=Smith') // { f: 'John', l: 'Smith' }getURLParams('https://google.com') // { }

12. Как преобразовать элементы формы в объект?

const formToObject = form =>  Array.from(new FormData(form)).reduce(    (acc, [key, value]) => ({      ...acc,      [key]: value    }),    {}  )// примерformToObject(findOne(document, 'form')) // { name: 'John', email: "myemail@example.com" }

13. Как извлечь определенные свойства объекта?

const getProps = (from, ...selectors) =>  [...selectors].map(s =>    s      .replace(/\[([^\[\]]*)\]/g, '.$1.')      .split('.')      .filter(t => t !== '')      .reduce((prev, cur) => prev && prev[cur], from)  )const obj = { selector: { to: { value: 'value to select' } }, target: [ 1, 2, { a: 'test' } ] }// примерgetProps(obj, 'selector.to.value', 'target[0]', 'target[2].a') // [ 'value to select', 1, 'test' ]

14. Как вызвать функцию через определенное время (в миллисекундах)?

// вспомогательная функция для вывода сообщения в консольconst log = (value) => console.log(value)const delay = (fn, wait, ...rest) => setTimeout(fn, wait, ...rest)// примерdelay(  text => log(text),  1000,  'позже')// 'позже' через 1 секунду

16. Как удалить обработчик события, зарегистрированный на определенном элементе?

// вспомогательная функция для добавления обработчикаaddListener = (el, evt, cb) => el.addEventListener(evt, cb)const removeListener = (el, evt, fn, opts = false) => el.removeEventListener(evt, fn, opts)const fn = () => log('!')// пример;((B) => {  addListener(B, 'click', fn)  removeListener(B, 'click', fn) // сообщение "!" больше не выводится в консоль после клика})(document.body)

17. Как преобразовать миллисекунды в читаемый формат?

const formatDuration = ms => {  if (ms < 0) ms = -ms  const time = {    // ~~ = Math.floor    day: ~~(ms / 86400000),    hour: ~~(ms / 3600000) % 24,    minute: ~~(ms / 60000) % 60,    second: ~~(ms / 1000) % 60,    millisecond: ~~(ms) % 1000  }  return Object.entries(time)    .filter(val => val[1] !== 0)    .map(([key, val]) => `${val} ${key}${val !== 1 ? 's' : ''}`)    .join(', ')}// примерformatDuration(1001); // 1 second, 1 millisecondformatDuration(34325055574); // 397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds

18. Как получить разницу между двумя датами в днях?

const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24)// примерlog(  getDaysDiffBetweenDates(new Date('2020-11-01'), new Date('2020-11-09'))) // 8

19. Как сделать GET-запрос?

// XMLHttpRequestconst httpGet = (url, cb, err = console.error) => {  const req = new XMLHttpRequest()  req.open('GET', url, true)  req.onload = () => cb(req.responseText)  req.onerror = () => err(req)  req.send()}httpGet(  'https://jsonplaceholder.typicode.com/posts/1',  log) // { "userId": 1, "id": 1, "title": "some title", "body": "some text" }// fetchconst httpGet = (url, cb, err = console.error) =>  fetch(url)    .then(response => response.json())    .then(result => cb(result))    .catch(error => err(error))// async/awaitconst httpGet = async (url, cb, err = console.error) => {  try {    const response = await fetch(url);    const result = await response.json();    cb(result);  } catch (error) {    err(error)  }}

20. Как сделать POST-запрос?

// XMLHttpsRequestconst httpPost = (url, data, cb, err = console.error) => {  const req = new XMLHttpRequest()  req.open('POST', url, true)  req.setRequestHeader('Content-Type', 'application/json')  req.onload = () => cb(req.responseText)  req.onerror = () => err(req)  req.send(data)}const newPost = {  userId: 1234,  title: 'foo',  body: 'bar baz qux'}const data = JSON.stringify(newPost)httpPost(  'https://jsonplaceholder.typicode.com/posts',  data,  log) // { "id": 101, "userId": 1234, "title": "foo", "body": "bar baz qux" }// async/awaitconst httpPost = async (url, data, cb, err = console.error) => {  try {    const response = await fetch(url, {      method: 'POST',      headers: {        'Content-Type': 'application/json'      },      body: JSON.stringify(data)    })    const result = await response.json()    cb(result)  } catch (error) {    err(error)  }}httpPost(  'https://jsonplaceholder.typicode.com/posts',  newPost,  log)

21. Как создать счетчик с определенным диапазоном, шагом и продолжительностью?

const counter = (selector, start, end, step = 1, duration = 2000) => {  let current = start,    _step = (end - start) * step < 0 ? -step : step,    timer = setInterval(() => {      current += _step      findOne(document, selector).innerHTML = current      if (current >= end) findOne(document, selector).innerHTML = end      if (current >= end) clearInterval(timer)    }, Math.abs(~~(duration / (end - start))))    return timer}// примерcounter('#some_id', 1, 1000, 5, 2000) // создаем двухсекундный таймер для элемента с идентификатором "some_id"

22. Как скопировать строку в буфер обмена?

const copyToClipboard = str => {  const el = document.createElement('textarea')  el.value = str  el.setAttribute('readonly')  el.style.position = 'absolute'  el.style.left = '-999px'  document.body.append(el)  const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false  el.select()  document.execCommand('copy')  el.remove()  if (selected) {    document.getSelection().removeAllRanges()    document.getSelection().addRange(selected)  }}// примерcopyToClipboard('some text') // строка "some text" скопирована в буфер обмена