Возможности ES7 + ES8

Здесь мы обсудим некоторые функции ES7 и ES8:

Array.prototype.includes()

Array.prototype.includes немного похож на indexOf, но вместо индекса элемента возвращает значение true или false:

['a', 'b', 'c'].includes('a') // true, not 0 like indexOf
['a', 'b', 'c'].includes('d') // false

Возведение в степень

JavaScript представил сокращенный метод возведения в степень:

// 2 to the power of 8
Math.pow(2, 8) // 256

// exponentiation
2 ** 8 // 256

Завершающие запятые

Бывают случаи, когда конечная запятая полностью разрушает ваш код JavaScript в каком-то браузере. JavaScript теперь позволяет использовать дополнительную запятую:

let myObj = { a:'A', b: 'B', } // No error!

let myArr = [1, 2,] // No error!

[1, 2,].length // 2
[1, 2, 3, , , ,].length // 6

Объект.записи

Object.entries позволяет нам получить перечисляемые пары свойств объекта в формате массива ([ключ, значение]):

//Object literal
Object.entries({ 'a': 'A', 'b': 'B' }); // [["a","A"],["b","B"]]

// String
Object.entries('hey') // [["0","h"],["1","e"],["2","y"]

Object.entries следует тому же порядку, что и for...in.

Объект.значения

Object.keys возвращает массив ключей в объекте, тогда как Object.values возвращает массив значений:

// Object literal
Object.values({ 'a': A, 'b': B}) // [A, B]
// Array-like object (order not preserved)
Object.values({ a: 'A', b: 1, c: 'C' }) // [1, 'A', 'C']
// String
Object.values('hey') // ["h", "e", "y"]
// Array
Object.values([1, 2]) // [1, 2]

Object.values предоставляет записи значений в литералах объектов, массивах, строках и т. д.

String.prototype.padStart/padEnd

padStart и padEnd позволяют нам дополнить данную строку любым текстом по нашему выбору, чтобы убедиться, что строка соответствует заданной длине:

padStart syntax is padStart(desiredLength,textToPrepend);

padEnd syntax is padEnd(desiredLength,textToAppend);

// No text
''.padStart(10, 'Hi') // 'HiHiHiHiHi'
// Some text
'def'.padStart(6, 'abc') // 'abcdef'
// Only use what gets to length
'5678'.padStart(7, '1234') // '1235678'
'23'.padEnd(8, '0') // '23000000'

Одно из применений padStart может включать в себя добавление кода города к номеру телефона, если пользовательский ввод имеет неправильную длину. padEnd можно использовать для десятичной точности.

Асинхронные функции (асинхронные и ожидающие)

Промисы, которые мы используем для обработки асинхронных задач. Хотя промисы были лучше, чем ад обратных вызовов, они по-прежнему требуют большого количества then, что может привести к беспорядку. Появляются ключевые слова ES7async и await для упрощения обработки промисов. async — это ключевое слово для объявления функции. await используется во время обработки промисов. await должно использоваться в функции async. awaitasync функции возвращают промис, независимо от того, какое значение return находится внутри функцииasync/await, а промисы, по сути, одинаковы внутри.

// Before: callback hell!
fetch('/data.json')
  .then(response => response.json())
  .then(json => {
    console.log(json);
  })
  .catch(e => { console.log('Err!',e); })

// After: no more callbacks!
async function getJson() {
  try {
    let response = await fetch('/data.json');
    let json = await response.json();
    console.log(json);
  }
  catch(e) {
    console.log('Err!', e);
  }
}

Object.getOwnPropertyDescriptors()

Он возвращает все собственные (не унаследованные) дескрипторы свойств объекта. Атрибуты возвращаемого объекта могут быть: value, writable, get, set, configurable и enumerable.

const obj = {
    name: 'Pablo',
    get foo() { return 42; }
};
Object.getOwnPropertyDescriptors(obj);
//
// {
//  "name": {
//     "value": "Pablo",
//     "writable":true,
//     "enumerable":true,
//     "configurable":true
//  },
//  "foo":{
//     "enumerable":true,
//     "configurable":true,
//     "get": function foo()
//     "set": undefined
//  }
// }

Благодаря разным статьям в СМИ, которые помогли мне понять все это: D

Приятного чтения!

Возможности ES7 + ES8 — обзор