Доброго времени суток, друзья!
В этой статье я продолжаю делиться с Вами некоторыми находками,
сделанными мной в процессе изучения JavaScript. Данная часть
посвящена, преимущественно, новым и продвинутым фичам.
См.
Фичи JavaScript. Часть 1.
1. Частое обращение к одним и тем же элементам
Порой при написании кода приходится снова и снова обращаться к
одним и тем же элементам. При работе с DOM, например, такими
элементами являются document и document.body. Казалось бы, что тут
такого? 8 и 13 символов, соответственно, да еще и emmet помогает.
Однако, когда кода действительно много, автозавершение начинает
предлагать неправильные варианты. Либо, когда работаешь не с html,
а, например, с php без правильного синтаксического анализатора,
многие привычные вещи приходится набирать вручную. Задумавшись о
том, как решить указанную проблему, я вспомнил о canvas. Помните, с
чего начинается работа с холстом? Правильно, с его определения и
инициализации двумерного контекста рисования:
const C = document.querySelector('canvas')const $ = C.getContext('2d')
Также я подумал об объекте jQuery ($).
Так вот, могу предложить три варианта (один из вариантов я
подглядел у разработчиков Facebook при изучении протокола Open
Graph):
// внутри функции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()// снаружи функции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) => { 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)
Это была разминка, переходим к тренировке.
2. Генератор
Генератор это особая функция, которая работает как фабрика
итераторов. Объект является итератором, если он умеет обращаться к
элементам коллекции по одному за раз, при этом отслеживая свое
текущее положение внутри этой последовательности. Генераторы
позволяют определить алгоритм перебора элементов коллекции с
помощью единственной функции, поддерживающей собственное
состояние.
// пример 1function* takeItem(arr) { for (let i = 0; i < arr.length; i++) { yield arr[i] }}const arr = ['foo', 'bar', 'baz', 'qux']const generator = takeItem(arr)const timer = setInterval(() => { const item = generator.next() item.done ? clearInterval(timer) : console.log(item.value) }, 1000)// пример 2async function* range(start, end) { for (let i = start; i <= end; i++) { yield Promise.resolve(i) }};(async () => { const generator = range(1, 4) for await (const item of generator) { console.log(item) }})()
3. Async/await + fetch
Async/await является альтернативой промисов, позволяя обеспечить
синхронность выполнения асинхронных функций. В свою очередь, fetch
является альтернативой XMLHttpRequest, представляя собой интерфейс
для получения ресурсов (в том числе, по сети).
const url = 'https://jsonplaceholder.typicode.com/users';(async () => { try { const response = await fetch(url) const data = await response.json() console.table(data) } catch (er) { console.error(er) } finally { console.info('потрачено') }})()
4. For await
Выражение for await...of создает цикл, проходящий через асинхронные
итерируемые объекты, а также синхронные итерируемые сущности. Он
вызывает пользовательский итерационный хук с инструкциями, которые
должны быть выполнены для значения каждого отдельного свойства
объекта.
const delayedPromise = (id, ms) => new Promise(resolve => { const timer = setTimeout(() => { resolve(id) clearTimeout(timer) }, ms)})const promises = [ delayedPromise(1, 1000), delayedPromise(2, 2000), delayedPromise(3, 3000)]// старый стильasync function oldStyle() { for (const promise of await Promise.all(promises)) { console.log(promise) }}oldStyle() // все промисы через 3 секунды// новый стильasync function newStyle() { for await (const promise of promises) { console.log(promise) }}newStyle() // каждый промис в свой черед
5. Proxy
Прокси используются для объявления расширенной семантики JS
объектов. Стандартная семантика реализована в движке JS, который
обычно написан на низкоуровневом языке программирования, например
C++. Прокси позволяют определить поведение объекта при помощи JS.
Другими словами, они являются инструментом
метапрограммирования.
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 => target[p]) .sort() .join(' ') } console.log(`получено свойство: ${property}`) return target[property] }, set(target, property, value) { if (property in target) { target[property] = value console.log(`изменено свойство: ${property}`) } else { console.error('нет такого свойства') } }, 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(`удалено свойство: ${property}`) } else { console.error('нет такого свойства') } }})console.log(proxy.company_city_firstname_lastname) // Google Harry Heman Mountain Viewproxy.firstname = 'John' // изменено свойство: firstnameproxy.surname = 'Smith' // нет такого свойстваconsole.log(proxy.city) // получено свойство: city Mountain Viewconsole.log('company' in proxy) // truedelete proxy.age // нет такого свойства// proxy + cookieconst getCookieObject = () => { const cookies = document.cookie.split(';').reduce((cks, ck) => ({ [ck.substr(0, ck.indexOf('=')).trim()]: ck.substr(ck.indexOf('=') + 1), ...cks }), {}) const setCookie = (name, value) => document.cookie = `${name}=${value}` const deleteCookie = name => document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:01 GTM;` return new Proxy(cookies, { set: (obj, prop, val) => (setCookie(prop, val), Reflect.set(obj, prop, val)), deleteProperty: (obj, prop) => (deleteCookie(prop), Reflect.deleteProperty(obj, prop)) })}
6. Reduce
Метод
reduce() применяет функцию
reducer
к каждому элементу массива, возвращая результирующее значение.
Данный метод принимает четыре аргумента: начальное значение (или
значение предыдущей функции обратного вызова), значение текущего
элемента, текущий индекс и итерируемый массив (два последних
являются необязательными). В простейшем случае это выглядит
так:
const arr = [1, 2, 3]const total = arr.reduce((sum, cur) => sum + cur)console.log(total) // 6// forEachlet total2 = 0arr.forEach(num => total2 += num)console.log(total2) // 6
Однако возможности
reduce() этим далеко не
исчерпываются:
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) => { if (dev.sex === 'm') newArr.push(dev.name) return newArr}, [])console.log(men) // ["John", "Bob"]// filter + mapconst olderThan25 = devs .filter(dev => dev.age > 25) .map(dev => dev.name)console.log(olderThan25) // ["Alice", "Bob"]
Сформируем список имен разработчиков одной строкой:
const devsNamesList = `<ul>${devs.reduce((html, dev) => html += `<li>${dev.name}</li>`, '')}</ul>`document.body.innerHTML = devsNamesList// mapconst devsNamesList2 = `<ul>${devs.map(dev => `<li>${dev.name}</li>`).join('')}</ul>`document.body.insertAdjacentHTML('beforeend', devsNamesList2)
Поговорим о группировке:
const groupBy = (arr, criteria) => arr.reduce((obj, item) => { 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}// forEachconst groupBy2 = (arr, criteria, obj = {}) => { arr.forEach(item => { 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: "one", 4: "five", 5: "three"}
Сделаем выборку:
const cash = { A: 1000, B: 2000}const devsWithCash = devs.reduce((arr, dev) => { const key = dev.name.substr(0,1) if (cash[key]) { dev.cash = cash[key] arr.push(`${dev.name} => ${dev.cash}`) } else dev.cash = 0 return arr}, [])console.log(devsWithCash) // ["Alice => 1000", "Bob => 2000"]// map + filterconst devsWithCash2 = devs.map(dev => { const key = dev.name.substr(0,1) if (cash[key]) { dev.cash = cash[key] } else dev.cash = 0 return dev}).filter(dev => dev.cash !== 0)console.log(devsWithCash2)
И последний пример. Помните, как мы формировали список имен
разработчиков из массива объектов одной строкой? Но что если у нас
имеется такой массив:
const users = [ { john: { name: 'John' } }, { jane: { name: 'Jane' } }, { alice: { name: 'Alice' } }, { bob: { name: 'Bob' } }]
Как нам сделать тоже самое?
document.body.insertAdjacentHTML('afterbegin', `<ul>${users.reduce((html, el) => html + `<li>${Object.values(el)[0].name}</li>`, '')}</ul>`) // фух!
Давайте рассмотрим что-нибудь попроще.
7. Новые методы работы со строками
// trimStart() trimEnd() trim()const start = ' foo bar'const end = 'baz qux 'console.log(`${start.trimStart()} ${end.trimEnd()}`) // foo bar baz quxconsole.log((`${start} ${end}`).trim()) // тоже самоеconst startMiddleEnd = ' foo bar baz ' // три пробела в начале, два - между foo и bar, три - между bar и baz и два - в конце// при помощи регулярного выражения заменяем два и более пробела одним// затем посредством trim() удаляем пробелы в начале и концеconst stringWithoutRedundantSpaces = startMiddleEnd.replace(/\s{2,}/g, ' ').trim()console.log(stringWithoutRedundantSpaces) // foo bar baz// padStart() padEnd()let str = 'google'str = str.padStart(14, 'https://') // первый аргумент - количество символовconsole.log(str) // https://googlestr = str.padEnd(18, '.com')console.log(str) // https://google.com
8. Новые методы работы с массивами
const arr = ['a', 'b', ['c', 'd'], ['e', ['f', 'g']]]console.log(arr.flat(2)) // ["a", "b", "c", "d", "e", "f", "g"]const arr2 = ['react vue', 'angular', 'deno node']console.log(arr2.map(i => i.split(' ')))/* [Array(2), Array(1), Array(2)] 0: (2) ["react", "vue"] 1: ["angular"] 2: (2) ["deno", "node"]*/console.log(arr2.flatMap(i => i.split(' '))) // ["react", "vue", "angular", "deno", "node"]
9. Новые методы работы с объектами
const person = { name: 'John', age: 30}console.log(Object.getOwnPropertyDescriptor(person, 'name')) // {value: "John", writable: true, enumerable: true, configurable: true}const arr = Object.entries(person)console.log(arr) // [["name", "John"], ["age", 30]]console.log(Object.fromEntries(arr))for (const [key, value] of Object.entries(person)) { console.log(`${key} => ${value}`) // name => John age => 30}console.log(Object.keys(person)) // ["name", "age"]console.log(Object.values(person)) // ["John", 30]
10. Приватные переменные в классах
class Person { // значения по умолчанию static type = 'человек' static #area = 'Земля' name = 'John' #year = 1990 get age() { return new Date().getFullYear() - this.#year } set year(age) { if (age > 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{name: "John", #year: 1990}console.log(person.age) // 30// console.log(person.#year) // errorperson.year = 28console.log(person.year) // 1992console.log(Person.type) // человек// console.log(Person.#area) // errorconsole.log(Person.area()) // Земля
11. Еще парочка нововведений
// промисыconst p1 = Promise.resolve(1)const p2 = Promise.reject('error')const p3 = Promise.resolve(3);(async () => {const result = await Promise.all([p1, p2, p3])console.log(result)})() // Uncaught (in promise) error;(async () => {const result = await Promise.allSettled([p1, p2, p3])console.log(result)})()/* [{}, {}, {}] 0: {status: "fulfilled", value: 1} 1: {status: "rejected", reason: "error"} 2: {status: "fulfilled", value: 3}*/// приведение к 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 undefinedconsole.log(values.null || 'default null')console.log(values.null ?? 'default null')// default nullconsole.log(values.false || 'default false') // default falseconsole.log(values.false ?? 'default false') // falseconsole.log(values.zero || 'default zero') // default zeroconsole.log(values.zero ?? 'default zero') // 0console.log(values.empty || 'default empty') // default emptyconsole.log(values.empty ?? 'default empty') // ''// опциональная цепочка (optional chaining)const obj1 = { foo: { bar: { baz: { qux: 'veryDeepInside' } } }}const obj2 = { foo: {}}// старый стильfunction getValueOld(obj) { if (obj.foo !== undefined && obj.foo.bar !== undefined && obj.foo.bar.baz !== undefined && obj.foo.bar.baz.qux !== undefined) { return obj.foo.bar.baz.qux }}console.log(getValueOld(obj1)) // veryDeepInsideconsole.log(getValueOld(obj2)) // нет ошибки// новый стильconst getValueNew = obj => obj?.foo?.bar?.baz?.quxconsole.log(getValueNew(obj1)) // veryDeepInsideconsole.log(getValueNew(obj2)) // нет ошибки
Благодарю за потраченное время. Надеюсь, оно было потрачено не
зря.
Продолжение следует
27.06.2020 14:19:52 |
Автор: 
Категории: 
Переключатель на Айфонах
Переключатель на OnePlus (здесь три
положения, в отличие от Айфона)
