ES6
JavaScript 13 интересных функций ES6
Функции JavaScript, которые можно использовать вместо традиционных подходов es5.
ECMAScript 6 (также известный как ECMAScript 2015 или просто ES6) — это значительное обновление языка JavaScript, в которое добавлено множество новых функций и улучшений. Вот некоторые из наиболее важных функций ES6, а также примеры их использования:
- 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 должен начать их применять.