Используя различные советы по JavaScript и сокращения синтаксиса, эти функции помогут вам решить многие распространенные проблемы.

JavaScript — это де-факто язык для создания современных веб-приложений и мобильных приложений. Он поддерживает широкий спектр проектов, от простых веб-сайтов до динамических интерактивных приложений.

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

Что хорошего в функциях JavaScript?

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

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

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

Вот несколько полезных функций JavaScript, которые могут значительно улучшить качество кода вашего проекта.

1. один раз

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

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

Вот как вы можете определить такую ​​функцию:

константа один раз = (функция) => {
позволять результат;
позволять funcCalled = ЛОЖЬ;
возвращаться(...аргументы) => {
если (!funcCalled) {
 результат = функция (... аргументы);
 funcCalled = истинный;
 }
возвращаться результат;
 };
};

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

Любые последующие вызовы новой функции возвращают сохраненный результат без повторного запуска исходной функции. Взгляните на реализацию ниже:

// Определяем функцию для получения данных из БД
функцияполучитьUserData() {
// ...
}
// получить версию функции getUserData, которая может запускаться только один раз
константа makeHTTPRequestOnlyOnce = один раз (getUserData);
константа userDataBtn = документ.querySelector("#бтн");
userDataBtn.addEventListener("щелкнуть", сделатьHTTPRequestOnlyOnce);

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

2. трубка

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

Вот пример в коде:

// Определяем функцию конвейера
константа труба = (...функции) => {
возвращаться(аргумент) => {
 funcs.forEach(функция(функция) {
 аргумент = функция (аргумент);
 });
возвращаться аргумент;
 }
}


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


// Создаем канал с функциями
константа myPipe = труба (добавить один, двойной, квадратный);
// Проверяем канал с входным значением
консоль.log (моя трубка(2)); // Выход: 36

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

3. карта

Функция карты — это метод встроенного класса массива JavaScript. Он создает новый массив, применяя функцию обратного вызова к каждому элементу исходного массива.

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

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

Вот пример использования карта:

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

В этом примере функция карты выполняет итерацию по каждому элементу массива чисел. Он умножает каждый элемент на 2 и возвращает результаты в новом массиве.

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

4. выбирать

Эта функция выбора позволяет выборочно извлекать определенные свойства из существующего объекта и генерировать новый объект с этими свойствами в результате вычислений.

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

Вот пример в коде:

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

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

константа пользователь = {
 имя: 'Мартин',
 возраст: 30,
 электронная почта: «Мартин@yahoo.com»,
};
консоль.log (выбрать (пользователя, 'имя', 'возраст'));
// Вывод: {имя: 'Мартин', возраст: 30}

По сути, функция выбора может инкапсулировать сложную логику фильтрации в одну функцию, что упрощает понимание и отладку кода.

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

5. молния

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

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

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


константа а = [1, 2, 3];
константа б = [а, 'б', 'с'];
константа с = [истинный, ЛОЖЬ, истинный];
консоль.log(zip(a, b,c));
// Вывод: [[1, 'a', true], [2, 'b', false], [3, 'c', true]]

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

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

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

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

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