{"id":312934,"date":"2020-11-11T09:00:56","date_gmt":"2020-11-11T09:00:56","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=312934"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=312934","title":{"rendered":"20+ ES6-\u0441\u043d\u0438\u043f\u043f\u0435\u0442\u043e\u0432 \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0437\u0430\u0434\u0430\u0447"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ig\/mq\/2d\/igmq2dvqrh3pvqpohaicef0c3zi.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0432 \u0441\u0432\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<p>  \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0438\u043c\u0435\u0435\u0442\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043e\u043f\u044b\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 JavaScript.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h3>1. \u041a\u0430\u043a \u0441\u043a\u0440\u044b\u0442\u044c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430 const findAll = (parent, selector) =&gt; parent.querySelectorAll(selector)  const hide = (...els) =&gt; [...els].forEach(el =&gt; el.style.display = 'none')  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 hide(findAll(document, 'img')) \/\/ \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b &quot;img&quot; \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 <\/code><\/pre>\n<p>  <\/p>\n<h3>2. \u041a\u0430\u043a \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430 const findOne = (parent, selector) =&gt; parent.querySelector(selector)  const hasClass = (el, className) =&gt; el.classList.contains(className)  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 hasClass(findOne(document, 'p'), 'special') \/\/ true <\/code><\/pre>\n<p>  <\/p>\n<h3>3. \u041a\u0430\u043a \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const toggleClass = (el, className) =&gt; el.classList.toggleClass(className)  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 toggleClass(findOne('p'), 'special') \/\/ \u043f\u0430\u0440\u0430\u0433\u0440\u0430\u0444 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043a\u043b\u0430\u0441\u0441\u0430 &quot;special&quot; <\/code><\/pre>\n<p>  <\/p>\n<h3>4. \u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0443 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const getScrollPosition = (el = window) =&gt; ({   x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,   y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop })  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 getScrollPosition() \/\/ { x: 0, y: 200 } <\/code><\/pre>\n<p>  <\/p>\n<h3>5. \u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043b\u0430\u0432\u043d\u0443\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u0432 \u043d\u0430\u0447\u0430\u043b\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const scrollToTop = () =&gt; {   const c = document.documentElement.scrollTop || document.body.scrollTop   if (c &gt; 0) {     requestAnimationFrame(scrollToTop)     scrollTo(0, c - c \/ 8)   } }  \/\/ \u0438\u043b\u0438 scrollTo({   top: 0,   behavior: 'smooth' })  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 scrollToTop() <\/code><\/pre>\n<p>  <\/p>\n<h3>6. \u041a\u0430\u043a \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043b\u0438 \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u0440\u0443\u0433\u043e\u0439?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const elementContains = (parent, child) =&gt; parent !== child &amp;&amp; parent.contains(child)  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 elementContains(findOne(document, 'head'), findOne(document, 'title')) \/\/ true elementContains(findOne(document, 'body'), findOne(document, 'body')) \/\/ false <\/code><\/pre>\n<p>  <\/p>\n<h3>7. \u041a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const elemIsVidibleInViewport = (el, partiallyVisible = false) =&gt; {   const { top, left, bottom, right } = el.getBoundingClientRect()   const { innerHeight, innerWidth } = window   return partiallyVisible     ? ((top &gt; 0 &amp;&amp; top &lt; innerHeight) || (bottom &gt; 0 &amp;&amp; bottom &lt; innerHeight)) &amp;&amp;       ((left &gt; 0 &amp;&amp; left &lt; innerWidth || right &gt; 0 &amp;&amp; right &lt; innerWidth))     : top &gt;= 0 &amp; left &gt;=0 &amp;&amp; bottom &lt;= innerHeight &amp;&amp; rigth &lt;= innerWidth }  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 elemIsVidibleInViewport(el) \/\/ \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0432\u0438\u0434\u0435\u043d \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e elemIsVidibleInViewport(el, true) \/\/ \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u0438\u0434\u0435\u043d \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e <\/code><\/pre>\n<p>  <\/p>\n<h3>8. \u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u0441\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const getImages = (el, includeDuplicates = false) =&gt; {   const images = [...el.getElementsByTagName('img')].map(img =&gt; img.getAttribute('src'))   return includeDuplicates ? images : [...new Set(images)] }  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 getImages(document, true) \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u0441\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 getImages(document, false) \/\/ \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f <\/code><\/pre>\n<p>  <\/p>\n<h3>9. \u041a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const detectDeviceType = () =&gt; \/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini\/i.test(navigator.userAgent)     ? 'Mobile'     : 'Desktop'  \/\/ Example detectDeviceType() <\/code><\/pre>\n<p>  <\/p>\n<h3>11. \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e URL?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const getURLParams = url =&gt; (url.match(\/([^?=&amp;]+)(=([^&amp;]*))\/g) || []).reduce(   (a, v) =&gt; ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),   {} )  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 getURLParams('http:\/\/url.com\/page?f=John&amp;l=Smith') \/\/ { f: 'John', l: 'Smith' } getURLParams('https:\/\/google.com') \/\/ { } <\/code><\/pre>\n<p>  <\/p>\n<h3>12. \u041a\u0430\u043a \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0444\u043e\u0440\u043c\u044b \u0432 \u043e\u0431\u044a\u0435\u043a\u0442?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const formToObject = form =&gt;   Array.from(new FormData(form)).reduce(     (acc, [key, value]) =&gt; ({       ...acc,       [key]: value     }),     {}   )  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 formToObject(findOne(document, 'form')) \/\/ { name: 'John', email: &quot;myemail@example.com&quot; } <\/code><\/pre>\n<p>  <\/p>\n<h3>13. \u041a\u0430\u043a \u0438\u0437\u0432\u043b\u0435\u0447\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const getProps = (from, ...selectors) =&gt;   [...selectors].map(s =&gt;     s       .replace(\/\\[([^\\[\\]]*)\\]\/g, '.$1.')       .split('.')       .filter(t =&gt; t !== '')       .reduce((prev, cur) =&gt; prev &amp;&amp; prev[cur], from)   )  const obj = { selector: { to: { value: 'value to select' } }, target: [ 1, 2, { a: 'test' } ] }  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 getProps(obj, 'selector.to.value', 'target[0]', 'target[2].a') \/\/ [ 'value to select', 1, 'test' ] <\/code><\/pre>\n<p>  <\/p>\n<h3>14. \u041a\u0430\u043a \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f (\u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445)?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c const log = (value) =&gt; console.log(value)  const delay = (fn, wait, ...rest) =&gt; setTimeout(fn, wait, ...rest)  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 delay(   text =&gt; log(text),   1000,   '\u043f\u043e\u0437\u0436\u0435' ) \/\/ '\u043f\u043e\u0437\u0436\u0435' \u0447\u0435\u0440\u0435\u0437 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 <\/code><\/pre>\n<p>  <\/p>\n<h3>16. \u041a\u0430\u043a \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 addListener = (el, evt, cb) =&gt; el.addEventListener(evt, cb)  const removeListener = (el, evt, fn, opts = false) =&gt; el.removeEventListener(evt, fn, opts)  const fn = () =&gt; log('!')  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 ;((B) =&gt; {   addListener(B, 'click', fn)    removeListener(B, 'click', fn) \/\/ \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 &quot;!&quot; \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043f\u043e\u0441\u043b\u0435 \u043a\u043b\u0438\u043a\u0430 })(document.body) <\/code><\/pre>\n<p>  <\/p>\n<h3>17. \u041a\u0430\u043a \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0432 \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const formatDuration = ms =&gt; {   if (ms &lt; 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 =&gt; val[1] !== 0)     .map(([key, val]) =&gt; `${val} ${key}${val !== 1 ? 's' : ''}`)     .join(', ') }  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 formatDuration(1001); \/\/ 1 second, 1 millisecond formatDuration(34325055574); \/\/ 397 days, 6 hours, 44 minutes, 15 seconds, 574 milliseconds <\/code><\/pre>\n<p>  <\/p>\n<h3>18. \u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0434\u0430\u0442\u0430\u043c\u0438 \u0432 \u0434\u043d\u044f\u0445?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const getDaysDiffBetweenDates = (dateInitial, dateFinal) =&gt; (dateFinal - dateInitial) \/ (1000 * 3600 * 24)  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 log(   getDaysDiffBetweenDates(new Date('2020-11-01'), new Date('2020-11-09')) ) \/\/ 8 <\/code><\/pre>\n<p>  <\/p>\n<h3>19. \u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c GET-\u0437\u0430\u043f\u0440\u043e\u0441?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ XMLHttpRequest const httpGet = (url, cb, err = console.error) =&gt; {   const req = new XMLHttpRequest()   req.open('GET', url, true)   req.onload = () =&gt; cb(req.responseText)   req.onerror = () =&gt; err(req)   req.send() }  httpGet(   'https:\/\/jsonplaceholder.typicode.com\/posts\/1',   log ) \/\/ { &quot;userId&quot;: 1, &quot;id&quot;: 1, &quot;title&quot;: &quot;some title&quot;, &quot;body&quot;: &quot;some text&quot; }  \/\/ fetch const httpGet = (url, cb, err = console.error) =&gt;   fetch(url)     .then(response =&gt; response.json())     .then(result =&gt; cb(result))     .catch(error =&gt; err(error))  \/\/ async\/await const httpGet = async (url, cb, err = console.error) =&gt; {   try {     const response = await fetch(url);     const result = await response.json();     cb(result);   } catch (error) {     err(error)   } } <\/code><\/pre>\n<p>  <\/p>\n<h3>20. \u041a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c POST-\u0437\u0430\u043f\u0440\u043e\u0441?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ XMLHttpsRequest const httpPost = (url, data, cb, err = console.error) =&gt; {   const req = new XMLHttpRequest()   req.open('POST', url, true)   req.setRequestHeader('Content-Type', 'application\/json')   req.onload = () =&gt; cb(req.responseText)   req.onerror = () =&gt; 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 ) \/\/ { &quot;id&quot;: 101, &quot;userId&quot;: 1234, &quot;title&quot;: &quot;foo&quot;, &quot;body&quot;: &quot;bar baz qux&quot; }  \/\/ async\/await const httpPost = async (url, data, cb, err = console.error) =&gt; {   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 ) <\/code><\/pre>\n<p>  <\/p>\n<h3>21. \u041a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0447\u0435\u0442\u0447\u0438\u043a \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u043e\u043c, \u0448\u0430\u0433\u043e\u043c \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const counter = (selector, start, end, step = 1, duration = 2000) =&gt; {   let current = start,     _step = (end - start) * step &lt; 0 ? -step : step,     timer = setInterval(() =&gt; {       current += _step       findOne(document, selector).innerHTML = current       if (current &gt;= end) findOne(document, selector).innerHTML = end       if (current &gt;= end) clearInterval(timer)     }, Math.abs(~~(duration \/ (end - start))))     return timer }  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 counter('#some_id', 1, 1000, 5, 2000) \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0434\u0432\u0443\u0445\u0441\u0435\u043a\u0443\u043d\u0434\u043d\u044b\u0439 \u0442\u0430\u0439\u043c\u0435\u0440 \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c &quot;some_id&quot; <\/code><\/pre>\n<p>  <\/p>\n<h3>22. \u041a\u0430\u043a \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u0431\u0443\u0444\u0435\u0440 \u043e\u0431\u043c\u0435\u043d\u0430?<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const copyToClipboard = str =&gt; {   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 &gt; 0 ? document.getSelection().getRangeAt(0) : false   el.select()   document.execCommand('copy')   el.remove()   if (selected) {     document.getSelection().removeAllRanges()     document.getSelection().addRange(selected)   } }  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 copyToClipboard('some text') \/\/ \u0441\u0442\u0440\u043e\u043a\u0430 &quot;some text&quot; \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0430 \u0432 \u0431\u0443\u0444\u0435\u0440 \u043e\u0431\u043c\u0435\u043d\u0430 <\/code><\/pre>\n<p>  \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u0432\u044b \u043d\u0430\u0448\u043b\u0438 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435. \u0415\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 JavaScript \u0432 <a href=\"https:\/\/javascript-practice.ru\/\" rel=\"nofollow\">\u043c\u043e\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438<\/a>. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/527444\/\"> https:\/\/habr.com\/ru\/post\/527444\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ig\/mq\/2d\/igmq2dvqrh3pvqpohaicef0c3zi.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0432\u0430\u043c\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0441\u043d\u0438\u043f\u043f\u0435\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0432 \u0441\u0432\u043e\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435.<\/p>\n<p>  \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u044b \u0438\u043c\u0435\u0435\u0442\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043e\u043f\u044b\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 JavaScript.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-312934","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/312934","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=312934"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/312934\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=312934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=312934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=312934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}