10 продвинутых трюков в JavaScript, которые вы могли не знать

17 октября, 2024

Содержание

Улучшите свои навыки программирования с помощью этих малоизвестных техник JavaScript.

JavaScript — это гибкий язык, который содержит множество скрытых возможностей, позволяющих сделать ваш процесс разработки более эффективным, а код — чище. Вот 10 продвинутых трюков, которые могут существенно улучшить ваши навыки программирования.

1. Деструктуризация с присвоением псевдонимов

Деструктуризация позволяет извлекать значения из массивов или объектов в отдельные переменные. С помощью псевдонимов (aliasing) можно переименовывать переменные в процессе, что особенно полезно при работе с данными из внешних источников, таких как API.

Пример использования: Получение данных из API с более осмысленными именами для улучшения читаемости и поддержки кода.

const apiResponse = { first_name: 'John', user_age: 30, address: { city: 'New York', zip: '10001' } };
const { first_name: firstName, user_age: age, address: { city: hometown, zip: postalCode } } = apiResponse;
console.log(firstName); // John
console.log(age); // 30
console.log(hometown); // New York
console.log(postalCode); // 10001

Зачем использовать: Псевдонимы помогают сделать названия переменных более понятными и интуитивными, улучшая читаемость кода. Также это позволяет избежать конфликтов имен и облегчает работу с комплексными структурами данных.

2. Каррирование (Currying)

Каррирование — это процесс преобразования функции, принимающей несколько аргументов, в последовательность функций, каждая из которых принимает один аргумент. Этот подход упрощает создание более гибких и повторно используемых функций, что особенно полезно в функциональном программировании.

Пример использования: Создание повторно используемых функций для применения скидок. Вместо написания отдельных функций для разных процентных скидок можно создать одну каррированную функцию.

const applyDiscount = (discount) => (price) => price - (price * discount / 100);
const tenPercentOff = applyDiscount(10);
const twentyPercentOff = applyDiscount(20);

console.log(tenPercentOff(100)); // 90
console.log(twentyPercentOff(100)); // 80

const applyTax = (taxRate) => (price) => price + (price * taxRate / 100);
const applyTenPercentTax = applyTax(10);

console.log(applyTenPercentTax(100)); // 110
console.log(applyTenPercentTax(twentyPercentOff(100))); // 88

Зачем использовать: Каррирование позволяет предварительно настроить аргументы функций, создавая более модульный и повторно используемый код. Это значительно упрощает создание полезных утилитарных функций, улучшая поддерживаемость кода.

3. Дебаунсинг и троттлинг

Дебаунсинг и троттлинг — это техники контроля частоты выполнения функции. Они особенно полезны для оптимизации обработчиков событий, предотвращая излишнее количество вызовов функций, что может негативно сказываться на производительности.

Дебаунсинг: Гарантирует, что функция не будет вызвана повторно, пока не пройдет определенное время после последнего вызова. Полезно для таких случаев, как поля поиска, где нужно дождаться окончания ввода пользователем перед выполнением запроса к API.

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const search = debounce((query) => {
  console.log(`Searching for ${query}`);
  // Imagine an API call here
}, 300);

document.getElementById('searchInput').addEventListener('input', (event) => {
  search(event.target.value);
});

Троттлинг: Ограничивает выполнение функции с определенным интервалом времени, что полезно для таких событий, как прокрутка страницы, когда нужно уменьшить количество вызовов.

function throttle(func, interval) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= interval) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

const handleScroll = throttle(() => {
  console.log('Scrolled');
  // Imagine complex calculations or DOM updates here
}, 300);

window.addEventListener('scroll', handleScroll);

Зачем использовать: Эти техники предотвращают избыточные вызовы функций, улучшая производительность и плавность работы пользовательского интерфейса.

4. Мемоизация

Мемоизация — это техника оптимизации, при которой результаты дорогостоящих вызовов функций кэшируются, и кэшированные результаты возвращаются при повторении тех же входных данных. Это может существенно улучшить производительность для часто вызываемых функций с одинаковыми аргументами.

Пример использования: Улучшение производительности рекурсивных функций, таких как вычисление чисел Фибоначчи.

const memoize = (fn) => {
  const cache = {};
  return (...args) => {
    const key = JSON.stringify(args);
    if (!cache[key]) {
      cache[key] = fn(...args);
    }
    return cache[key];
  };
};

const fibonacci = memoize((n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
});

console.log(fibonacci(40)); // 102334155

Зачем использовать: Мемоизация предотвращает повторные вычисления, значительно улучшая производительность.

5. Прокси (Proxy)

Прокси-объект позволяет создать «прокладку» для другого объекта, перехватывая и переназначая базовые операции, такие как доступ к свойствам, их изменение и другие. Это мощный инструмент для добавления кастомного поведения объектам.

Пример использования: Валидация и логирование при доступе и изменении свойств объекта.

const user = {
  name: 'John',
  age: 30
};

const handler = {
  get: (target, prop) => {
    console.log(`Getting ${prop}`);
    return target[prop];
  },
  set: (target, prop, value) => {
    if (prop === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    console.log(`Setting ${prop} to ${value}`);
    target[prop] = value;
    return true;
  }
};

const proxyUser = new Proxy(user, handler);
console.log(proxyUser.name); // Getting name, John
proxyUser.age = 35; // Setting age to 35
// proxyUser.age = '35'; // Throws TypeError

Зачем использовать: Прокси позволяет добавить кастомное поведение объектам, что улучшает контроль за их манипуляцией.

6. Генераторы

Генераторы — это функции, которые можно приостановить и возобновить позже, сохраняя контекст между вызовами. Они полезны для создания итераторов и управления асинхронными задачами.

Пример использования: Реализация итератора для обхода сложных объектов.

function* objectEntries(obj) {
  for (let key of Object.keys(obj)) {
    yield [key, obj[key]];
  }
}

const user = { name: 'John', age: 30, city: 'New York' };

for (let [key, value] of objectEntries(user)) {
  console.log(`${key}: ${value}`);
}
// name: John
// age: 30
// city: New York

Зачем использовать: Генераторы упрощают обработку асинхронных процессов и работу с итерациями.

7. Улучшение работы с консолью

Консоль в JavaScript предлагает множество полезных методов для логирования, таких как console.table, console.group, и console.time, что позволяет улучшить отладку.

// Basic logging
console.log('Simple log');
console.error('This is an error');
console.warn('This is a warning');

// Logging tabular data
const users = [
  { name: 'John', age: 30, city: 'New York' },
  { name: 'Jane', age: 25, city: 'San Francisco' },
];
console.table(users);

// Grouping logs
console.group('User Details');
console.log('User 1: John');
console.log('User 2: Jane');
console.groupEnd();

// Timing code execution
console.time('Timer');
for (let i = 0; i < 1000000; i++) {
  // Some heavy computation
}
console.timeEnd('Timer');

Зачем использовать: Правильное использование методов консоли улучшает видимость и структуру отладочной информации.

8. Глубокое клонирование с помощью structuredClone

Вместо обычного поверхностного копирования объектов, новый метод structuredClone в JavaScript позволяет выполнить глубокое клонирование, гарантируя, что вложенные объекты и массивы также будут скопированы. Этот метод превосходит традиционные подходы, такие как JSON.parse(JSON.stringify(obj)), которые не работают с определенными типами данных, такими как функции или даты.

const obj = { 
  a: 1, 
  b: { c: 2 },
  date: new Date(),
  arr: [1, 2, 3],
  nestedArr: [{ d: 4 }]
};
const clonedObj = structuredClone(obj);

console.log(clonedObj); 
// { a: 1, b: { c: 2 }, date: 2023-06-08T00:00:00.000Z, arr: [1, 2, 3], nestedArr: [{ d: 4 }] }
console.log(clonedObj === obj); // false
console.log(clonedObj.b === obj.b); // false
console.log(clonedObj.date === obj.date); // false
console.log(clonedObj.arr === obj.arr); // false
console.log(clonedObj.nestedArr[0] === obj.nestedArr[0]); // false

Почему это полезно: structuredClone — это встроенный, эффективный способ глубокого клонирования объектов, который упрощает работу с более сложными структурами данных. В отличие от альтернатив, он корректно обрабатывает такие типы данных, как Date, Map, Set, а также циклические ссылки. Это делает его гораздо более универсальным и надежным, чем другие подходы.

9. Самовызванные функции (IIFE)

Самовызванные функции (IIFE, Immediately Invoked Function Expressions) являются мощным способом создания функций, которые сразу же выполняются после их создания. Эта техника помогает ограничить область видимости переменных и избежать их попадания в глобальный контекст, что особенно полезно в более старых версиях JavaScript.

(function() {
  const privateVar = 'This is private';
  console.log('Self-invoking function runs immediately');
  // Initialization code here
})();

// Private variables are not accessible from outside
// console.log(privateVar); // ReferenceError: privateVar is not defined

Почему это полезно: IIFE помогают избежать загрязнения глобального пространства имен, что особенно полезно в сценариях, когда нужно инкапсулировать код или инициализировать какие-либо данные сразу после их создания. В современных проектах с модулями IIFE могут помочь с изоляцией кода и избежать конфликтов имен.

10. Помеченные шаблонные литералы

Помеченные шаблонные литералы позволяют разработчикам изменять поведение строковых шаблонов на лету, что открывает огромные возможности для кастомизации. Этот механизм можно использовать, например, для интернационализации, динамической генерации HTML или безопасного отображения пользовательского ввода.

function sanitize(strings, ...values) {
  return strings.reduce((result, string, i) => {
    let value = values[i - 1];
    if (typeof value === 'string') {
      value = value.replace(/&/g, '&amp;')
                   .replace(/</g, '&lt;')
                   .replace(/>/g, '&gt;')
                   .replace(/"/g, '&quot;')
                   .replace(/'/g, '&#39;');
    }
    return result + value + string;
  });
}

const userInput = '<script>alert("xss")</script>';
const message = sanitize`User input: ${userInput}`;
console.log(message); // User input: &lt;script&gt;alert("xss")&lt;/script&gt;

Почему это полезно: Помеченные шаблонные литералы могут быть чрезвычайно полезны для предотвращения уязвимостей, таких как XSS-атаки, когда нужно безопасно работать с пользовательским вводом. Кроме того, они позволяют более гибко работать с шаблонами, создавая мощные механизмы для манипуляции строками в JavaScript.

Заключение

JavaScript предоставляет множество возможностей для оптимизации и улучшения вашего кода. Применяя такие техники, как глубокое клонирование объектов, самовызванные функции или помеченные шаблонные литералы, вы можете сделать свой код не только более производительным, но и безопасным. Использование этих продвинутых приёмов позволит вам лучше управлять сложностью проекта, обеспечивая чистоту и модульность кода.

Будьте открытыми для изучения новых трюков и решений в JavaScript — это сделает вас более эффективным разработчиком! Happy coding!

Этот материал переведен с этого источника.

JS, JS tips, Веб-разработка, Программирование