ai-benchmark/tests/summarization/techrocks.ru_2025_03_14_20-useful-js-tricks.txt

20 приемов JavaScript, которые должен знать каждый разработчик От Редакция techrocks.ru / 14.03.2025 JavaScript — мощный, гибкий язык, а знание нескольких интересных приемов работы с ним может сделать ваш код чище, быстрее и эффективнее. Ниже приведены 20 практических советов по работе с JavaScript, которые вы можете использовать в реальных приложениях для улучшения процесса разработки. 1. Деструктуризация и переименование за один шаг Вы можете переименовывать переменные во время деструктуризации объекта, что полезно при конфликтах имен. const user = { name: 'Alice', age: 25 };
const { name: userName, age: userAge } = user;
console.log(userName); // Alice
console.log(userAge);  // 25 2. Опциональная последовательность с вызовами функций Опциональная последовательность (опциональная цепочка, англ. optional chaining) может использоваться с функциями, проверяя существование функции до ее вызова. const user = {
  getName: () => 'Alice',
};
console.log(user.getName?.());   // Alice
console.log(user.getAge?.());    // undefined 3. Использование оператора ||= для присваивания по умолчанию Логическое присваивание OR (||=) присваивает значение только в том случае, если значение переменной null или undefined или если значение переменной ложно (например 0). let count;
count ||= 10;
console.log(count); // 10 4. Преобразование NodeList в массив с помощью оператора spread Оператор spread предоставляет быстрый способ преобразования NodeList в массив. const divs = document.querySelectorAll('div');
const divArray = [...divs];
console.log(Array.isArray(divArray)); // true 5. Деструктуризация массива/объекта со значениями по умолчанию Присваивайте значения по умолчанию при деструктуризации, чтобы избежать undefined при отсутствии ключей. const user = { name: 'Alice' };
const { name, age = 25 } = user;
console.log(age); // 25 6. Удаление ложных значений из массива Используйте filter() для удаления из массива ложных значений (таких как 0, null, undefined, false). const arr = [0, 'hello', null, 42, false, 'world'];
const filtered = arr.filter(Boolean);
console.log(filtered); // ["hello", 42, "world"] 7. Сортировка массивов объектов по свойствам Вот пример того, как можно легко отсортировать массив объектов по определенному свойству: const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 20 }];
users.sort((a, b) => a.age - b.age);
console.log(users); // [{ name: 'Bob', age: 20 }, { name: 'Alice', age: 25 }] 8. Динамический импорт для ленивой загрузки Динамический импорт позволяет загружать модули только по мере необходимости, сокращая время первоначальной загрузки. const loadModule = async () => {
  const module = await import('./myModule.js');
  module.default(); // Calls the default export function
};
loadModule(); 9. Параметры по умолчанию с деструктуризацией объектов При использовании параметров по умолчанию вы также можете деструктурировать и устанавливать значения по умолчанию для определенных свойств. function createUser({ name = 'Guest', age = 18 } = {}) {
  console.log(name, age);
}
createUser();               // Guest 18
createUser({ name: 'Alice' }); // Alice 18 10. Использование Object.assign() для поверхностного копирования Object.assign() удобен для поверхностного копирования объектов без изменения оригинала. const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
copy.a = 3;
console.log(original.a); // 1 (unchanged) 11. Мемоизация функций для повышения производительности Мемоизация кэширует результаты вызовов дорогих функций на основе аргументов, что полезно для функций, требующих сложных вычислений. const memoize = (fn) => {
  const cache = {};
  return (...args) => {
    const key = JSON.stringify(args);
    if (!cache[key]) {
      cache[key] = fn(...args);
    }
    return cache[key];
  };
};
const slowSquare = (n) => n * n;
const memoizedSquare = memoize(slowSquare);
console.log(memoizedSquare(4)); // 16 (cached on second call) 12. Использование reduce для группировки элементов массива Функция reduce() позволяет группировать элементы массива на основе какого-либо свойства. Это часто требуется при обработке данных. const people = [
  { name: 'Alice', role: 'admin' },
  { name: 'Bob', role: 'user' },
  { name: 'Charlie', role: 'admin' },
];
const grouped = people.reduce((acc, person) => {
  (acc[person.role] = acc[person.role] || []).push(person);
  return acc;
}, {});
console.log(grouped);
// { admin: [{ name: 'Alice' }, { name: 'Charlie' }], user: [{ name: 'Bob' }] } 13. Уплощение вложенных массивов с помощью Array.flat(Infinity) Уплощение многоуровневых вложенных массивов становится простым благодаря Array.flat(Infinity). const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(Infinity)); // [1, 2, 3, 4] 14. Переключение булевых значений с помощью ! Переключить булево значение так же просто, как дважды применить оператор NOT. let isVisible = false;
isVisible = !isVisible;
console.log(isVisible); // true 15. Объединение нескольких массивов с помощью concat() Оператор concat() помогает объединить несколько массивов в одном предложении. const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const merged = arr1.concat(arr2, arr3);
console.log(merged); // [1, 2, 3, 4, 5, 6] 16. Асинхронный перебор массива с помощью for…of и await При итерации по массиву промисов for...of и await гарантируют, что каждый промис разрешится до выполнения следующего. const fetchData = async () => {
  const urls = ['url1', 'url2'];
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.json());
  }
}; 17. Быстрое получение последнего элемента в массиве Получение последнего элемента в массиве без необходимости знать его длину. const arr = [1, 2, 3, 4];
console.log(arr.at(-1)); // 4 18. Использование Intl для форматирования даты Intl.DateTimeFormat предлагает мощный способ форматирования дат в разных локалях. const date = new Date();
const formatted = new Intl.DateTimeFormat('en-GB', {
  dateStyle: 'full',
}).format(date);
console.log(formatted); // e.g., "Monday, 25 October 2021" 19. Округление чисел с помощью Math.round() и шаблонных литералов Шаблонные литералы могут напрямую форматировать округленные числа. const num = 3.14159;
console.log(`${Math.round(num * 100) / 100}`); // 3.14 20. Преобразование объектов, подобных массивам, в массивы с помощью Array.from() Используйте Array.from() для преобразования массивоподобных объектов (например, аргументов) в настоящие массивы. function example() {
  const argsArray = Array.from(arguments);
  console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3] Все эти приемы упрощают распространенные шаблоны написания кода на JavaScript. Внедрите их в свой рабочий процесс, чтобы писать эффективный и выразительный код. Успешного кодинга! Перевод статьи “20 JavaScript Tricks Every Developer Must Know”. 7 уроков дизайна для разработчиков 1 комментарий / Новости, Обучение / От andrey_av Не документируйте код. Кодируйте документацию 1 комментарий / Новости, Обучение / От andrey_av
==============
JavaScript — мощный язык, знание которого может улучшить код. Вот 20 полезных приемов: деструктуризация и переименование, опциональная последовательность, логическое присваивание, преобразование NodeList в массив, деструктуризация с значениями по умолчанию, удаление ложных значений, сортировка массивов, динамический импорт, параметры по умолчанию, Object.assign() для копирования, мемоизация функций, reduce для группировки, flat() для уплощения, переключение булевых значений, concat() для объединения массивов, await в for…of, at() для получения последнего элемента, Intl для форматирования даты, Math.round() для округления, Array.from() для преобразования объектов в массивы.