Home-theater-designers
JavaScript ES6 внесе вълнуващи промени в света на уеб разработката. Новите допълнения към езика JavaScript донесоха нови възможности.
Една от най -популярните промени беше добавянето на функции със стрелки в JavaScript. Функциите със стрелки са нов начин за писане на изрази на функции на JavaScript, които ви дават два различни начина за създаване на функции във вашето приложение.
Функциите със стрелки изискват малко корекция, ако сте експерт в традиционните функции на JavaScript. Нека да разгледаме какво представляват те, как работят и как са от полза за вас.
Какви са функциите на стрелките на JavaScript?
Функциите със стрелки са нов начин за запис на изрази на функции, които са били включени в изданието на JavaScript ES6 . Те са подобни на изразите на функциите на JavaScript, които сте използвали, с някои малко по -различни правила.
Функциите със стрелки са винаги анонимни функции, имат различни правила за
this, и имат по -прост синтаксис от традиционните функции.
клавиатурата на лаптопа ми не работи
Тези функции използват нов знак за стрелка:
=>Ако някога сте работили в Python, тези функции са много подобни на Python ламбда изрази .
Синтаксисът за тези функции е малко по -чист от нормалните функции. Има няколко нови правила, които трябва да имате предвид:
- Ключовата дума function се премахва
- Ключовата дума return не е задължителна
- Къдравите скоби не са задължителни
Има много малки промени, които трябва да преминете, така че нека започнем с основно сравнение на функционалните изрази.
Как да използвате функциите на стрелките
Функциите със стрелки са лесни за използване. Разбирането на функциите със стрелки е по -лесно в сравнение с традиционните изрази на функции.
Ето израз на функция, който добавя две числа; първо използвайки традиционния метод на функция:
let addnum = function(num1,num2){
return num1 + num2;
};
addnum(1,2);
>>3Това е доста проста функция, която взема два аргумента и връща сумата.
Ето израза, променен на функция със стрелка:
let addnum = (num1,num2) => { return num1 + num2;};
addnum(1,2);
>>3Синтаксисът на функцията е доста различен с помощта на стрелка. Ключовата дума function се премахва; маркерът със стрелка позволява на JavaScript да знае, че пишете функция.
Къдравите скоби и ключовата дума return са все още там. Те са по избор със функции със стрелки. Ето още по -прост пример за същата функция:
let addnum = (num1,num2) => num1 + num2;Ключовата дума return и фигурните скоби вече ги няма. Това, което остава, е много чиста едноредова функция, която е почти половината от кода като оригиналната функция. Получавате същия резултат с много по -малко написан код.
Има още функции за стрелки. нека се потопим по -дълбоко, за да почувствате по -добре какво могат да направят.
Функции на стрелките
Функциите на стрелките имат много различни приложения и функции.
ще поддържа ли компютърът ми windows 10
Редовни функции
Функциите със стрелки могат да използват един или повече аргументи. Ако използвате два или повече аргумента, трябва да ги оградите в скоби. Ако имате само един аргумент, не е нужно да използвате скоби.
let square = x => x * x
square(2);
>>4Функциите със стрелки могат да се използват без аргументи. Ако не използвате никакви аргументи във вашата функция, трябва да използвате празни скоби.
let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!Прости функции като тези използват много по -малко код. Представете си колко по -лесен е един комплекс проект като слайдшоу на JavaScript става, когато имате по -прост начин за писане на функции.
Използване на това
Концепцията за
thisобикновено е най -сложната част от използването на JavaScript. Функциите стрелки правят
thisпо -лесен за използване.
Когато използвате функции със стрелки
thisще се дефинира от ограждащата функция. Това може да създаде проблеми, които възникват, когато създавате вложени функции и нужда
thisда се приложи към основната ви функция
Ето един популярен пример, който показва заобиколното решение, което трябва да използвате с обикновени функции.
function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}Присвояване на стойността на
thisкъм променлива го прави читав, когато извикате функция вътре в основната си функция. Това е объркано, ето по -добър начин да направите това с помощта на функциите със стрелки.
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}Въпреки че са чудесни за функции, те не трябва да се използват за създаване на методи вътре в обект. Функциите на стрелките не използват правилния обхват за
this.
Ето един прост обект, който създава метод вътре, използвайки функция стрелка. Методът трябва да намали гарнитури променлива по една при извикване. Вместо това изобщо не работи.
приложенията няма да се преместят на sd карта
let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings
Работа с масиви
Използвайки функциите със стрелки, можете да опростите кода, използван за работа с методи на масиви. Масиви и методите на масивите са много важни части на JavaScript така че ще ги използвате много.
Има някои полезни методи като карта метод, който изпълнява функция за всички елементи на масив и връща новия масив.
let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});
>> [2,3,4,5]Това е доста проста функция, която добавя по една към всяка стойност в масива. Можете да напишете същата функция с по -малко код, като използвате функция със стрелка.
let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});
>> [2,3,4,5]Сега е много по -лесно да се чете.
Създаване на литерали на обекти
Функциите със стрелки могат да се използват за създаване на обективни литерали в JavaScript. Редовните функции могат да ги създават, но те са малко по -дълги.
let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};Можете да направите същия обект с функция стрелка, като използвате по -малко код. Използвайки нотация със стрелки, ще трябва да увиете тялото на функцията в скоби. Ето подобрения синтаксис със функции със стрелки.
let createArrowObject = (first,last) => ({first:first, last:last});Функции на стрелките на JavaScript и отвъд тях
Вече знаете някои различни начини със стрелките на JavaScript да улеснят живота ви като разработчик. Те съкращават синтаксиса, дават ви по -голям контрол при използване
this, улесняват създаването на обекти и ви дават нов начин за работа с методи на масиви.
Въвеждането на функциите със стрелки, заедно с много други функции, в JavaScript ES6 показва колко важно е станало JavaScript в уеб разработката. Има още толкова много неща, които можете да направите.
Искате ли да научите повече за JavaScript? Научете тези рамки на JavaScript. Плюс това, нашият JavaScript измама предоставя ценна информация и научава повече за как работи JavaScript може да ви направи по -добър разработчик.
Дял Дял Туит електронна поща 6 Звукови алтернативи: Най -добрите безплатни или евтини приложения за аудиокнигиАко не искате да плащате за аудиокниги, ето няколко страхотни приложения, които ви позволяват да ги слушате безплатно и законно.
Прочетете Напред Свързани теми- Програмиране
- JavaScript
Антъни Грант е писател на свободна практика, занимаващ се с програмиране и софтуер. Той е специалист по компютърни науки, занимаващ се с програмиране, Excel, софтуер и технологии.
Още от Антъни ГрантАбонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!
Щракнете тук, за да се абонирате