JavaScript, основа сучасної веб-розробки, сповнений прийомів, які можуть спростити ваш код і підвищити продуктивність. Незалежно від того, чи ви досвідчений розробник, чи новачок, ці хакі змінять ваш підхід до вирішення поширених завдань у JavaScript.
- Швидке клонування масивів або об'єктів
Забудьте про складні методи клонування! Використовуйте оператор поширення для простого і швидкого поверхневого клонування:
// Клонування масиву
let arr = [1, 2, 3];
let clonedArr = [...arr];
// Клонування об'єкта
let obj = { a: 1, b: 2 };
let clonedObj = { ...obj };
Більше ніяких JSON.parse або Object.assign!
- Призначення значень за замовчуванням за допомогою короткого замикання
Уникайте громіздких умов if, використовуючи коротке замикання:
const userName = userInput || 'Guest';
Це присвоїть значення 'Guest', якщо userInput є хибним (null, undefined тощо).
3.
Поміняйте змінні місцями в один рядок
Пропустіть тимчасову змінну і міняйте місцями змінні, як професіонал, за допомогою деструктуризації масивів:
let a = 1, b = 2;
[a, b] = [b, a];
- Легко розгорнути вкладені масиви
Забудьте про цикли при розгортанні масивів! Використовуйте flat():
let nested = [1, [2, [3, [4]]]];
let flat = nested.flat(Infinity); // [1, 2, 3, 4]
- Додайте таймаут до ваших запитів fetch
Уникайте зависання запитів fetch, додавши механізм таймауту:
const fetchWithTimeout = (url, ms) =>
Promise.race([
fetch(url),
new Promise((_, reject) =>
setTimeout(() => reject(new Error('Timeout')), ms)
),
]);
fetchWithTimeout('https://api.example.com', 5000)
.then(res => res.json())
.catch(err => console.error(err));
6.
Генерація випадкових шістнадцяткових кольорів
Додайте яскравих кольорів одним рядком:
const randomColor = () =>
`#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, '0')}`;
console.log(randomColor()); // Приклад: "#f1c40f"
- Дебаунс функцій для покращення продуктивності
Оптимізуйте швидкі зміни подій, такі як зміна вводу:
const debounce = (func, delay) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => func(...args), delay);
};
};
const logInput = debounce((input) => console.log(input), 300);
- Безпечно доступ до вкладених властивостей
Уникайте помилок під час виконання за допомогою опційного ланцюга:
const user = { name: { first: 'John' } };
console.log(user.name?.first); // John
console.log(user.address?.city); // undefined
9.
Швидке виявлення порожніх об'єктів
Перевірте, чи об'єкт порожній, в один крок:
const isEmpty = obj => Object.keys(obj).length === 0;
console.log(isEmpty({})); // true
console.log(isEmpty({ a: 1 })); // false
- Групування елементів масиву за властивістю
Групуйте дані в масивах без зусиль:
const groupBy = (arr, key) =>
arr.reduce((group, item) => {
(group[item[key]] = group[item[key]] || []).push(item);
return group;
}, {});
const data = [
{ category: 'fruit', name: 'apple' },
{ category: 'fruit', name: 'banana' },
{ category: 'vegetable', name: 'carrot' },
];
console.log(groupBy(data, 'category'));
// { fruit: [{...}, {...}], vegetable: [{...}] }
Висновок
Ці трюки в JavaScript — це не просто хитрощі, це інструменти, які допомагають оптимізувати ваш робочий процес, підвищити читабельність коду та вразити ваших колег.
Почніть використовувати їх вже сьогодні, і нехай ваш досвід програмування досягне нових висот.
Є ще круті хакі, якими хочете поділитися? Давайте обговоримо в коментарях!
Перекладено з: 10 Essential JavaScript Hacks for Everyday Coding