Лучшие хаки JavaScript: От новичка до гуру кода (Продолжение)
Хотите писать код как настоящий профессионал? В этой статье мы раскрываем секреты, которые используют опытные JavaScript-разработчики, чтобы создавать чистый и эффективный код.
Это вторая часть нашего погружения в мир программирования. В первой части мы представили 15 лучших приемов с примерами в JavaScript. Погружайтесь глубже, переходите по ссылке!
16 Значения по умолчанию при деструктуризации
Используйте значения по умолчанию при деструктуризации: Это поможет вам избежать проблем с отсутствующими свойствами при деструктуризации объектов.
const user = { name: 'Jane' };
const { name, age = 18 } = user;
console.log(name); // "Jane"
console.log(age); // 18Обеспечьте резервные значения для отсутствующих свойств, повышая надежность кода.
Хотите узнать все о диструктуризации в JavaScript? В нашей статье вы найдете исчерпывающее руководство, которое поможет вам освоить этот мощный инструмент.
17 Объект assign()
Воспользуйтесь Object.assign() для клонирования или слияния объектов: Это упростит процесс, избавив от многословности и ошибок.
const target = { a: 1 };
const source = { b: 2 };
const merged = Object.assign(target, source);
console.log(merged); // { a: 1, b: 2 }Эффективно клонируйте или объединяйте объекты, избегая ручного копирования.
18 Массив find() и findIndex()
Используйте find() и findIndex() для поиска элементов в массивах: Это более читаемый и понятный способ по сравнению с циклами.
const users = [
{ id: 1, name: 'Jane' },
{ id: 2, name: 'John' },
];
const user = users.find(u => u.id === 1);
console.log(user); // { id: 1, name: 'Jane' }
const index = users.findIndex(u => u.id === 1);
console.log(index); // 0Поиск элементов или их индексов по условию станет проще и понятнее.
19 Массив some() и every()
Воспользуйтесь some() и every() для проверки условий в массивах: Это сделает код более чистым и лаконичным.
const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true
const allEven = numbers.every(num => num % 2 === 0);
console.log(allEven); // falseПроверяйте условия для элементов массивов лаконично и компактно.
20 Массив flat() и flatMap()
Используйте flat() и flatMap() для сглаживания массивов: Это упростит работу с вложенными массивами.
const nested = [1, [2, [3, [4]]]];
const flat = nested.flat(2);
console.log(flat); // [1, 2, 3, [4]]
const mapped = [1, 2, 3].flatMap(x => [x, x * 2]);
console.log(mapped); // [1, 2, 2, 4, 3, 6]Выравнивайте вложенные массивы, отображая и выравнивая их за один шаг.
21 Массив from() и of()
Применяйте Array.from() и Array.of() для создания массивов: Это упрощает процесс создания массивов из итерируемых объектов или аргументов.
const set = new Set([1, 2, 3]);
const arrFromSet = Array.from(set);
console.log(arrFromSet); // [1, 2, 3]
const arrOfNumbers = Array.of(1, 2, 3);
console.log(arrOfNumbers); // [1, 2, 3]Создавайте массивы из итерируемых объектов или списков аргументов с легкостью.
22 Деструктуризация параметров в Callback
Используйте деструктуризацию в параметрах обратного вызова: Это поможет избежать многословности при доступе к свойствам объектов, переданных в обратные вызовы.
const users = [
{ id: 1, name: 'Jane' },
{ id: 2, name: 'John' },
];
users.forEach(({ id, name }) => {
console.log(`User ID: ${id}, User Name: ${name}`);
});
Получайте доступ к свойствам объектов в обратных вызовах без лишнего кода.
23 Дополнительные функции обратного вызова
Воспользуйтесь оценкой сокращенного цикла для вызова дополнительных функций обратного вызова: Это упростит обработку дополнительных функций обратного вызова.
function fetchData(url, callback) {
fetch(url)
.then(response => response.json())
.then(data => {
callback && callback(data);
});
}Вызывайте необязательные функции обратного вызова только при необходимости, делая код надежнее.
24 Обратные вызовы Promisify
Cоздайте служебную функцию для обещания обратных вызовов: Это поможет преобразовать функции обратного вызова в обещания.
function promisify(fn) {
return function (…args) {
return new Promise((resolve, reject) => {
fn(…args, (err, result) => {
if (err) reject(err);
else resolve(result);
});
});
};
}
const readFile = promisify(require('fs').readFile);
readFile('path/to/file.txt', 'utf8')
.then(data => console.log(data))
.catch(err => console.error(err));Преобразуйте функции обратного вызова в обещания для удобной работы с async/await.
25 Async/Await для синхронно-подобного кода
Используйте async/await для асинхронного кода: Это позволит писать асинхронный код в синхронном стиле.
async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData('https://api.example.com/data');Пишите асинхронный код, который читается и ведёт себя как синхронный, улучшая читаемость и обслуживание.
26 Связывание обещаний
Цепочкой обещают обрабатывать несколько асинхронных операций: Это упростит последовательную обработку асинхронных действий.
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log('Data:', data);
return fetch('https://api.example.com/more-data');
})
.then(response => response.json())
.then(moreData => {
console.log('More Data:', moreData);
})
.catch(error => {
console.error('Error:', error);
});Улучшайте читаемость и обслуживание кода применяя на практике несколько асинхронных операций.
27 Promise.all для одновременного выполнения
Воспользуйтесь Promise.all для одновременной обработки асинхронных операций: Это поможет эффективно обрабатывать несколько асинхронных действий одновременно.
const fetchData1 = fetch('https://api.example.com/data1').then(response => response.json());
const fetchData2 = fetch('https://api.example.com/data2').then(response => response.json());
Promise.all([fetchData1, fetchData2])
.then(([data1, data2]) => {
console.log('Data 1:', data1);
console.log('Data 2:', data2);
})
.catch(error => {
console.error('Error:', error);
});Обрабатывайте несколько асинхронных операций одновременно, продолжая работу после их завершения.
В этой статье вы найдете ключевые концепции асинхронного программирования в JavaScript: Promises, Async/Await и Callbacks. Подробно разберете каждый подход, посмотрите примеры кода и сможете выбрать оптимальное решение для ваших задач.
28 Функция устранения дребезга (Debounce)
Применяйте функцию устранения дребезга для ограничения скорости выполнения функции: Это поможет избежать проблем с производительностью при частом вызове функций.
function debounce(func, wait) {
let timeout;
return function (…args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
window.addEventListener('resize', debounce(() => {
console.log('Window resized');
}, 200));Вызывайте функцию только после определенного периода бездействия, повышая производительность.
Вам точно нужно ознакомиться с Debounce. Здесь вы найдете подробное описание этой техники, примеры использования и практические советы по ее применению.
29 Функция дроссельной заслонки (Throttle)
Используйте функцию дросселя для ограничения скорости выполнения функции: Это полезно для событий, которые часто срабатывают, например, при прокрутке или изменении размера окна.
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function (…args) {
if (!lastRan) {
func.apply(this, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if (Date.now() - lastRan >= limit) {
func.apply(this, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
};
}
window.addEventListener('scroll', throttle(() => {
console.log('Window scrolled');
}, 200));Ограничивая частоту вызова функции вы повышаете производительность для часто срабатывающих событий.
30 Глубокое клонирование объектов
Используйте структурированное клонирование или библиотеки, такие как Lodash, для глубокого клонирования объектов: Это поможет избежать проблем с клонированием вложенных объектов.
const obj = { a: 1, b: { c: 2 } };
const deepClone = JSON.parse(JSON.stringify(obj));
console.log(deepClone); // { a: 1, b: { c: 2 } }Копируйте вложенные объекты по значению, а не по ссылке, предотвращая непреднамеренные изменения исходного объекта.
Мы уже раскрыли немало секретов от опытных JavaScript-разработчиков. Но даже это еще не конец! Продолжайте следить за нашими материалами, чтобы погрузиться в мир JavaScript и стать настоящим профессионалом!
Не пропустите следующую часть, где мы поделимся основами языка программирования JS, ценными советами и техниками, которые помогут вам создавать потрясающие проекты. Переходите по ссылке!
Источник: https://medium.com/@codewithashutosh/45-javascript-super-hacks-every-developer-should-know-5f1ee3c1d380
