{"id":306017,"date":"2020-06-27T09:00:24","date_gmt":"2020-06-27T09:00:24","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=306017"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=306017","title":{"rendered":"\u0424\u0438\u0447\u0438 JavaScript. \u0427\u0430\u0441\u0442\u044c 2"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/508494\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/bj\/hd\/m8\/bjhdm8evuaa_gtghjyaljy9vk1u.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 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0412\u0430\u043c\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043d\u0430\u0445\u043e\u0434\u043a\u0430\u043c\u0438, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u043d\u043e\u0439 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f JavaScript. \u0414\u0430\u043d\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u0430, \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u043e\u0432\u044b\u043c \u0438 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u043c \u0444\u0438\u0447\u0430\u043c.<\/p>\n<p>  \u0421\u043c. <a href=\"https:\/\/habr.com\/ru\/post\/507298\/\">\u0424\u0438\u0447\u0438 JavaScript. \u0427\u0430\u0441\u0442\u044c 1<\/a>. <\/p>\n<h3>1. \u0427\u0430\u0441\u0442\u043e\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u043e\u0434\u043d\u0438\u043c \u0438 \u0442\u0435\u043c \u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c<\/h3>\n<p>  \u041f\u043e\u0440\u043e\u0439 \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043d\u043e\u0432\u0430 \u0438 \u0441\u043d\u043e\u0432\u0430 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043e\u0434\u043d\u0438\u043c \u0438 \u0442\u0435\u043c \u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c. \u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 DOM, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f document \u0438 document.body. \u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0447\u0442\u043e \u0442\u0443\u0442 \u0442\u0430\u043a\u043e\u0433\u043e? 8 \u0438 13 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0434\u0430 \u0435\u0449\u0435 \u0438 emmet \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442. \u041e\u0434\u043d\u0430\u043a\u043e, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u0434\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e, \u0430\u0432\u0442\u043e\u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0442\u044c \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b. \u041b\u0438\u0431\u043e, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0448\u044c \u043d\u0435 \u0441 html, \u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 php \u0431\u0435\u0437 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440\u0430, \u043c\u043d\u043e\u0433\u0438\u0435 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u0417\u0430\u0434\u0443\u043c\u0430\u0432\u0448\u0438\u0441\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0440\u0435\u0448\u0438\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u044f \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043b \u043e canvas. \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0441 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0445\u043e\u043b\u0441\u0442\u043e\u043c? \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0441 \u0435\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">const C = document.querySelector('canvas') const $ = C.getContext('2d') <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b \u043e\u0431 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 jQuery ($).<\/p>\n<p>  \u0422\u0430\u043a \u0432\u043e\u0442, \u043c\u043e\u0433\u0443 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u0442\u0440\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 (\u043e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u044f \u043f\u043e\u0434\u0433\u043b\u044f\u0434\u0435\u043b \u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 Facebook \u043f\u0440\u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0430 Open Graph):<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<pre><code class=\"javascript\">    \/\/ \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 function foo() {     const D = document     const B = document.body      const div = D.createElement('div')     B.append(div)     const p = D.createElement('p')     p.textContent = 'Lorem ipsum dolor sit amet...'     div.append(p)     console.log(div)     B.removeChild(div) } foo()  \/\/ \u0441\u043d\u0430\u0440\u0443\u0436\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 function bar(D, B) {     const div = D.createElement('div')     B.append(div)     const p = D.createElement('p')     p.textContent = 'Lorem ipsum dolor sit amet...'     div.append(p)     console.log(div)     B.removeChild(div) } bar(document, document.body)  \/\/ IIFE ;((D, B) =&gt; {     const div = D.createElement('div')     B.append(div)     const p = D.createElement('p')     p.textContent = 'Lorem ipsum dolor sit amet...'     div.append(p)     console.log(div)     B.removeChild(div) })(document, document.body) <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u0431\u044b\u043b\u0430 \u0440\u0430\u0437\u043c\u0438\u043d\u043a\u0430, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0442\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u043a\u0435.<\/p>\n<h3>2. \u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440<\/h3>\n<p>  \u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u2014 \u044d\u0442\u043e \u043e\u0441\u043e\u0431\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u0444\u0430\u0431\u0440\u0438\u043a\u0430 \u0438\u0442\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432. \u041e\u0431\u044a\u0435\u043a\u0442 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0442\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c, \u0435\u0441\u043b\u0438 \u043e\u043d \u0443\u043c\u0435\u0435\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443 \u0437\u0430 \u0440\u0430\u0437, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u044f \u0441\u0432\u043e\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u0442\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u0413\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u043f\u0435\u0440\u0435\u0431\u043e\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0435\u0439 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435.<\/p>\n<pre><code class=\"javascript\">\/\/ \u043f\u0440\u0438\u043c\u0435\u0440 1 function* takeItem(arr) {     for (let i = 0; i &lt; arr.length; i++) {         yield arr[i]     } }  const arr = ['foo', 'bar', 'baz', 'qux']  const generator = takeItem(arr)  const timer = setInterval(() =&gt; {         const item = generator.next()         item.done             ? clearInterval(timer)             : console.log(item.value)     }, 1000)  \/\/ \u043f\u0440\u0438\u043c\u0435\u0440 2 async function* range(start, end) {     for (let i = start; i &lt;= end; i++) {         yield Promise.resolve(i)     } }  ;(async () =&gt; {     const generator = range(1, 4)     for await (const item of generator) {         console.log(item)     } })() <\/code><\/pre>\n<p>  <\/p>\n<h3>3. Async\/await + fetch<\/h3>\n<p>  Async\/await \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043e\u0439 \u043f\u0440\u043e\u043c\u0438\u0441\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0412 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, fetch \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043e\u0439 XMLHttpRequest, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0441\u043e\u0431\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 (\u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, \u043f\u043e \u0441\u0435\u0442\u0438).<\/p>\n<pre><code class=\"javascript\">const url = 'https:\/\/jsonplaceholder.typicode.com\/users'  ;(async () =&gt; {     try {         const response = await fetch(url)         const data = await response.json()         console.table(data)     } catch (er) {         console.error(er)     } finally {         console.info('\u043f\u043e\u0442\u0440\u0430\u0447\u0435\u043d\u043e')     } })() <\/code><\/pre>\n<p>  <\/p>\n<h3>4. For await<\/h3>\n<p>  \u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 for await&#8230;of \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0446\u0438\u043a\u043b, \u043f\u0440\u043e\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0447\u0435\u0440\u0435\u0437 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0438\u0442\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0438\u0442\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u0438. \u041e\u043d \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u0445\u0443\u043a \u0441 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0434\u043b\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430.<\/p>\n<pre><code class=\"javascript\">const delayedPromise = (id, ms) =&gt; new Promise(resolve =&gt; {     const timer = setTimeout(() =&gt; {         resolve(id)         clearTimeout(timer)     }, ms) })  const promises = [     delayedPromise(1, 1000),     delayedPromise(2, 2000),     delayedPromise(3, 3000) ]  \/\/ \u0441\u0442\u0430\u0440\u044b\u0439 \u0441\u0442\u0438\u043b\u044c async function oldStyle() {     for (const promise of await Promise.all(promises)) {         console.log(promise)     } } oldStyle() \/\/ \u0432\u0441\u0435 \u043f\u0440\u043e\u043c\u0438\u0441\u044b \u0447\u0435\u0440\u0435\u0437 3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b  \/\/ \u043d\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u044c async function newStyle() {     for await (const promise of promises) {         console.log(promise)     } } newStyle() \/\/ \u043a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u043e\u043c\u0438\u0441 \u0432 \u0441\u0432\u043e\u0439 \u0447\u0435\u0440\u0435\u0434 <\/code><\/pre>\n<p>  <\/p>\n<h3>5. Proxy<\/h3>\n<p>  \u041f\u0440\u043e\u043a\u0441\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u043e\u0439 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0438 JS \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430 \u0432 \u0434\u0432\u0438\u0436\u043a\u0435 JS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 C++. \u041f\u0440\u043e\u043a\u0441\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 JS. \u0414\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043c\u0435\u0442\u0430\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">const person = {     firstname: 'Harry',     lastname: 'Heman',     city: 'Mountain View',     company: 'Google' }  const proxy = new Proxy(person, {     get(target, property) {         if (!(property in target)) {             return property                 .split('_')                 .map(p =&gt; target[p])                 .sort()                 .join(' ')         }         console.log(`\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e: ${property}`)         return target[property]     },     set(target, property, value) {         if (property in target) {             target[property] = value             console.log(`\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e: ${property}`)         } else {             console.error('\u043d\u0435\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430')         }     },     has(target, property) {         \/\/ return property in target         return Object.entries(target)             .flat()             .includes(property)     },     deleteProperty(target, property) {         if (property in target) {             delete target[property]             console.log(`\u0443\u0434\u0430\u043b\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e: ${property}`)         } else {             console.error('\u043d\u0435\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430')         }     } })  console.log(proxy.company_city_firstname_lastname) \/\/ Google Harry Heman Mountain View proxy.firstname = 'John' \/\/ \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e: firstname proxy.surname = 'Smith' \/\/ \u043d\u0435\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 console.log(proxy.city) \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e: city Mountain View console.log('company' in proxy) \/\/ true delete proxy.age \/\/ \u043d\u0435\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430  \/\/ proxy + cookie const getCookieObject = () =&gt; {     const cookies = document.cookie.split(';').reduce((cks, ck) =&gt; ({         [ck.substr(0, ck.indexOf('=')).trim()]: ck.substr(ck.indexOf('=') + 1),         ...cks     }), {})      const setCookie = (name, value) =&gt; document.cookie = `${name}=${value}`      const deleteCookie = name =&gt; document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:01 GTM;`      return new Proxy(cookies, {         set: (obj, prop, val) =&gt; (setCookie(prop, val), Reflect.set(obj, prop, val)),         deleteProperty: (obj, prop) =&gt; (deleteCookie(prop), Reflect.deleteProperty(obj, prop))     }) } <\/code><\/pre>\n<p>  <\/p>\n<h3>6. Reduce<\/h3>\n<p>  \u041c\u0435\u0442\u043e\u0434 <code>reduce()<\/code> \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>reducer<\/code> \u043a \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0435\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u0414\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0447\u0435\u0442\u044b\u0440\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430: \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 (\u0438\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430), \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0438\u043d\u0434\u0435\u043a\u0441 \u0438 \u0438\u0442\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 (\u0434\u0432\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c\u0438). \u0412 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">const arr = [1, 2, 3]  const total = arr.reduce((sum, cur) =&gt; sum + cur) console.log(total) \/\/ 6  \/\/ forEach let total2 = 0 arr.forEach(num =&gt; total2 += num) console.log(total2) \/\/ 6 <\/code><\/pre>\n<p>  \u041e\u0434\u043d\u0430\u043a\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 <code>reduce()<\/code> \u044d\u0442\u0438\u043c \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0438\u0441\u0447\u0435\u0440\u043f\u044b\u0432\u0430\u044e\u0442\u0441\u044f:<\/p>\n<pre><code class=\"javascript\">const devs = [     {         name: 'John',         sex: 'm',         age: 23     },     {         name: 'Jane',         sex: 'f',         age: 24     },     {         name: 'Alice',         sex: 'f',         age: 27     },     {         name: 'Bob',         sex: 'm',         age: 28     } ]  const men = devs.reduce((newArr, dev) =&gt; {     if (dev.sex === 'm') newArr.push(dev.name)     return newArr }, []) console.log(men) \/\/ [&quot;John&quot;, &quot;Bob&quot;]  \/\/ filter + map const olderThan25 = devs     .filter(dev =&gt; dev.age &gt; 25)     .map(dev =&gt; dev.name) console.log(olderThan25) \/\/ [&quot;Alice&quot;, &quot;Bob&quot;] <\/code><\/pre>\n<p>  \u0421\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u043c\u0435\u043d \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439:<\/p>\n<pre><code class=\"javascript\">const devsNamesList = `&lt;ul&gt;${devs.reduce((html, dev) =&gt; html += `&lt;li&gt;${dev.name}&lt;\/li&gt;`, '')}&lt;\/ul&gt;` document.body.innerHTML = devsNamesList  \/\/ map const devsNamesList2 = `&lt;ul&gt;${devs.map(dev =&gt; `&lt;li&gt;${dev.name}&lt;\/li&gt;`).join('')}&lt;\/ul&gt;` document.body.insertAdjacentHTML('beforeend', devsNamesList2) <\/code><\/pre>\n<p>  \u041f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u043a\u0435:<\/p>\n<pre><code class=\"javascript\">const groupBy = (arr, criteria) =&gt;     arr.reduce((obj, item) =&gt; {         const key = typeof criteria === 'function'             ? criteria(item)             : item[criteria]          if (!obj.hasOwnProperty(key)) obj[key] = ''         obj[key] = item          return obj     }, {})  const nums = [6.1, 4.2, 2.3] console.log(groupBy(nums, Math.floor)) \/\/ {2: 2.3, 4: 4.2, 6: 6.1}  \/\/ forEach const groupBy2 = (arr, criteria, obj = {}) =&gt; {     arr.forEach(item =&gt; {         const key = typeof criteria === 'function'             ? criteria(item)             : item[criteria]                  if (!obj.hasOwnProperty(key)) obj[key] = ''         obj[key] = item         return obj     })     return obj } const words = ['one', 'three', 'five'] console.log(groupBy2(words, 'length')) \/\/ {3: &quot;one&quot;, 4: &quot;five&quot;, 5: &quot;three&quot;} <\/code><\/pre>\n<p>  \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0432\u044b\u0431\u043e\u0440\u043a\u0443:<\/p>\n<pre><code class=\"javascript\">const cash = {     A: 1000,     B: 2000 }  const devsWithCash = devs.reduce((arr, dev) =&gt; {     const key = dev.name.substr(0,1)          if (cash[key]) {         dev.cash = cash[key]         arr.push(`${dev.name} =&gt; ${dev.cash}`)     } else dev.cash = 0      return arr }, []) console.log(devsWithCash) \/\/ [&quot;Alice =&gt; 1000&quot;, &quot;Bob =&gt; 2000&quot;]  \/\/ map + filter const devsWithCash2 = devs.map(dev =&gt; {     const key = dev.name.substr(0,1)      if (cash[key]) {         dev.cash = cash[key]     } else dev.cash = 0      return dev }).filter(dev =&gt; dev.cash !== 0) console.log(devsWithCash2) <\/code><\/pre>\n<p>  \u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440. \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u043a\u0430\u043a \u043c\u044b \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u043c\u0435\u043d \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438\u0437 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439? \u041d\u043e \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0438\u043c\u0435\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u043c\u0430\u0441\u0441\u0438\u0432:<\/p>\n<pre><code class=\"javascript\">const users = [     {         john: {             name: 'John'         }     },     {         jane: {             name: 'Jane'         }     },     {         alice: {             name: 'Alice'         }     },     {         bob: {             name: 'Bob'         }     } ] <\/code><\/pre>\n<p>  \u041a\u0430\u043a \u043d\u0430\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435?<\/p>\n<pre><code class=\"javascript\">document.body.insertAdjacentHTML('afterbegin', `&lt;ul&gt;${users.reduce((html, el) =&gt; html + `&lt;li&gt;${Object.values(el)[0].name}&lt;\/li&gt;`, '')}&lt;\/ul&gt;`) \/\/ \u0444\u0443\u0445! <\/code><\/pre>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u043e\u043f\u0440\u043e\u0449\u0435.<\/p>\n<h3>7. \u041d\u043e\u0432\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ trimStart() trimEnd() trim() const start = '   foo bar' const end = 'baz qux   '  console.log(`${start.trimStart()} ${end.trimEnd()}`) \/\/ foo bar baz qux  console.log((`${start} ${end}`).trim()) \/\/ \u0442\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435  const startMiddleEnd = '   foo  bar   baz  ' \/\/ \u0442\u0440\u0438 \u043f\u0440\u043e\u0431\u0435\u043b\u0430 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435, \u0434\u0432\u0430 - \u043c\u0435\u0436\u0434\u0443 foo \u0438 bar, \u0442\u0440\u0438 - \u043c\u0435\u0436\u0434\u0443 bar \u0438 baz \u0438 \u0434\u0432\u0430 - \u0432 \u043a\u043e\u043d\u0446\u0435  \/\/ \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c \u0434\u0432\u0430 \u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0431\u0435\u043b\u0430 \u043e\u0434\u043d\u0438\u043c \/\/ \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c trim() \u0443\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0438 \u043a\u043e\u043d\u0446\u0435 const stringWithoutRedundantSpaces = startMiddleEnd.replace(\/\\s{2,}\/g, ' ').trim()  console.log(stringWithoutRedundantSpaces) \/\/ foo bar baz  \/\/ padStart() padEnd() let str = 'google' str = str.padStart(14, 'https:\/\/') \/\/ \u043f\u0435\u0440\u0432\u044b\u0439 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 - \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 console.log(str) \/\/ https:\/\/google str = str.padEnd(18, '.com') console.log(str) \/\/ https:\/\/google.com <\/code><\/pre>\n<p>  <\/p>\n<h3>8. \u041d\u043e\u0432\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043c\u0430\u0441\u0441\u0438\u0432\u0430\u043c\u0438<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const arr = ['a', 'b', ['c', 'd'], ['e', ['f', 'g']]] console.log(arr.flat(2)) \/\/ [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot;, &quot;e&quot;, &quot;f&quot;, &quot;g&quot;]  const arr2 = ['react vue', 'angular', 'deno node']  console.log(arr2.map(i =&gt; i.split(' '))) \/*     [Array(2), Array(1), Array(2)]         0: (2) [&quot;react&quot;, &quot;vue&quot;]         1: [&quot;angular&quot;]         2: (2) [&quot;deno&quot;, &quot;node&quot;] *\/  console.log(arr2.flatMap(i =&gt; i.split(' '))) \/\/ [&quot;react&quot;, &quot;vue&quot;, &quot;angular&quot;, &quot;deno&quot;, &quot;node&quot;] <\/code><\/pre>\n<p>  <\/p>\n<h3>9. \u041d\u043e\u0432\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">const person = {     name: 'John',     age: 30 }  console.log(Object.getOwnPropertyDescriptor(person, 'name')) \/\/ {value: &quot;John&quot;, writable: true, enumerable: true, configurable: true}  const arr = Object.entries(person) console.log(arr) \/\/ [[&quot;name&quot;, &quot;John&quot;], [&quot;age&quot;, 30]] console.log(Object.fromEntries(arr))  for (const [key, value] of Object.entries(person)) {     console.log(`${key} =&gt; ${value}`) \/\/ name =&gt; John age =&gt; 30 }  console.log(Object.keys(person)) \/\/ [&quot;name&quot;, &quot;age&quot;] console.log(Object.values(person)) \/\/ [&quot;John&quot;, 30] <\/code><\/pre>\n<p>  <\/p>\n<h3>10. \u041f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 \u043a\u043b\u0430\u0441\u0441\u0430\u0445<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">class Person {     \/\/ \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e     static type = '\u0447\u0435\u043b\u043e\u0432\u0435\u043a'     static #area = '\u0417\u0435\u043c\u043b\u044f'     name = 'John'     #year = 1990      get age() {         return new Date().getFullYear() - this.#year     }      set year(age) {         if (age &gt; 0) {             this.#year = new Date().getFullYear() - age         }     }      get year() {         return this.#year     }      static area() {         return Person.#area     } }  const person = new Person() console.log(person) \/\/ Person\u00a0{name: &quot;John&quot;, #year: 1990} console.log(person.age) \/\/ 30 \/\/ console.log(person.#year) \/\/ error person.year = 28 console.log(person.year) \/\/ 1992 console.log(Person.type) \/\/ \u0447\u0435\u043b\u043e\u0432\u0435\u043a \/\/ console.log(Person.#area) \/\/ error console.log(Person.area()) \/\/ \u0417\u0435\u043c\u043b\u044f <\/code><\/pre>\n<p>  <\/p>\n<h3>11. \u0415\u0449\u0435 \u043f\u0430\u0440\u043e\u0447\u043a\u0430 \u043d\u043e\u0432\u043e\u0432\u0432\u0435\u0434\u0435\u043d\u0438\u0439<\/h3>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ \u043f\u0440\u043e\u043c\u0438\u0441\u044b const p1 = Promise.resolve(1) const p2 = Promise.reject('error') const p3 = Promise.resolve(3)  ;(async () =&gt; { const result = await Promise.all([p1, p2, p3]) console.log(result) })() \/\/ Uncaught (in promise) error  ;(async () =&gt; { const result = await Promise.allSettled([p1, p2, p3]) console.log(result) })() \/*     [{\u2026}, {\u2026}, {\u2026}]         0: {status: &quot;fulfilled&quot;, value: 1}         1: {status: &quot;rejected&quot;, reason: &quot;error&quot;}         2: {status: &quot;fulfilled&quot;, value: 3} *\/  \/\/ \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a null (nullish coercion) const values = {     undefined: undefined,     null: null,     false: false,     zero: 0,     empty: '' }  console.log(values.undefined || 'default undefined') console.log(values.undefined ?? 'default undefined') \/\/ default undefined  console.log(values.null || 'default null') console.log(values.null ?? 'default null') \/\/ default null  console.log(values.false || 'default false') \/\/ default false console.log(values.false ?? 'default false') \/\/ false  console.log(values.zero || 'default zero') \/\/ default zero console.log(values.zero ?? 'default zero') \/\/ 0  console.log(values.empty || 'default empty') \/\/ default empty console.log(values.empty ?? 'default empty') \/\/ ''  \/\/ \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0446\u0435\u043f\u043e\u0447\u043a\u0430 (optional chaining) const obj1 = {     foo: {         bar: {             baz: {                 qux: 'veryDeepInside'             }         }     } }  const obj2 = {     foo: {} }  \/\/ \u0441\u0442\u0430\u0440\u044b\u0439 \u0441\u0442\u0438\u043b\u044c function getValueOld(obj) {     if (obj.foo !== undefined &amp;&amp;     obj.foo.bar !== undefined &amp;&amp;     obj.foo.bar.baz !== undefined &amp;&amp;     obj.foo.bar.baz.qux !== undefined) {         return obj.foo.bar.baz.qux     } } console.log(getValueOld(obj1)) \/\/ veryDeepInside console.log(getValueOld(obj2)) \/\/ \u043d\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0438  \/\/ \u043d\u043e\u0432\u044b\u0439 \u0441\u0442\u0438\u043b\u044c const getValueNew = obj =&gt; obj?.foo?.bar?.baz?.qux console.log(getValueNew(obj1)) \/\/ veryDeepInside console.log(getValueNew(obj2)) \/\/ \u043d\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0438 <\/code><\/pre>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u043f\u043e\u0442\u0440\u0430\u0447\u0435\u043d\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u043e\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u043e\u0442\u0440\u0430\u0447\u0435\u043d\u043e \u043d\u0435 \u0437\u0440\u044f.<\/p>\n<p>  \u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442\u2026<\/p><\/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\/508494\/\"> https:\/\/habr.com\/ru\/post\/508494\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/508494\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/bj\/hd\/m8\/bjhdm8evuaa_gtghjyaljy9vk1u.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 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u044e \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0412\u0430\u043c\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043d\u0430\u0445\u043e\u0434\u043a\u0430\u043c\u0438, \u0441\u0434\u0435\u043b\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u043d\u043e\u0439 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f JavaScript. \u0414\u0430\u043d\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u0430, \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u043e\u0432\u044b\u043c \u0438 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u043c \u0444\u0438\u0447\u0430\u043c.<\/p>\n<p>  \u0421\u043c. <a href=\"https:\/\/habr.com\/ru\/post\/507298\/\">\u0424\u0438\u0447\u0438 JavaScript. \u0427\u0430\u0441\u0442\u044c 1<\/a>. <\/p>\n<h3>1. \u0427\u0430\u0441\u0442\u043e\u0435 \u043e\u0431\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043a \u043e\u0434\u043d\u0438\u043c \u0438 \u0442\u0435\u043c \u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c<\/h3>\n<p>  \u041f\u043e\u0440\u043e\u0439 \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043a\u043e\u0434\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043d\u043e\u0432\u0430 \u0438 \u0441\u043d\u043e\u0432\u0430 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043e\u0434\u043d\u0438\u043c \u0438 \u0442\u0435\u043c \u0436\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c. \u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 DOM, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f document \u0438 document.body. \u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0447\u0442\u043e \u0442\u0443\u0442 \u0442\u0430\u043a\u043e\u0433\u043e? 8 \u0438 13 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0434\u0430 \u0435\u0449\u0435 \u0438 emmet \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442. \u041e\u0434\u043d\u0430\u043a\u043e, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u0434\u0430 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e, \u0430\u0432\u0442\u043e\u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0442\u044c \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b. \u041b\u0438\u0431\u043e, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0448\u044c \u043d\u0435 \u0441 html, \u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441 php \u0431\u0435\u0437 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440\u0430, \u043c\u043d\u043e\u0433\u0438\u0435 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0435 \u0432\u0435\u0449\u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e. \u0417\u0430\u0434\u0443\u043c\u0430\u0432\u0448\u0438\u0441\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0440\u0435\u0448\u0438\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u044f \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043b \u043e canvas. \u041f\u043e\u043c\u043d\u0438\u0442\u0435, \u0441 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0445\u043e\u043b\u0441\u0442\u043e\u043c? \u041f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0441 \u0435\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u0432\u0443\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f:<\/p>\n<pre><code class=\"javascript\">const C = document.querySelector('canvas') const $ = C.getContext('2d') <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u044f \u043f\u043e\u0434\u0443\u043c\u0430\u043b \u043e\u0431 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 jQuery ($).<\/p>\n<p>  \u0422\u0430\u043a \u0432\u043e\u0442, \u043c\u043e\u0433\u0443 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u0442\u044c \u0442\u0440\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 (\u043e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u044f \u043f\u043e\u0434\u0433\u043b\u044f\u0434\u0435\u043b \u0443 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 Facebook \u043f\u0440\u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0430 Open Graph):  <\/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-306017","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/306017","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=306017"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/306017\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=306017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=306017"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=306017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}