Използвайки различни съвети за JavaScript и синтактични преки пътища, тези функции ще ви помогнат да разрешите много често срещани проблеми.

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

За да създадете продукти, които потребителите ще харесат и оценят, важно е да пишете код, който е не само функционален, но и ефективен и лесен за поддръжка. Чистият JavaScript код е жизненоважен за успеха на всяко уеб или мобилно приложение, независимо дали е страничен проект за хоби или сложно търговско приложение.

Какво е толкова добро в JavaScript функциите?

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

Освен възможността за повторна употреба, функциите са много гъвкави. В дългосрочен план те опростяват процеса на мащабиране и поддържане на кодова база. от

instagram viewer
създаване и използване на функции на JavaScript, можете да спестите много време за разработка.

Ето някои полезни функции на JavaScript, които могат значително да подобрят качеството на кода на вашия проект.

1. веднъж

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

Помислете за ситуация, в която искате да направите HTTP API заявки за извличане на данни от база данни. Можете да прикачите веднъж функция като обратно извикване за функция за слушане на събития, така че да се задейства веднъж и не повече.

Ето как можете да дефинирате такава функция:

конст веднъж = (функ) => {
позволявам резултат;
позволявам funcCalled = невярно;
връщане(... аргументи) => {
ако (!funcCalled) {
 резултат = func(...args);
 funcCalled = вярно;
 }
връщане резултат;
 };
};

Функцията once приема функция като аргумент и връща нова функция, която можете да извикате само веднъж. Когато извикате новата функция за първи път, тя изпълнява оригиналната функция с дадените аргументи и запазва резултата.

Всяко последващо извикване на новата функция връща записания резултат, без да стартира отново оригиналната функция. Разгледайте изпълнението по-долу:

// Дефиниране на функция за извличане на данни от DB
функцияgetUserData() {
// ...
}
// вземете версия на функцията getUserData, която може да се изпълнява само веднъж
конст makeHTTPRequestOnlyOnce = веднъж (getUserData);
конст userDataBtn = документ.querySelector("#btn");
userDataBtn.addEventListener("клик", makeHTTPRequestOnlyOnce);

Чрез използването на функцията за еднократна проверка можете да гарантирате, че кодът изпраща само една заявка, дори ако потребителят кликне върху бутона няколко пъти. Това избягва проблеми с производителността и грешки, които могат да възникнат от излишни заявки.

2. тръба

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

Ето един пример в код:

// Дефиниране на функцията тръба
конст тръба = (...функции) => {
връщане(арг) => {
 funcs.forEach(функция(функ) {
 arg = func (arg);
 });
връщане arg;
 }
}


// Дефиниране на някои функции
конст addOne = (а) => а + 1;
конст двойно = (х) => х * 2;
конст квадрат = (х) => х * х;


// Създаване на тръба с функциите
конст myPipe = тръба (addOne, двойна, квадратна);
// Тествайте канала с входна стойност
конзола.log (myPipe(2)); // Изход: 36

Функциите на канала могат да подобрят четливостта и модулността на кода, като ви позволяват да пишете стегнато сложна логика за обработка. Това може да направи вашия код по-разбираем и по-лесен за поддръжка.

3. карта

Функцията map е метод на вградения клас JavaScript Array. Той създава нов масив чрез прилагане на функция за обратно извикване към всеки елемент от оригиналния масив.

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

Важно е да се отбележи, че оригиналният масив не се променя по никакъв начин по време на този процес.

Ето пример как да използвате карта:

конст числа = [1, 2, 3, 4, 5];
конст doublednumbers = numbers.map(функция(номер) {
връщане номер * 2;
});
конзола.log (удвоени числа);
// Изход: [2, 4, 6, 8, 10]

В този пример функцията map итерира всеки елемент в масива с числа. Той умножава всеки елемент по 2 и връща резултатите в нов масив.

Като цяло функциите на картата премахват необходимостта от използване на цикли в JavaScript, особено безкрайни – безкрайните цикли могат да причинят значителни изчислителни разходи, водещи до проблеми с производителността на приложението. Това прави кодовата база по-сбита и по-малко податлива на грешки.

4. избирам

Тази функция за избор ви позволява избирателно да извличате конкретни свойства от съществуващ обект и да генерирате нов обект с тези свойства като резултат от изчислението.

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

Ето един пример в кода:

конст избирам = (обект, ...ключове) => {
връщане keys.reduce((резултат, ключ) => {
ако (object.hasOwnProperty (ключ)) {
 резултат [ключ] = обект [ключ];
 }
връщане резултат;
 }, {});
};

Функцията pick приема обект и произволен брой ключове като аргументи. Ключовете представляват свойствата, които искате да изберете. След това връща нов обект, който съдържа само свойствата на оригиналния обект със съвпадащи ключове.

конст потребител = {
 име: "Мартин",
 възраст: 30,
 електронна поща: „Мартин@yahoo.com“,
};
конзола.log (изберете (потребител, име, "възраст"));
// Изход: { име: 'Мартин', възраст: 30 }

По същество функцията за избор може да капсулира сложна логика на филтриране в една функция, което прави кода по-лесен за разбиране и отстраняване на грешки.

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

5. цип

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

Ето примерна реализация на zip функция:

функцияцип(... масиви) {
конст максимална дължина = математика.min(...arrays.map(масив => масив.дължина));
връщанеМасив.от(
 { дължина: максимална дължина },
 (_, индекс) => arrays.map(масив => масив [индекс])
 );
};


конст а = [1, 2, 3];
конст b = ["а", "б", '° С'];
конст c = [вярно, невярно, вярно];
конзола.log (zip (a, b, c));
// Изход: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

Функцията zip приема входни масиви и изчислява тяхната най-голяма дължина. След това създава и връща единичен масив с помощта на JavaScript метода Array.from. Този нов масив съдържа елементи от всеки входен масив.

Това е особено полезно, ако трябва незабавно да комбинирате данни от множество източници, премахвайки необходимостта да пишете излишен код, който иначе би затрупал кодовата ви база.

Работа с JavaScript функции във вашия код

Функциите на JavaScript значително подобряват качеството на вашия код, като предоставят опростен и компактен начин за обработка на голяма част от програмната логика както за малки, така и за големи кодови бази. Като разберете и използвате тези функции, можете да пишете по-ефективни, четливи и поддържаеми приложения.

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