DevGang
Авторизоваться

Лучшие хаки 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

#JavaScript #Начинающим
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

В этом месте могла бы быть ваша реклама

Разместить рекламу