Улучшите свои навыки JavaScript с помощью этих 6 методов очистки кода
JavaScript гибок и мощен. Однако иногда это может быть сложно. В то время как JavaScript постоянно развивается и приносит новые проблемы, мы также неоднократно сталкиваемся с подобными проблемами в повседневной работе.
В этой статье мы обсудим 6 приемов, которые помогут вам писать чистый и удобный для сопровождения код JavaScript.
Забежать вперед:
- Выполнять несколько асинхронных промисов одновременно или последовательно
- Используйте console.time для устранения проблем с производительностью
- Использование шаблона объекта параметров для обработки нескольких параметров, передаваемых в функцию
- Составь несколько функций
- Используйте деструктурирование для извлечения данных
- Работайте с массивом эффективно
1. Выполнять несколько асинхронных промисов одновременно или последовательно
JavaScript синхронен по умолчанию. Для обработки асинхронного кода обычно используется Promise. Promise обеспечивает лучший способ обработки нескольких асинхронных запросов по сравнению с обратным вызовом, который может вызвать ад обратного вызова.
При работе с несколькими асинхронными запросами нам может потребоваться обрабатывать их либо одновременно, либо последовательно, в зависимости от варианта использования.
Одновременная обработка нескольких обещаний
JavaScript предоставляет метод Promise.all() для обработки одновременных запросов.
Последовательная обработка нескольких обещаний
Когда вам нужно выполнить несколько асинхронных запросов один за другим, это может быть немного сложно. Возможно, первым вашим побуждением будет использовать forEach или map, но они не работают должным образом. Обещание не ждет, пока оно будет завершено, прежде чем оно начнет следующее.
Без использования сторонних библиотек лучше всего использовать метод reduce.
В приведенном выше методе сокращения мы возвращаем обещание, которое разрешается в другое обещание на каждой итерации. Результатом является цепочка промисов, которые заставляют асинхронные действия выполняться одно за другим.
Как показано в выводе, хотя я установил тайм-аут для первого промиса на 4 секунды, а второй промис — на 2 секунды по умолчанию, первое промис разрешается первым перед вторым.
Хотя reduce сам по себе является синхронным, его способность, которая позволяет нам возвращать промис обратно в аккумулятор, делает решение хорошо работающим.
2. Используйте console.time для устранения проблем с производительностью
Иногда нам нужно отлаживать функции JavaScript для анализа производительности. Метод console.time предоставляется из коробки, чтобы помочь нам измерить время выполнения.
Объект консоли предоставляет методы time() и timeEnd(). Во-первых, мы вызываем метод console.time() с уникальной строковой меткой, он запускает таймер, который отслеживает продолжительность выполнения кода. Затем мы запускаем функцию, которую нужно измерить. В конце вызываем console.timeEnd() с той же меткой, продолжительность будет распечатана в консоли браузера.
Если вам нужно выполнить отладку кода с несколькими шагами, вы можете запустить несколько таймеров и измерять разные шаги с помощью отдельных таймеров, чтобы получить более четкое представление.
Вот пример с двумя таймерами:
Результат:
Time taken accumlateNumbers: 9.656005859375 ms Time taken by callAccumlateFunction: 10.19677734375 ms
Обратите внимание, что console.time не подходит для измерения времени, требующего высокой точности.
3. Используйте шаблон объекта параметров для обработки нескольких параметров, передаваемых в функцию
Шаблон объекта параметров предназначен для решения проблемы передачи множества аргументов в функцию.
При обычном способе передачи списка аргументов в функцию нам нужно быть осторожным с последовательностью аргументов. Неправильный порядок может создать трудно обнаруживаемые дефекты.
function createUser(lastName, firstName, jobTitle, role){};
// we try to create a admin user
createUser(“John”,”Paul”,"admin", ”Manager”);
С шаблоном объекта параметров нам просто нужно передать один аргумент, который представляет собой объект, содержащий именованные ключи для всех параметров параметров.
function createUser({lastName, firstName, jobTitle, role}){};
const user = {
firstName: 'John',
lastName: 'John',
jobTitle:'Manager',
role: 'Admin'
};
createUser(user);
Как показано в приведенном выше фрагменте кода, нам не только не нужно беспокоиться о порядке аргументов, но и именованные аргументы с шаблоном объекта option облегчают чтение кода.
Шаблон объекта параметров обычно используется в случае четырех или более аргументов.
4. Составьте несколько функций
Композиция функций — это подход к объединению нескольких функций и применению каждой функции к результату предыдущей. При правильном использовании композиция функций может сделать ваш код кратким и элегантным.
Вот простой пример:
Вышеприведенный метод работает, но его будет трудно прочитать, когда больше функций будет составлено вместе. Лучшим подходом является использование функции компоновки ниже.
Общая compose function может принимать несколько функций в качестве входных данных и вызывать их одну за другой. Таким образом, мы называем compose a функцией высшего порядка. Преимущество функции высшего порядка заключается в ее способности очень выразительно составлять несколько операций.
Обратите внимание, что здесь используется reduceRight , что означает, что функции выполняются справа налево. Альтернативой является метод pipe ниже. Он использует reduce, поэтому последовательность идет слева направо.
Применение композиции функций побуждает разработчиков разбивать программу на более мелкие части и абстрагировать действия или поведение на функции. Это заставляет вас сначала думать о вводе и выводе, вместо того, чтобы сосредотачиваться на деталях реализации.
Результатом будет более читаемый, тестируемый и пригодный для повторного использования код.
В реальных проектах правильные варианты использования композиции функций включают обработку данных, вычисления со сложными правилами, рабочие процессы и т. д.
5. Используйте деструктурирование для извлечения данных
Деструктуризация — это простой и лаконичный способ распаковать значения из свойств объекта или массивов в несколько переменных.
Основные примеры деструктуризации:
const user = { name: 'John Paul', age: 23 }; // from object properties const {name, age} = user;const count= ['one', 'two', 'three']; // array destructuring const [first, second, third] = count;
Предусмотрены некоторые полезные функции деструкции, включая значение по умолчанию, пропуск элемента массива, присвоение нового имени переменной и т. д. Полный список можно найти здесь.
Вот несколько практических примеров, которые я часто использовал.
Разрушение результатов функции
function getUser() {
return {name: ‘John’, age: 24};
}
const {name, age} = getUser(); // name='John', age=24
Разделить массив
const[first,...rest]=['1','2','3', '4']; // output: first='1', rest=['2','3', '4']
Получить первый элемент массива
const fruits = [‘apple’, ‘orange’, ‘pear’]; [first] = fruits; // first= 'apple'
Уничтожение результатов promise.all()
Promise.all([ promise1, promise2, promise3])
.then( results =>{
const [first, second, third] = results;
})
6. Работайте с массивом эффективно
Массив — это наиболее распространенная структура данных, с которой большинство из нас имеет дело ежедневно. Вот несколько советов по операциям с массивом:
Неизменяемая сортировка массива с помощью среза
Мы часто хотим отсортировать массив и получить неизменяемую копию. К сожалению, .sort изменит исходный массив. Используя slice as ниже, мы можем получить отсортированный массив, не затрагивая исходный.
const newArr = arr.slice().sort()Обратите внимание, что срез возвращает неполную копию элементов исходного массива. Если вам нужно сделать глубокое клонирование, вы можете использовать разные подходы.
Удалить дубликаты из массива
Существует несколько способов удаления дубликатов из массива. Самый простой, а также мой любимый способ — использовать Set.
Набор представлен в ES6 и представляет собой список уникальных значений. В следующем примере мы используем оператор распространения, чтобы вернуть результат операции Set в виде массива.
const arr = [1,2,3,2,3,4,5]; console.log([...new Set(arr)]); // [1,2,3,4,5]
Обратите внимание, что метод Set работает только для примитивных значений.
Отфильтровать ложные значения из массива
В JavaScript ложные значения могут быть пустой строкой, ложью, 0, нулевым значением, NaN или неопределенным. Ниже приведен мой любимый способ отфильтровать ложные значения из массива.
const arrToFilter = ["user", "", 0, NaN, 9, true, undefined, "red", false]; const result = mixedArr.filter(Boolean); console.log(result); // returns ["user", 9, true, "red"]
Если вы не использовали его раньше, вам может быть интересно, как работает the filter(Boolean)?
Boolean — это оболочка объекта. В методе filter(Boolean) каждый элемент массива передается и оценивается следующим образом. Результат либо истинный, либо ложный, и ложные значения будут отфильтрованы.
.filter(x=> Boolean(x));Используйте Array.every и Array.some для упрощения кода
Array.every и Array.some — очень удобные методы для упрощения кода. по сравнению с другими подходами, такими как forEach или reduce, Array.every и Array.some, код становится более читабельным и лаконичным.
const users = [
{ name: 'john', role: 'admin' },
{ name: 'peter', role: 'dev' },
{ name: 'mary', role: 'dev' }
];
const isAllDeveloperRole = users.every(f => f.role === 'dev');
const hasDeveloperRole = users.some(f => f.role === 'dev');Я надеюсь, что эта статья будет полезна для вас. Если у вас есть другие приемы JavaScript, которыми вы можете поделиться, добавьте их в комментарий ниже.
Если вам понравилась эта статья, вы также можете ознакомиться со статьей ниже.
Удачного программирования
