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

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

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

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

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

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

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

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

JavaScript

123456789101112const 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” }];

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

JavaScript

1const secondUser = users[1];

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

JavaScript

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

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

JavaScript

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

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

JavaScript

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

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

JavaScript

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

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

READ
React VS Vue: Что лучше в 2020 году?

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

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

JavaScript

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

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

JavaScript

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

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

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

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

JavaScript

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

JavaScript

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

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

JavaScript

12345const 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, чтобы сделать их более понятными для пользователей. Рассмотрим следующий пример:

JavaScript

123let message = ”     Welcome to LogRocket      “;message.trimStart(); // “Welcome to LogRocket      “message.trimEnd(); // “Welcome to LogRocket”;

Object.fromEntries

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

READ
Советы по оптимизации JavaScript и улучшению загрузки сайта

JavaScript

1234567891011121314const 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 лет:

JavaScript

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

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

JavaScript

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

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

JavaScript

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

flat

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

JavaScript

1234567891011121314151617const 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’]]  }];

JavaScript

1234567const 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:

READ
10 лучших практик для создания и поддержки крупных проектов Vue.js

JavaScript

12345678910111213const 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 сглаживает массив полностью, независимо от его массива:

JavaScript

123456789101112131415161718const 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:

JavaScript

1234567let 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”]//]

JavaScript

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

Заключение

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

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

Автор: Gbolahan Olagunju

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

Комментарии

comments

Оценить статью
Блог о самом интересном.
Добавить комментарий