Возможности ES6

Мы собираемся обсудить несколько функций ES6, которые мы можем использовать при кодировании.

Шаблонные литералы

В приведенном ниже коде показано, что такое литералы шаблонов в ES6 по сравнению с ES5.

/*IN ES5*/
var name = 'Hello World'; 
var message = 'Hey' + name + ',';
/*IN ES6*/
let name = 'Hello World'; 
let message = `Hey ${name},`;

Здесь мы используем обратную кавычку. Чтобы добавить заполнитель в литерал шаблона, мы используем синтаксис $ {expression}. Вы можете заменить «выражение» любыми выражениями JavaScript. Еще одно преимущество использования шаблонных литералов состоит в том, что они могут расширять несколько строк.

let name = 'Hello World';
let  message = `
Hi ${name},

Thank you for your Clap. 

Happy learning,
Aravind
`;

Пусть и Const

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

function helloworld() {
   for (var x = 0; x < 2; x++) { 
      // x should only be scoped to 
         this block because this is where we have 
         defined x. 
   }

   // But it turns out that x is available here as well! 
   console.log(x); // 2
}

Другая проблема с ключевым словом var заключается в том, что если вы используете его на верхнем уровне вне функции, оно создает свойство для глобального объекта. ES6 представил два новых ключевых слова для решения этих проблем: let и const. Оба этих ключевых слова определяют переменные, которые относятся к содержащему «блоку», а не к «функции»:

function helloworld() {
   for (let x = 0; x < 2; x++) { 
      // With the "let" keyword, now x is only 
         accessible in this block.
   }

   // x is out of the scope here
   console.log(x); // x is not defined  
}

С помощью const мы можем определить константу. Поэтому мы не можем переназначить его позже:

const x = 1; 
x = 2; // throws "Assignment to constant variable."

Также let и const не создают свойства глобального объекта, если вы используете их на верхнем уровне:

Функция стрелки

Вот выражение функции в ES5:

const add = function(num) { 
   return num + num; 
}

С помощью стрелочных функций мы избавляемся от ключевого слова function и помещаем толстую стрелку (= ›) между параметрами и телом функции:

const add = (num) => { 
   return num + num; 
}

Если наша функция однострочная и возвращает значение, мы можем удалить ключевое слово return, а также фигурные скобки:

const add = (num) => num + num;

Если наша стрелочная функция включает только один параметр, мы даже можем опустить круглую скобку:

const add = num => num + num;

Если наша стрелочная функция не имеет параметров, тогда

const helloWorld = () => { console.log('Hello World'); };

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

// ES5
var activeJobs = fruitsArray.filter(function(fruit) { 
    return fruit; 
});

// ES6
const activeJobs = fruitsArray.filter(fruit=> fruit);

Стрелочные функции, в отличие от обычных, не связывают this заново.

// ES5
function onSubmit() { 
    // Keep a reference to "this" so 
       we can use it in the inner function below. 
    var that = this; 
    orderService(order, function(result) { 
       // In JavaScript, ever function defines 
          its own "this" value. So, "this" in this 
          inner function here is different from "this" 
          in the onSubmit() function. That's why we had to keep a 
          reference to "this" and store it in "that". Now, 
          we can   use "that":
 
       that.result = result; 
    });
}

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

// ES6
function onSubmit() { 
    orderService.store(order, result => { 
       // Since we're using an arrow function here,
         "this" references the "this" value of the 
          containing function (onSubmit). Arrow functions 
          don't re-define "this". 
       this.result = result; 
    });
}

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

Деструктуризация - это выражение, которое позволяет нам извлекать свойства из объекта или элементы из массива. Допустим, у нас есть такой адресный объект:

const address = { 
   street: 'Pallimon',
   city: 'Kollam',
   state: 'Kerala'
};

Теперь где-то еще нам нужно получить доступ к этим свойствам и сохранить их значения в кучу переменных: вот версии ES5 и ES6.

//ES5
var street = address.street;
var city = address.city; 
var state = address.state;
//ES6
const { street, city, state } = address;

Мы также можем деструктурировать массивы, но мы используем квадратные скобки ([]) вместо фигурных скобок ({}).

//ES5
var values = ['Hello', 'World'];
var first = values[0];
var last = values[1];
//ES6
const values = ['Hello', 'World'];
const [first, last] = values;

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

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

//ES5
function getUser (name, year) { 
      year = (typeof year !== ‘undefined’) ? year : 2018; 
      // remainder of the function… 
}
//ES6
function getUser (name, year = 2018) {   
      // function body here... 
}

Импорт и экспорт

export позволяет экспортировать модуль для использования в другом компоненте JavaScript. Мы используем import, чтобы импортировать этот модуль, чтобы использовать его в нашем компоненте.

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

// MyClass.js
class MyClass{
  constructor() {}
}
export default MyClass;

// Main.js
import MyClass from 'MyClass';

по умолчанию экспорт только один на модуль. В случае именованного экспорта мы должны написать примерно так:

// lib.js
export const sqrt = Math.sqrt;
export function square(x) {
  return x * x;
}
export function diag(x, y) {
  return sqrt(square(x) + square(y));
}

// main.js
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

// or you can call them with '*'
// but then you have to prefix the exports with
// the module name

import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

Обещания

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

let p = new Promise(function(resolve, reject) {      
       if (/* condition */) {       
          resolve(/* value */);  
          // fulfilled successfully    
       }else {       
          reject(/* reason */);  
          // error, rejected    
} });

Promise принимает два параметра: resolve и reject для обработки ожидаемой ошибки. Чтобы использовать Promise, то есть мы хотим обработать значение Promises после его выполнения, мы присоединяем обработчик к Promise, используя его .then() метод. Этот метод принимает функцию, которой будет передано разрешенное значение обещания после его выполнения.

var p = new Promise((resolve, reject) => resolve(10)); 
p.then((val) => console.log("fulfilled:", val))  //10  
 .catch((err) => console.log("rejected:", err));

Примечание: функция выборки сама возвращает обещание!

const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{
    return fetch(url);
}
getData(url).
  then(data=> data.json()).
  then(result=> console.log(result));

Параметр Rest и оператор Spread

Оператор spread распределяет элементы массива по отдельным значениям.

function getSum(x, y, z){
    console.log(x+y+z);
}
let sumArray = [10,20,30];
getSum(...sumArray);

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

Теперь давайте объединим два массива:

var a = [1, 2];
var b = [3, 4];
var c = [...a,...b]
console.log(c);

Выход будет [1, 2, 3, 4];

Теперь давайте посмотрим на оператор rest.

Как следует из названия, оператор Rest позаботится об остальных параметрах. Вот отрывок:

function numbers(x, y, ...z){
    console.log(x, y, z);
}
numbers(1, 2, 3, 4, 5, 6);

Результатом приведенного выше кода будет 1 2 [3, 4, 5, 6].

Как вы можете видеть, x и y были присвоены значения 1 и 2 соответственно, тогда как остальные параметры были присвоены z. Остальные параметры обозначаются тремя точками … перед параметром. Именованный параметр становится массивом, содержащим остальные параметры.

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

Классы

Классы - это ядро объектно-ориентированного программирования (ООП). Они делают ваш код более безопасным и инкапсулированным. Использование классов придает вашему коду красивую структуру и сохраняет его ориентированность.

class myClass{
    constructor(name,age){
    this.name=name;
    this.age=age;
}
}
const Home= new myClass("said",20);
console.log(Home.name)//  said

Подробнее о классах можно прочитать здесь MDN class es

Спасибо Mosh и другим средним статьям за то, что они заставили меня все это понять: D

Приятного чтения!

Возможности ES6 - обзор