Приходилось ли вам, ломая голову над созданием кода, видеть, как кто-то другой справляется с вашей проблемой с помощью одной строчки JavaScript? Подобное мастерство сродни волшебству.
В этом и заключается сила однострочника. Применение таких коротких, но эффективных фрагментов кода позволит почувствовать себя настоящим JavaScript-профессионалом.
Однако прежде чем использовать однострочники в проектах, следует разобраться, что же это такое.
Однострочники — короткие фрагменты кода JavaScript, способные сжимать функциональность до одной строки. Они помогают создавать более компактный код, нередко повышая его читаемость.
В чем еще преимущества однострочников? Используя их, вы экономите время, создаете более чистый код и, возможно, даже производите впечатление на других разработчиков (совсем немного).
Теперь сосредоточимся на практичных, удобных для новичков однострочниках, которые помогут быстрее достичь желаемых результатов.
1. Фильтрация массива
Предположим, у вас есть массив тестовых оценок и нужно найти все оценки уровня A (в данном случае четные числа). Однострочники вам в помощь!
const scores = [85, 92, 73, 98, 80]; const evenScores = scores.filter(num => num % 2 === 0); // evenScores будут следующие - [92, 98, 80]
Этот код использует метод filter для создания нового массива, содержащего только те элементы, которые прошли тест.
Стрелочная функция (num => num % 2 === 0) проверяет, является ли каждое число четным.
Когда использовать: фильтрация с удалением ненужных элементов из массивов для сохранения чистоты данных — распространенная операция, которую можно выполнить с помощью одной строки.
2. Преобразование массивов
Допустим, у вас есть массив из длин сторон квадратов и требуется вычислить площадь каждого квадрата. Эта одна строка может преобразовать каждый элемент массива, отобразив его как площадь:
const sideLengths = [5, 3, 7]; const areas = sideLengths.map(num => num * num); // значения площадей - [25, 9, 49]
Метод map создает новый массив с результатами вызова предоставленной функции для каждого элемента исходного массива.
Здесь функция возводит каждое число в квадрат.
Когда использовать: метод map, представленный в однострочнике, полезен для выполнения математических операций над каждым элементом массива.
3. Выравнивание многоуровневого массива
Иногда приходится иметь дело со вложенными массивами, например со списком продуктов из продуктового магазина с подпунктами для каждого варианта. Однострочники помогают выравнять эти структуры:
const nestedGroceries = [
["Apples", ["Red", "Green"]],
["Milk", ["Whole", "2%"]]
];
const flatGroceries = nestedGroceries.flat();
// flatGroceries будут следующими - ["Apples", "Red", "Green", "Milk", "Whole", "2%"]
Метод flat (доступный в ES6 и более поздних версиях) создает новый массив со всеми элементами подмассива, объединенными в него. Это может упростить задачи манипулирования данными.
Когда использовать: выравнивание вложенных массивов упрощает работу с данными, представляя их в одном измерении.
4. Уникальные элементы (без дубликатов!)
Возможно, в вашем списке гостей оказалось несколько повторяющихся записей.
При использовании однострочников каждый получит одно приглашение (и не будет неловкой ситуации «подождите, у меня их два?»).
// Исходный список гостей с дублирующей записью
const guestList = ["Alice", "Bob", "Charlie", "Alice"];
// Удаление дубликатов путем преобразования массива во множество и обратно в массив
const uniqueGuestList = [...new Set(guestList)];
// uniqueGuestList будет ["Alice", "Bob", "Charlie"]
console.log(uniqueGuestList);
В этом однострочнике используется магия множеств. Множества хранят уникальные значения.
Распределяем (...) элементы из множества, содержащего уникальные имена гостей из исходного списка, обратно в новый массив.
Когда использовать: очистка данных часто означает удаление дубликатов из массивов, помогая сохранить данные чистыми и аккуратными.
5. Сокращение условного оператора
Приходилось ли вам писать оператор if...else, занимающий несколько строк, только для того, чтобы присвоить значение на основе условия? Есть более лаконичный способ:
// Определить возраст пользователя
const age = 18;
// Определение сообщения в зависимости от возраста пользователя
const message = age >= 18 ? "Welcome!" : "Sorry, not yet.";
// Вывод сообщения
console.log(message);
В этом коде используется тернарный оператор — замечательный способ сокращения записи оператора if-else до одной строки.
Проверяется условие (age >= 18), и соответствующее значение («Добро пожаловать!» или «Извините, еще нет») присваивается переменной message.
Когда использовать: сокращенные условные выражения отлично подходят для выполнения присваиваний в простых ситуациях, сохраняя при этом чистоту и эффективность кода.
Учитывайте удобочитаемость кода: тернарные операторы эффективны, но в сложных ситуациях могут затруднить понимание кода, поэтому используйте их с умом!
6. Запись строк в обратном порядке
Однострочники можно использовать даже для операций с текстом! Как насчет того, чтобы записать элементы строки в обратном порядке и проверить, является ли она палиндромом — словом (или текстом), которое читается одинаково в обоих направлениях (например «racecar»)?
const str = "Hello, world!";
const reversedStr = str.split('').reverse().join('');
// reversedStr будет "!dlrow ,olleH"
Этот однострочник разбивает строку на массив элементов, меняет их порядок, а затем объединяет в новую строку — и все эти операции выполняются в одной строке!
Когда использовать: задачи манипулирования строками, такие как инвертирование (запись в обратном порядке) или извлечение подстрок, можно упростить с помощью однострочников.
Помните: в целях удобочитаемости сложные операции со строками лучше производить с более длинным кодом.
7. Наличие свойств объекта
Представьте, что вы создаете систему профиля пользователя и вам нужно выяснить, существует ли определенный атрибут (например, «email») в объекте user. В этом случае также поможет однострочник:
const user = { name: "Alice", age: 30 };
// Проверка, есть ли у объекта user свойство 'email'.
const hasEmail = "email" in user;
// hasEmail будет false, потому что свойство 'email' отсутствует в объекте user
Оператор in проверяет, существует ли свойство в объекте. В данном случае проверяется, существует ли свойство "email" в объекте user.
Когда использовать: проверка данных на наличие конкретных атрибутов в объектах — повседневная задача, и однострочник предлагает простое ее решение.
8. Значения параметров по умолчанию
Как создать операцию для приветствия пользователей, используя резервное значение на случай, если имя не будет указано? С этим отлично справится однострочник:
const greet = (name = "Guest") => `Hello, ${name}!`;
console.log(greet());
// Вывод: Hello, Guest!
console.log(greet("Bob"));
// Вывод: Hello, Bob!
В этом однострочнике используются параметры ES6 по умолчанию. Если при вызове функции greet не указано имя, используется значение по умолчанию "Guest".
Когда использовать: параметры по умолчанию позволяют избежать ошибок при вызове функций без нужных аргументов, что делает код более эффективным.
9. Компактные массивы
Иногда приходится сталкиваться с массивами, содержащими пустые значения или элементы со значением null. Однострочники помогут избавиться от этих нежелательных «гостей» в коде:
const numbers = [1, 0, null, 3]; // Исходный массив
const compactNumbers = numbers.filter(Boolean); // Использование фильтра с Boolean в качестве функции обратного вызова
// compactNumbers будет [1, 3], потому что Boolean(1) - true, Boolean(0) - false, Boolean(null) - false и Boolean(3) - true.
В этом однострочнике снова используется метод filter. Однако на этот раз filter проверяет «ложные» значения (такие как null, undefined, 0, "" и NaN) с помощью конструктора Boolean.
Любой элемент, который оценивается как false, исключается из нового массива.
Когда использовать: очистка массивов с удалением ненужных элементов позволяет оставить для работы только важные данные.
10. Динамические ключи объектов
Однострочники можно использовать даже для создания объектов с ключами, которые определяются после выполнения операции. Удивительно?
const prop = "score";
const person = { [prop]: 90 };
// person будет {score: 90}
В этом однострочнике применяются вычисляемые имена свойств. Значение переменной prop используется в качестве имени ключа в фигурных скобках при создании объекта. Это позволяет динамически создавать ключи на основе переменных или выражений.
Когда использовать: динамические ключи объектов полезны для создания объектов, структура которых не задана заранее.
Помните: продвинутые однострочники для динамической генерации ключей, хотя и впечатляют, могут повлиять на удобочитаемость — используйте их с умом!
Заключение
Надеюсь, вы узнали несколько отличных однострочников, полезных для оптимизации JavaScript-кода.
Помните: однострочники — сильный инструмент, но использовать его нужно осторожно, чтобы гарантировать ясность и удобство кода.
Читайте также:
- Ключевые понятия JavaScript, которые должен знать каждый разработчик — часть 3
- Продвинутые методы программирования на JavaScript: сравнение элементов двух массивов
- Схватка “рекурсия против циклов” на арене JavaScript
Читайте нас в Telegram, VK и Дзен
Перевод статьи Rehan Pinjari: 10 JavaScript One-Liners for Beginner Developers to Look Pro
