Новые и готовящиеся функции JavaScript ES2019

25.10.2019 Комментарии к записи Новые и готовящиеся функции JavaScript ES2019 отключены 433 Просмотров

От автора: с самого начала JavaScript прошел долгий путь со многими новыми дополнениями и функциями, специально разработанными для того, чтобы сделать язык более удобным и менее многословным. Ниже приведены некоторые недавние добавления в JavaScript, которые я нахожу захватывающими.

Некоторые из этих функций уже доступны в Node, Chrome, Firefox и Safari, в то время как другие все еще находятся на стадии предложения.

Опциональные цепочки

Опциональные цепочки реализуются с помощью оператора «?.». Это прежде всего гарантирует, что предыдущее значение перед знаком вопроса не будет ни неопределенным, ни нулевым. Это действительно полезно при оценке свойств глубоко вложенных объектов.

Необходимо убедиться, что оператор «?.» существует, прежде чем оценивать свойства. Рассмотрим следующий пример:

const users = [ { name: "Olagunju Gbolahan", occupation: "Software Developer", sayName(){ console.log(`my name is ${this.name}`); }, address: { office: "New York" } }, { name: "Olawaseyi Moses" }, { name: "Tunde Ednut" }
];

Давайте рассмотрим второго пользователя в массиве пользователей:

const secondUser = users[1];

Мы можем захотеть получить адрес офиса этого пользователя. До появления оператора опциональных цепочек нам пришлось бы выполнить относительно неэффективный процесс для получения этой информации:

const theAddress = secondUser.address && secondUser.address.office;
console.log(theAddress); // undefined

Если бы у нас был глубоко вложенный объект, мы должны были бы проверить, существует ли его значение, используя оператор && на каждом уровне. Но с опциональными цепочками мы просто делаем следующее:

const theAddress = secondUser?.address?.office;
console.log(theAddress); // undefined

Мы также можем использовать это для методов объектов, чтобы проверить их существование перед выполнением:

const firstUser = users[0];
console.log(firstUser.sayName?.()); // my name is Olagunju Gbolahan

Он просто вернется undefined, если метод с данным именем не существует в объекте.

console.log(firstUser.sayOccupation?.()); // undefined

Поскольку оператор опциональных цепочек еще не добавлен в спецификацию JavaScript, он все еще находится на стадии предложения. Вы можете использовать его сегодня с плагином babel-plugin-offer-Additional-Chaining.

Опциональная привязка перехвата

Эта функция пригодится, когда мы заранее знаем, какой будет ошибка, и не хотим вводить избыточные неиспользуемые переменные. Рассмотрим традиционный блок try and catch:

try { const parsedJsonData = JSON.parse(obj);
} catch (error) { //the variable error has to be declared whether used or unused console.log(obj);
}

Но с добавлением опциональной привязки перехвата нам не нужно предоставлять неиспользуемые переменные — особенно когда у нас есть значения по умолчанию для блока try.

function getName () { let name = "Gbolahan Olagunju"; try { name = obj.details.name } catch {} console.log(name);
}

Оператор конвейера

Это одно из предложенных дополнений к Javascript, и в настоящее время оно находится на стадии 1. Это существенно помогает сделать несколько вызовов функций для одного и того же аргумента доступными для чтения.

Это делается путем передачи значения выражения в качестве аргумента(ов) функции. Попробуйте вызвать следующие функции без оператора конвейера |>.

const capitalize = (input) => input[0].toUpperCase() + input.substring(1);
const removeSpaces = (input) => input.trim();
const repeat = (input) => `${input}, ${input}`;

const withoutpipe = repeat(capitalize(removeSpaces(' i am gbols ')));
console.log(withoutpipe); // I am gbols, I am gbols

Но с оператором конвейера читаемость может быть значительно улучшена:

const withpipe = ' i am gbols ' |> removeSpaces |> capitalize |> repeat;
console.log(withpipe); // // I am gbols, I am gbols

String.trimStart и String.trimEnd

Это формально называлось trimRight и trimLeft, но в ES2019 имена были изменены на псевдонимы trimStart и trimEnd, чтобы сделать их более понятными для пользователей. Рассмотрим следующий пример:

let message = " Welcome to LogRocket ";
message.trimStart(); // "Welcome to LogRocket "
message.trimEnd(); // "Welcome to LogRocket";

Object.fromEntries

Прежде чем говорить о Object.fromEntries, важно рассмотреть о Object.entries. Метод Object.entries был добавлен в спецификацию ES2017, чтобы обеспечить способ преобразования объекта в эквивалент его массива, предоставляя ему доступ ко всем методам массива для обработки. Рассмотрим следующий объект:

const devs = { gbols: 5, andrew: 3, kelani: 10, dafe: 8,
};
const arrOfDevs = Object.entries(devs);
console.log(arrOfDevs);
//[
// ["gbols", 5]
// ["andrew", 3]
// ["kelani", 10]
// ["dafe", 8]
//]

Теперь мы можем использовать для массивов метод filter, чтобы получить разработчиков, которые имеют опыт работы более 5 лет:

const expDevs = arrOfDevs.filter(([name, yrsOfExp]) => yrsOfExp > 5);
console.log(expDevs);
//[
// ["kelani", 10]
// ["dafe", 8]
//]

Теперь возникает проблема: у нас нет простого способа преобразовать результаты обратно в объект. Обычно мы пишем собственный код, чтобы преобразовать его обратно в объект:

const expDevsObj = {};
for (let [name, yrsOfExp] of expDevs) {
expDevsObj[name] = yrsOfExp;
}
console.log(expDevsObj);
//{ //dafe: 8 //kelani: 10
//}

Но с введением Object.fromEntries мы можем сделать это одним движением:

console.log(Object.fromEntries(expDevs));
//{ //dafe: 8 //kelani: 10
//}

flat

Часто у нас есть глубоко вложенные массивы для обработки в результате вызова API. В этом случае особенно важно сгладить массив. Рассмотрим следующий пример:

const developers = [ { name: 'Gbolahan Olagunju', yrsOfExp: 6, stacks: ['Javascript', 'NodeJs', ['ReactJs', ['ExpressJs', 'PostgresSql']]] }, { name: 'Daniel Show', yrsOfExp: 2, stacks: ['Ruby', 'Jest', ['Rails', ['JQuery', 'MySql']]] }, { name: 'Edafe Emunotor', yrsOfExp: 9, stacks: ['PHP', 'Lumen', ['Angular', 'NgRx']] }
];

const allStacks = developers.map(({stacks}) => stacks);
console.log(allStacks);
// [
// ['Javascript', 'NodeJs', ['ReactJs', ['ExpressJs', 'PostgresSql']]]
// ['Ruby', 'Jest', ['Rails', ['JQuery', 'MySql']]]
// ['PHP', 'Lumen', ['Angular', 'NgRx']]
// ]

Переменная allstacks содержит глубоко вложенные массивы. Чтобы сгладить этот массив, мы можем использовать Array.prototype.flat:

const flatSingle = allStacks.flat();
console.log(flatSingle);
//[
// "JavaScript",
// "NodeJs",
// ['ReactJs', ['ExpressJs', 'PostgresSql']]]
// "Ruby",
// "Jest",
// ['Rails', ['JQuery', 'MySql']]]
// "PHP",
// "Lumen"
// ["Angular", "NgRx"]
//]

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

Мы можем передать аргумент плоскому методу, чтобы определить степень, до которой мы хотим сгладить массив.

Значение аргумента по умолчанию — 1. Чтобы полностью сгладить массив, мы можем передать аргумент Infinity. Аргумент Infinity сглаживает массив полностью, независимо от его массива:

const completelyFlat = allStacks.flat(Infinity);
console.log(completelyFlat);
//[
// "JavaScript",
// "NodeJs",
// "ReactJs",
// "ExpressJs",
// "PostgresSql",
// "Ruby",
// "Jest",
// "Rails",
// "JQuery",
// "MySql",
// "PHP",
// "Lumen",
// "Angular",
// "NgRx"
//]

FlatMap

FlatMap представляет собой комбинацию вызова метода map и метода flat с глубиной 1. Часто это очень полезно, поскольку делает то же самое очень эффективным образом. Ниже приведен простой пример использования map и flatMap:

let arr = ['my name is Gbols', ' ', 'and i am great developer']; console.log(arr.map(word => word.split(' ')));
//[
// ["my", "name", "is", "Gbols"],
// ["", ""],
// ["and", "i", "am", "great", "developer"]
//]

console.log(arr.flatMap(word => word.split(' ')));
//[ "my"
// "name"
// "is"
// "Gbols"
// ""
// ""
// "and"
// "i"
// "am"
// "great"
// "developer"
//]

Заключение

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

Ниже приведено несколько новых функций, которые мы не рассмотрели: JSON.stringify, Sort stability.

Автор: Gbolahan Olagunju

Источник: https://blog.logrocket.com

Редакция: Команда webformyself.

Все про сайтостроение