Фичи JavaScript. Часть 2 / forpes.ru

Главная
Фичи JavaScript. Часть 2

Фичи JavaScript. Часть 2 -5

27.06.2020 06:35

aio350 8 3200 Источник

Доброго времени суток, друзья!

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

См. Фичи JavaScript. Часть 1.

1. Частое обращение к одним и тем же элементам

Порой при написании кода приходится снова и снова обращаться к одним и тем же элементам. При работе с DOM, например, такими элементами являются document и document.body.

Существует, как минимум, три варианта решения указанной задачи:

    // внутри функции
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. Генератор

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

// пример 1
function* 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)

// пример 2
async 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 View
proxy.firstname = 'John' // изменено свойство: firstname
proxy.surname = 'Smith' // нет такого свойства
console.log(proxy.city) // получено свойство: city Mountain View
console.log('company' in proxy) // true
delete proxy.age // нет такого свойства

// proxy + cookie
const 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

// forEach
let total2 = 0
arr.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 + map
const 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

// map
const 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}

// forEach
const 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 + filter
const 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 qux

console.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://google
str = 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) // error
person.year = 28
console.log(person.year) // 1992
console.log(Person.type) // человек
// console.log(Person.#area) // error
console.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 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') // ''

// опциональная цепочка (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)) // veryDeepInside
console.log(getValueOld(obj2)) // нет ошибки

// новый стиль
const getValueNew = obj => obj?.foo?.bar?.baz?.qux
console.log(getValueNew(obj1)) // veryDeepInside
console.log(getValueNew(obj2)) // нет ошибки

Благодарю за потраченное время. Надеюсь, оно было потрачено не зря.

Продолжение следует…

Комментарии (8)

dopusteam
27.06.2020 10:19
#21782510
+4
О чем вообще первый пункт? Перечитал несколько раз, ни проблему ни решение не понял
1. anonymous
  27.06.2020 13:06
  #21782838
  Первый пункт совсем элементарный. Насколько я понял речь идет про то, что не стоит многократно вызывать getElementById/querySelector для получение одного и того же элемента. Лучше завести переменную и обращаться к элементу через нее
  
  В целом, тексту не хватает описаний тех самых «фичей». Если в начале текста хоть какие-то описания присутствовали, то к концу все свелось к мало информативным примерам.
  
  Несмотря на это, спасибо автору за статью. Нашел для себя пару интересных моментов.
  1. dopusteam
    28.06.2020 08:35
    #21785044
    Насколько я понял речь идет про то, что не стоит многократно вызывать getElementById/querySelector для получение одного и того же элемента. Лучше завести переменную и обращаться к элементу через нее
    
    Мало того, что это не фича js, так это вообще не фича :)

Serge78rus
27.06.2020 10:39
#21782546
+2
Стандартная семантика реализована в движке JS, который обычно написан на низкоуровневом языке программирования, например C++.
С чего это вдруг C++ стал низкоуровневым языком?

vvadzim
27.06.2020 15:12
#21783112
+1
Только осторожнее с for-await-of. Оно может итерировать не только асинхронные генераторы, но и синхронные. Но при этом ведёт себя почти также, но не совсем как for-of, в пограничных случаях. Можно в отладку надолго залезть.
1. vivcogit
  28.06.2020 15:58
  #21786242
  Прям заинтриговали. А можете дать пример где видно эту разницу?
  1. vvadzim
    29.06.2020 18:30
    #21791044
    bugzilla.mozilla.org/show_bug.cgi?id=1610315
    
    Оно не всегда вызывает блоки finally в генераторах. Синхронный for-of — всегда.

vvadzim
29.06.2020 19:32
#21791250
[не туда]