ES6

JavaScript 13 интересных функций ES6

Функции JavaScript, которые можно использовать вместо традиционных подходов es5.

ECMAScript 6 (также известный как ECMAScript 2015 или просто ES6) — это значительное обновление языка JavaScript, в которое добавлено множество новых функций и улучшений. Вот некоторые из наиболее важных функций ES6, а также примеры их использования:

  1. Let и Const. Ключевые слова let и const позволяют объявлять переменные в блочной области, что может быть полезно для управления областью действия и предотвращения затенения переменных.
let x = 10;
x = 20;
console.log(x); // Output: 20
const y = 30;
y = 40; // Throws an error: "Assignment to constant variable."

2. Стрелочные функции. Стрелочные функции обеспечивают краткий синтаксис для объявления анонимных функций.

const add = (x, y) => x + y;
console.log(add(10, 20)); // Output: 30

3. Литералы шаблонов. Литералы шаблонов — это строковые литералы, которые могут включать выражения и упрощают создание строк с динамическим содержимым.

const name = 'John Doe';
console.log(`Hello, ${name}!`); // Output: "Hello, John Doe!"

4. Деструктуризация: деструктуризация позволяет извлекать значения из объектов и массивов и назначать их отдельным переменным.

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

5. Оператор распространения: оператор распространения позволяет вам распространять элементы массива или свойства объекта в новый массив или объект.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = […arr1, …arr2];
console.log(arr3); // Output: [1, 2, 3, 4, 5, 6]

6. Модули. В ES6 появился способ организации кода в повторно используемые модули, что позволяет разбивать код на более мелкие и более управляемые единицы.

// File: math.js
export const add = (x, y) => x + y;
export const subtract = (x, y) => x - y;
// File: main.js
import { add, subtract } from './math';
console.log(add(10, 20)); // Output: 30
console.log(subtract(20, 10)); // Output: 10

7. Классы: в ES6 появился способ определения классов, обеспечивающий более чистый синтаксис для создания и организации объектов.

class Person {
  constructor(name, age) {
  this.name = name;
  this.age = age;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}
const john = new Person('John Doe', 30);
john.sayHello(); // Output: "Hello, my name is John Doe and I am 30 years old."

8. Параметры по умолчанию: параметры по умолчанию позволяют указать значение по умолчанию для аргумента функции, которое будет использоваться, если значение не указано.

const greet = (name = 'John Doe') => {
  console.log(`Hello, ${name}!`);
};
greet(); // Output: "Hello, John Doe!"
greet('Jane Doe'); // Output: "Hello, Jane Doe!"

9. Остальные параметры: остальные параметры позволяют представить неопределенное количество аргументов в виде массива.

const add = (…args) => {
  return args.reduce((acc, val) => acc + val, 0);
};
console.log(add(1, 2, 3, 4, 5)); // Output: 15

10. Усовершенствования литералов объектов:ES6 добавил несколько улучшений в литералы объектов, упрощая создание объектов и управление ими.

const name = 'John Doe';
const age = 30;
const person = {
  name,
  age,
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};
person.sayHello(); // Output: "Hello, my name is John Doe and I am 30 years old."

11 Цикл For…of: Цикл for…of позволяет перебирать значения массива или другого итерируемого объекта.

const arr = [1, 2, 3, 4, 5];
for (const val of arr) {
  console.log(val);
}
// Output:
// 1
// 2
// 3
// 4
// 5

12. Map и Set. Структуры данных Map и Set позволяют хранить пары ключ-значение и уникальные значения соответственно.

const map = new Map([['name', 'John Doe'], ['age', 30]]);
console.log(map.get('name')); // Output: "John Doe"
const set = new Set([1, 2, 3, 4, 5, 5, 5]);
console.log(set.size); // Output: 5

13. Промисы. Промисы позволяют обрабатывать асинхронные операции более удобным для чтения и сопровождения способом.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 1000);
  });
};
fetchData().then(data => console.log(data));
// Output (after 1 second): { name: "John Doe", age: 30 }

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