Рубрики
Без рубрики

JavaScript ES6: 3 классных функций, которые вы должны использовать

Хотите узнать что-то новое о JavaScript? Прочитайте этот пост и узнайте 3 новых функция в ES6, которые вы должны использовать.

Автор оригинала: Olawale Akinseye.

Поскольку сообщество JavaScript продолжало расти в предыдущие годы, с JavaScript в качестве языка произошло много хороших вещей. Одно из тех хороших вещей было его проникновение в мир разработки на стороне сервера через Node.js, которые внезапно сделали разработчики JavaScript во всем мире еще более мощным.

Сегодня я хотел бы обсудить три прекрасных новых функция, представленных на языке в своем выпуске спецификации ECMA2015 (ES6) и, надеюсь, убедив вас начать писать ES6, если вы этого не делаете.

Этот пост не является обширным руководством к функциям ES6, он написан как введение в функции и, следовательно, не глубоко погрузится в функции. Ни в этой статье не будет адресовать плюсы и минусы каждой особенности.

Функция стрелки

Если вы являетесь разработчиком JavaScript, вы уже знаете добрый добрый способ объявления функций.

Вот простая функция, которая преобразует отметку эпохи в читаемую форму человека.

Добрый путь

function dateFromTimeStamp(timeStamp) {
  var humanReadableDate = new Date(timeStamp);
    return humanReadableDate;
}
dateFromTimeStamp(1489957823485); //Sun Mar 19 2017 22:10:23 GMT+0100 (WAT)

ES2015

var dateFromTimeStamp = timeStamp => new Date(timeStamp);
dateFromTimeStamp(1489957823485); //Sun Mar 19 2017 22:10:23 GMT+0100 (WAT)

Как видите, код выглядит короче и очиститель – мы можем даже опустить фигурные брекеты {} (только одноклассники). Также есть поддержка неявного возврата, поэтому мы можем объединить Возвращение ключевое слово.

Вы можете узнать больше о функциях стрелки здесь Отказ

Шаблонные литералы

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

Добрый путь

var friendOne = 'Smith';
var friendTwo = 'Olawale';
var friendThree = 'Victor';

var allOfThem = 'The three friends are ' + friendOne + ', ' + friendTwo + ', and' + friendThree; 
//Output:  'The three friends are Smith, Olawale and Victor'

ES2015

var friendOne = 'Smith';
var friendTwo = 'Olawale';
var friendThree = 'Victor';

var allOfThem = `The three friends are ${friendOne}, ${friendTwo} and ${friendThree}`;
//Output:  'The three friends are Smith, Olawale and Victor'

Из вышеперечисленного вы можете увидеть, что использование шаблона ES6 Littleal делает жизнь проще и вашим кодом Neater. Я уверен, что я не единственный, кто думает, что старое решение выглядит как взлом. Еще одна хорошая вещь – это то, что шаблон литерал поддерживает несколько строк, чтобы вы могли написать строки, которые охватывают несколько строк, такие JavaScript автоматически добавляют \ N Для вас, где бы вы ни разбили строку:

var author = 'Olawale';
var poem = `
I am ${author}, this is my poem
There isn't much to say
And here is my last line
`;
//Output: '\nI am Olawale, this is my poem\nThere isn\'t much to say\nAnd here is my last line\n'

Вы можете прочитать больше о шаблоне ES6 Lebalal здесь Отказ

Параметр по умолчанию

Перед прибытием ES2015, когда вы хотите указать параметр по умолчанию в функции, вы должны были сделать это в теле, как так:

function greetHuman(name) {
name = name || 'human';
return 'Hello ' + name + ', we come in peace'; 
}
greetHuman(); // 'Hello human, we come in peace'
greetHuman('Olawale'); // 'Hello Olawale, we come in peace'

С ES6 теперь вы можете сделать это в функциональной головке и как таковой, нам больше не нужно выполнять проверки определенных параметров в теле функции.

Вот как будет выглядеть код в ES6, если вы объединяете функции стрелки, шаблона литерала и по умолчанию:

const greetHuman = (name = 'human') => `Hello ${name}, we come in peace`;
greetHuman('Olawale'); 'Hello Olawale, we come in peace'
greetHuman(); 'Hello human, we come in peace'

Вы можете узнать больше об этих функциях ES6 здесь Отказ Вот несколько дополнительных ресурсов, которые помогут вам начать с ECMA (ES6):

  • Как начать с обучения ES6
  • Введение в ES6
  • Ultimate JavaScript Cheat лист

Если вам понравилось эту статью, не забудьте поделиться этим с другими и Следуй за мной в Twitter быть уведомленным о моих новых постах.