dr.Brain

doctor Brain

мир глазами веб-разработчика

ES2019 (ES10) новые функции

кое-что о новых полезных функциях ES2019

dr.Brain

время чтения 4 мин.

Photo by Arlington Research on Unsplash

Очередная, 10 редакция ECMAScript, именуемая ECMAScript 2019, содержит в своей спецификации большое количество новых полезных функций. В этой статье мы обратим внимание на самые полезные, с моей точки зрения, функции, необходимые веб-разработчику.

Для того чтобы запустить перечисленные ниже примеры нам потребуется node.js версии 12 или выше. Если Node.js 12 нужно установить в среде Ubuntu-Debian-Mint, воспользуйтесь следующим кодом:

$sudo apt update
$sudo apt -y upgrade
$sudo apt update
$sudo apt -y install curl dirmngr apt-transport-https lsb-release  ca-certificates
$curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
$sudo apt -y install nodejs

Так же Вы можете воспроизвести примеры в консоли панели разработчика (ALT + J) браузера Chrome 72.

Array.prototype.flat && Array.prototype. flatMap

Метод flat() возвращает новый массив, объединенный с вложенными массивами, которые рекурсивно поднимаются на заданный уровень depth.

let array1 = ['a','b', [1, 2, 3]];
let array2 = array1.flat();
//['a', 'b', 1, 2, 3]

Так же этот метод удаляет пустые элменты:

let array1 = ['a', 'b', , , , 'c'];
let array2 = array1.flat();
// ['a','b','c']

Метод flatMap() по своему действию подобен использованию функции map() c последующим применением метода flat(). То есть, к каждому элементу массива применяется функция, результат преобразуется в плоскую структуру и помещается в новый массив.

let array1 = [1, 2, 3, 4];
array1.flatMap(x => [x + 1]);
// [2, 3, 4, 5]

Object.fromEntries()

Метод fromEntries() создает объект или преобразует пары “ключ - значение” в объект. Метод применим только для итерируемых значений (таких как Array или Map).

const obj = { a: 1, b: 2, c: 3};

const entries = Object.entries(obj);
// entries
(3) [Array(2), Array(2), Array(2)]
0: (2) ["a", 1]
1: (2) ["b", 2]
2: (2) ["c", 3]

const obj2 = Object.fromEntries(entries)
// {a: 1, b: 2, c: 3}

String.trimStart() & String.trimEnd()

Методы trimStart() и trimEnd() пока не стандартизированы. Они предназначены для удаления пробелов, соответстенно, в начале или в конце строки.

let result = '      hello!'.trimStart();
// "hello!"

let cadena = 'hello      '.trimEnd()
// "hello!"

Optional Catch Binding

Optional Catch Binding - необязательная привязка переменной исключения к оператору catch. Рассмотрим примеры.

С привязкой (without Optional Catch Binding):

try {
    // do something
} catch (e) {
    // we have error parameter to handle it
}

Без привязки (with Optional Catch Binding):

try {
    // do something
} catch {
    // no binding or parameter to handle it
}

Используя такой подход, нужно помнить, что он не является рекомендуемым к использованию, так как анализ обработки ошибки - несомненно лучший вариант. Тем не менее, у каждого из нас могут возникать ситуации, когда мы точного знаем вероятную ошибку и готовы полностью игнорировать ее обработку.

Новая редакция функции toString

Теперь функция toString() возвращает исходный текст кода функции, сохраняя грамматику и комментарии.

function /* kk*/ foo() { /* cc */ }

// before:
foo.toString();
// "function foo() {}"

// Now:
foo.toString();
//"function /* kk*/ foo() { /* cc */ }"

Array.Sort Stability

Ранее использовался нестабильный алгоритм быстрой сортировки (QuickSort) для массивов, содержащих более десяти элементов, на смену которому пришел стабильный алгоритм сортировки (TimSort).

const array1 = [
 { name: "a",   age: 14 },
 { name: "b", age: 14 },
 { name: "c",  age: 13 },
 { name: "d",   age: 13 },
 { name: "e",   age: 13 },
 { name: "f",    age: 13 },
 { name: "g",   age: 13 },
 { name: "h",  age: 13 },
 { name: "i",   age: 12 },
 { name: "j",   age: 12 },
 { name: "k",    age: 12 }
]

const array2 = array1.sort()

/*
0: {name: "a", age: 14}
1: {name: "b", age: 14}
2: {name: "c", age: 13}
3: {name: "d", age: 13}
4: {name: "e", age: 13}
5: {name: "f", age: 13}
6: {name: "g", age: 13}
7: {name: "h", age: 13}
8: {name: "i", age: 12}
9: {name: "j", age: 12}
10:{name: "k", age: 12}
*/

Symbol.description

Новое свойство Symbol.prototype.description возвращает необязательное описание объекта Symbol.

Symbol('desc').toString();
// "Symbol(desc)"

Symbol('desc').description;  
//"desc"

Symbol('').description;      
// ""

Symbol().description;
// undefined

Спасибо за внимание.


Перевод статьи Kesk noren “New JavaScript features in ES2019(ES10)”.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.