Функции на JavaScript ES6: Добрите части

ES6 предлага някои страхотни нови функционални функции, които правят програмирането в JavaScript много по-гъвкаво. Нека да поговорим за някои от тях - по-конкретно, параметри по подразбиране, параметри за почивка и функции със стрелки.

Забавен съвет : можете да копирате и поставите всеки от тези примери / код в Babel REPLи можете да видите как ES6 кодът се транспилира в ES5.

Стойности на параметрите по подразбиране

Функциите на JavaScript имат уникална функция, която ви позволява да предавате произволен брой параметри по време на извикване на функция (действителни параметри), независимо от броя на параметрите, налични в дефиницията на функцията (формални параметри). Така че трябва да включите параметри по подразбиране, само в случай че някой забрави да предаде един от параметрите.

Как параметрите по подразбиране ще бъдат приложени в ES5

Горното изглежда добре, когато го стартираме. number2не беше предадено и проверихме това с помощта на ||оператора ' ', за да върнем втория операнд, ако първият е фалшив. По този начин „10“ е присвоена като стойност по подразбиране, тъй като number2е недефинирана.

Има само един проблем. Ами ако някой подаде „0“ като втори аргумент? ⚠

Горният подход ще се провали, защото вместо подадената стойност ще бъде присвоена нашата стойност по подразбиране „10“, като „0“. Защо? Защото „0“ се оценява като фалшиво!

Нека подобрим горния код, нали?

Ах! Това е твърде много код. Изобщо не е готино. Нека да видим как ES6 го прави.

Параметри по подразбиране в ES6

function counts(number1 = 5, number2 = 10) { // do anything here}

number1и им number2се присвояват стойности по подразбиране съответно на '5' и '10'.

Ами да, това е почти всичко. Кратко и сладко. Няма допълнителен код за проверка на липсващ параметър. Това прави тялото на функцията приятно и кратко. ?

ЗАБЕЛЕЖКА: Когато undefinedе предадена стойност на параметър с аргумент по подразбиране, както се очаква, предадената стойност е невалидна и стойността на параметъра по подразбиране е присвоена . Но ако nullбъде предаден, той се счита за валиден и параметърът по подразбиране не се използва и на този параметър се присвоява нула.

Хубава характеристика на параметрите по подразбиране е, че параметърът по подразбиране не е задължително да е примитивна стойност и ние също можем да изпълним функция за извличане на стойността на параметъра по подразбиране. Ето пример:

Предишните параметри също могат да бъдат параметри по подразбиране за параметрите, които идват след тях по следния начин:

function multiply(first, second = first) { // do something here}

Но обратното ще хвърли грешка. Тоест, ако вторият параметър е зададен като стойност по подразбиране за първия параметър, това води до грешка, тъй като вторият параметър все още не е дефиниран, докато е присвоен на първия параметър.

function add(first = second, second) { return first + second;}console.log(add(undefined, 1)); //throws an error

Параметри за почивка

А почивка параметър е просто име параметър, който се предхожда от три точки (...). Този наименован параметър се превръща в масив, който съдържа останалите параметри (т.е. освен посочените параметри), предадени по време на извикване на функция.

Само имайте предвид, че може да има само един параметър за почивка и той трябва да е последният параметър. Не можем да имаме именуван параметър след параметър за почивка.

Ето пример:

Както можете да видите, ние използвахме параметъра rest, за да получим всички ключове / свойства, които трябва да бъдат извлечени от предадения обект, който е първият параметър.

Разликата между параметър за почивка и „аргумент обект“ е, че последният съдържа всички действителни параметри, предадени по време на извикването на функцията, докато „параметърът за почивка“ съдържа само параметрите, които не са наименувани параметри и се предават по време на извикването на функцията.

Функции със стрелки ➡

Функциите със стрелки или „функциите на дебелите стрелки“ въвеждат нов синтаксис за дефиниране на функции, който е много кратък. Ние можем да се избегне машинописни ключови думи като function, returnи дори големи скоби { }и скоби ().

Синтаксис

Синтаксисът се предлага в различни вкусове, в зависимост от нашата употреба. Всички вариации имат нещо общо , т.е. те започват с аргументите , следвани от на стрелката ( =&GT), следван от т той функционира б ody.

Аргументите и тялото могат да приемат различни форми. Ето най-основния пример:

let mirror = value => value;
// equivalent to:
let mirror = function(value) { return value;};

Горният пример взема един аргумент „стойност“ (преди стрелката) и просто връща този аргумент ( => value;). Както можете да видите , има само връщаната стойност, така че няма нужда от ключова дума return или къдрави сутиени, които да обгръщат тялото на функцията.

Тъй като има само един аргумент , няма нужда и от скоби „()“.

Ето пример с повече от един аргумент, който да ви помогне да разберете това:

let add = (no1, no2) => no1 + no2;
// equivalent to:
let add = function(no1, no2) { return no1 + no2;};

Ако изобщо няма аргументи, трябва да включите празни скоби, както по-долу:

let getMessage = () => 'Hello World';
// equivalent to:
let getMessage = function() { return 'Hello World';}

За тяло на функция само с оператор return, къдравите скоби не са задължителни .

За тяло на функция, което има повече от просто оператор return, трябва да увиете тялото в къдрави скоби, точно както традиционните функции.

Ето една проста функция за изчисляване с две операции - добавяне и изваждане. Тялото му трябва да е увито в къдрави скоби:

let calculate = (no1, no2, operation) => { let result; switch (operation) { case 'add': result = no1 + no2; break; case 'subtract': result = no1 - no2; break; } return result;};

Ами ако искаме функция, която просто връща обект? Компилаторът ще се обърка дали къдравите скоби са на обекта ( er}) или къдравите скоби на тялото на функцията.()=>{id: numb

Решението е да увиете обекта в скоби. Ето как:

let getTempItem = number => ({ id: number});
// effectively equivalent to:
let getTempItem = function(number) { return { id: number };};

Let’s have a look at the final example. In this we’ll use filter function on a sample array of numbers to return all numbers greater than 5,000:

// with arrow functionlet result = sampleArray.filter(element => element > 5000);
// without arrow functionlet result = sampleArray.filter(function(element) { return element > 5000;});

We can see how much less code is necessary compared to the traditional functions.

A few things about arrow functions to keep in mind though:

  • They can’t be called with new, can’t be used as constructors (and therefore lack prototype as well)
  • Arrow functions have their own scope, but there’s no ‘this’ of their own.
  • No arguments object is available. You can use rest parameters however.

Since JavaScript treats functions as first-class, arrow functions make writing functional code like lambda expressions and currying much easier.

„Функциите на стрелките бяха като ракетно гориво за експлозията на функционалното програмиране в JavaScript.“ - Ерик Елиът

Е, ето ви! Може би е време да започнете да използвате тези функции.

Функциите на ES6 като тези са глътка свеж въздух и разработчиците просто обичат да ги използват.

Ето връзката към предишния ми пост за декларации на променливи и повдигане!

Надявам се, че това ви мотивира да вземете ES6, ако все още не сте го направили!

Мир ✌️️