Откройте для себя 10 основных функций JavaScript, которые повышают производительность и упрощают написание кода. Узнайте о стрелочных функциях, литералах шаблонов, деструктурировании, операторе расширения, async/await, object.entries(), методах массива, include() и сокращенных свойствах объектов. Улучшите свою повседневную разработку с помощью кратких примеров и получите представление о современном кодировании JavaScript.

  1. Функции стрелок. Функции стрелок обеспечивают краткий синтаксис для написания функций и лексически связывают значение this, упрощая работу с обратными вызовами и избегая путаницы, связанной с областью действия this.

Пример:

const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5

2. Литералы шаблонов. Литералы шаблонов позволяют встраивать выражения в строки с помощью обратных кавычек, обеспечивая многострочные строки и интерполяцию строк.

Пример:

const name = 'John';
const message = `Hello, ${name}! 
How are you today?`;
console.log(message);
/* Output:
   Hello, John! 
   How are you today?
*/

3. Назначение деструктуризации. Деструктуризация позволяет извлекать значения из массивов или объектов в отдельные переменные, упрощая манипулирование данными и доступ к ним.

Пример:

const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // Output: 1 2 3
const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name, age); // Output: John 30

4. Оператор распространения. Оператор распространения позволяет разбивать элементы массива или свойства объектов на отдельные элементы, упрощая клонирование массивов/объектов и их слияние.

Пример:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // Output: [1, 2, 3, 4, 5]
const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 };
console.log(obj2); // Output: { x: 1, y: 2, z: 3 }

5. Async/Await: Async/Await построен на основе промисов и обеспечивает более синхронный синтаксис для обработки асинхронного кода, что упрощает его понимание и поддержку.

Пример:

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => resolve('Data successfully fetched!'), 1000);
  });
}

async function fetchDataAsync() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchDataAsync();

6. Object.entries(): Object.entries() возвращает массив собственных перечислимых пар свойств [ключ, значение] данного объекта, что полезно для перебора свойств объекта.

Пример:

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

for (const [key, value] of Object.entries(person)) {
  console.log(`${key}: ${value}`);
}
/* Output:
   name: John
   age: 30
*/

7. Методы массива: map(), filter(), reduce(): эти методы массива являются мощными и широко используются для обработки и преобразования данных.

Пример:

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num ** 2);
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 15

8. Array.includes(): Array.includes() проверяет, содержит ли массив определенный элемент, и возвращает логическое значение.

Пример:

const fruits = ['apple', 'banana', 'orange'];
console.log(fruits.includes('apple')); // Output: true
console.log(fruits.includes('grape')); // Output: false

9. Сокращенные свойства объекта: сокращенные свойства объекта позволяют создавать объекты с более коротким синтаксисом, когда имя свойства и имя переменной совпадают.

Пример:

const name = 'John';
const age = 30;
const person = { name, age };
console.log(person); // Output: { name: 'John', age: 30 }

Эти функции могут значительно повысить производительность и сделать ваши ежедневные задачи по кодированию JavaScript более эффективными и приятными.

Не забудьте подписаться на меня за такими интересными статьями.

Удачного кодирования!