Введение в ES6

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

В этом руководстве будут рассмотрены важные функции, представленные в ES6, с особым акцентом на Стрелочные функции, новый мощный способ написания функций.

Ключевые особенности ES6

1. let и const

В ES6 представлены два новых способа объявления переменных: let и const.

• let: объявляет переменную в области блока, то есть переменная доступна только внутри того блока, в котором она была объявлена.
  

   let x = 10;
   if (true) {
     let x = 2;
     console.log(x); // 2 (inside block)
   }
   console.log(x); // 10 (outside block)
  

• const: объявляет константную переменную, которую нельзя переназначить. Однако это не делает переменную неизменяемой — свойства объектов, объявленных с помощью const, все равно могут быть изменены.
  

   const y = 10;
   y = 5; // Error: Assignment to constant variable.
  
   const person = { name: "John", age: 30 };
   person.age = 31; // This is allowed.
  

2. Функции со стрелками

Одной из самых обсуждаемых особенностей ES6 является Стрелочная функция. Он обеспечивает более короткий и лаконичный синтаксис для написания функций.

#### Сравнение синтаксиса:

Традиционная функция (ES5):

   var add = function(x, y) {
     return x   y;
   };

Функция стрелки (ES6):

   const add = (x, y) => x   y;

Вот чем отличаются стрелочные функции:

• Сокращенный синтаксис: вам не нужно писать ключевое слово функции, и вы можете опустить фигурные скобки {}, если функция имеет один оператор.
• Неявный возврат: если функция содержит только одно выражение, результат этого выражения возвращается автоматически.
• Нет этой привязки: у стрелочных функций нет собственной this, что делает их непригодными для объектных методов.

Пример однострочной функции со стрелкой:

   const multiply = (a, b) => a * b;
   console.log(multiply(4, 5)); // 20

Стрелочные функции также можно использовать без параметров:

   const greet = () => "Hello, World!";
   console.log(greet()); // "Hello, World!"

Для функций с более чем одной строкой требуются фигурные скобки {}, а оператор возврата должен быть явным:

   const sum = (a, b) => {
     let result = a   b;
     return result;
   };

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

   const person = {
     name: "John",
     sayName: function() {
       setTimeout(() => {
         console.log(this.name);
       }, 1000);
     }
   };
   person.sayName(); // "John"

В приведенном выше примере функция стрелки внутри setTimeout наследует это от методаsayName, который правильно ссылается на объект person.

3. Назначение деструктуризации

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

Деструктуризация объекта:

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

Деструктуризация массива:

   const fruits = ["Apple", "Banana", "Orange"];
   const [first, second] = fruits;
   console.log(first);  // "Apple"
   console.log(second); // "Banana"

4. Оператор распространения и остановки (...)

Оператор ... можно использовать для разделения массивов на отдельные элементы или для объединения нескольких элементов в массив.

• Распространение: разбивает массив на отдельные элементы.
  

   const numbers = [1, 2, 3];
   const newNumbers = [...numbers, 4, 5];
   console.log(newNumbers); // [1, 2, 3, 4, 5]
  

• Rest: собирает несколько аргументов в массив.
  

   function sum(...args) {
     return args.reduce((acc, curr) => acc   curr);
   }
   console.log(sum(1, 2, 3, 4)); // 10
  

5. Обещания

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

Пример:

   const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve("Success!");
     }, 1000);
   });

   myPromise.then(result => {
     console.log(result); // "Success!" after 1 second
   });

В этом примере обещание разрешается через 1 секунду, а метод then() обрабатывает разрешенное значение.

6. Параметры по умолчанию

В ES6 вы можете установить значения по умолчанию для параметров функции. Это полезно, когда параметр не указан или не определен.

Пример:

   function greet(name = "Guest") {
     return `Hello, ${name}!`;
   }
   console.log(greet());       // "Hello, Guest!"
   console.log(greet("John")); // "Hello, John!"

7. Строковые методы (includes(), BeginsWith(), EndWith())

В строки были добавлены новые методы, чтобы упростить выполнение общих задач:

• includes(): проверяет, содержит ли строка указанное значение.
  

   let str = "Hello world!";
   console.log(str.includes("world")); // true
  

• startsWith(): проверяет, начинается ли строка с указанного значения.
  

   console.log(str.startsWith("Hello")); // true
  

• endsWith(): проверяет, заканчивается ли строка указанным значением.
  

   console.log(str.endsWith("!")); // true
  

8. Методы массива (find(), findIndex(), from())

В ES6 представлены новые методы работы с массивами:

• find(): возвращает первый элемент, удовлетворяющий условию.
  

   const numbers = [5, 12, 8, 130, 44];
   const found = numbers.find(num => num > 10);
   console.log(found); // 12
  

• findIndex(): возвращает индекс первого элемента, удовлетворяющего условию.
  

   const index = numbers.findIndex(num => num > 10);
   console.log(index); // 1 (position of 12 in the array)
  

9. Классы

ES6 представил в JavaScript классы, которые являются синтаксическим сахаром существующего в JavaScript наследования на основе прототипов. Классы обеспечивают более чистое и понятное объектно-ориентированное программирование.

Пример:

   class Car {
     constructor(brand, year) {
       this.brand = brand;
       this.year = year;
     }

     displayInfo() {
       return `${this.brand} from ${this.year}`;
     }
   }

   const myCar = new Car("Toyota", 2020);
   console.log(myCar.displayInfo()); // "Toyota from 2020"

Заключение

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

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

Продолжайте работу над проектом Arrow Functions на GitHub

Ссылки

• https://www.w3schools.com/js/js_es6.asp
• https://towardsdatascience.com/javascript-es6-iterables-and-iterators-de18b54f4d4
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements