Я расскажу о следующих темах в разделе ЧАСТЬ-2 руководства ECMAScript-6 для начинающих. Вот ссылка на раздел ЧАСТЬ-1 https://medium.com/@srivastavaankita080/ecmascript-6-beginners-guide-60ac3d6c5ac8.

  • Что такое деструктурированные назначения, параметры отдыха, параметры по умолчанию?
  • Работа с функцией стрелки, обещаниями и выборкой, асинхронным и ожиданием.
  • Синтаксис класса ES6 и наследование

Итак, давайте начнем с вышеуказанных тем и подробнее рассмотрим ES6.

Деструктурированные задания

Деструктурированные присвоения выполняются для массивов и объектов. Это ясно из его названия, т.е. вы будете деструктурировать значения, присутствующие внутри массива / объектов.

Для деструктуризации массивов он будет соответствовать позиционированию значений индекса.

const employee= ['John', 'Peter', 'Mark', 'Frank', 'Tom'];
const [first,,third,,,] = employee;
console.log(first,',', third);
Output: John, Mark

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

const [first,,third,,,] = ['John', 'Peter', 'Mark', 'Frank', 'Tom'];
console.log(first,',', third);
Output: John, Mark

При деструктуризации объекта он сопоставляет значения объекта с ключами вместо позиционирования индекса.

const person = {
    firstName: 'John',
    lastName: 'Peter',
    age: 23,
    gender: 'Male',
    qualification: 'BCA'
};

function printPersonDetails({firstName, age, qualification}) {
    return `${firstName} is ${age} years old and is qualified in  ${qualification}.`
}

console.log(printPersonDetails(person));
Output: John is 23 years old and is qualified in BCA.

Остальные параметры

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

function addNumbers(...numbers){
    let sum=0;

    console.log(numbers[0]);
    console.log(numbers[1]);
    console.log(numbers[2]);

    for(let number of numbers){
        sum += number;
    }

    console.log(`sum of all numbers ${sum}`);
}

addNumbers(1,2,3);
addNumbers(1,2); /*as there is not 3rd argument it will print undefined */
Output: 1
        2
        3
        sum of all numbers 6
        1
        2
        undefined
        sum of all numbers 3

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

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

function printPersonDetail(name = 'John', age= 23){
    console.log(`${name} is ${age} years old.`)
 }

printPersonDetail();
Output: John is 23 years old.

Стрелочные функции

В ES5 мы использовали ключевое слово function для создания функций, которое было изменено в ES6. Теперь мы можем создавать функции с помощью стрелок (= ›), и синтаксис очень удобен !!

Для большей ясности давайте сравним синтаксис функций в ES5 и ES6.

In ES5

const printPersonDetail = function(name, age){
    console.log(`${name} is ${age} years old.`)
};
printPersonDetail('John',23);

In ES6

const printPersonDetail = (name = 'John', age= 23) => console.log(`${name} is ${age} years old.`);

Не забудьте добавить фигурные скобки после функции стрелки, если в вашей функции более одной строки кода.

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

Обещания и получение

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

а.) в ожидании - ›выполнение обещания началось, но еще не выполнено или отклонено.

б.) выполнено - ›выполнение обещанного выполнено успешно.

в.) отклонение - ›выполнение обещания не выполнено из-за ошибки.

Функция Fetch используется для загрузки данных из API. Он принимает 2 параметра, первый - это сам API, а второй - это объект, из которого вы можете изменять различные настройки при загрузке данных.

Как правило, вы найдете больше обещаний с помощью fetch, но есть и другие способы. Давайте посмотрим на пример использования fetch с обещанием увидеть его практическое применение:

const data = () => {
     return fetch('https://jsonplaceholder.typicode.com/todos/1')
         .then(response => response.ok ? response.json() : Promise.reject())
         .then(json => { return `${json.title} is completed or not ? -> ${json.completed}`})
};

data().then(console.log)

Итак, что здесь происходит:

  1. data - это переменная, которая содержит значение, возвращаемое вызовом fetch.
  2. fetch вызывает случайный API, и если получение данных из 'https://jsonplaceholder.typicode.com/todos' прошло успешно (status = 200 ok), тогда обещание выполнено, и вы получите данные в формате JSON, и вы перейдете к другому оператору then, где мы возвращаем сообщение. Обещание будет в исполненном состоянии.
  3. Если предположить, что при получении данных из вышеуказанного API произошла ошибка, то обещание будет отклонено (Promise.reject ()). Обещание будет в состоянии отклонения.
  4. как только обещания в fetch будут обработаны, он перейдет к последнему оператору then, который распечатает значение данных, возвращенных вызовом fetch.

Мы можем сделать гораздо больше с данными JSON, которые мы получаем после разрешения или отклонения обещания. Например:

const data = () => {
    return fetch('https://jsonplaceholder.typicode.com/')
        .then(response => response.ok ? response.json() : Promise.reject())
        .then(json => json.filter(user => user.title === 'delectus aut autem')[0])
        .then(msg => { return `${msg.title} is completed or not ? -> ${msg.completed}`})
        .catch(status => { return status} )
};

data().then(console.log)

Если при получении ответа возникает какая-либо ошибка, он останавливает выполнение then и переходит в блок catch.

Асинхронный и ожидание

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

Итак, теперь мы поняли асинхронные функции, и возможно, что выполнение любой конкретной строки асинхронной функции (скажем, X) займет больше времени, и будет какой-то другой код (скажем, Y), зависящий от результата функции X. Здесь возникает необходимость на ключевое слово await. Здесь можно использовать ключевое слово await, чтобы приостановить или дождаться любого дальнейшего выполнения кода, пока выполнение этого конкретного строчного кода не завершится успешно. Давайте посмотрим на код, чтобы понять его на практике.

const data = async () => {
             const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
             const value = await response.json();
             console.log(value);
        };
data();

В приведенном выше примере данные представляют собой асинхронную функцию, поскольку ее поток выполнения не является синхронным (поскольку вызов выборки и преобразование ответа в ответ JSON могут занять больше времени, чем другие строки кода, присутствующие в функции данных), поэтому для указания того, что мы использовали ключевое слово async.

Мы использовали await перед вызовом fetch, потому что мы хотим приостановить выполнение преобразования ответа в ответ JSON (response.json ()) до успешного выполнения вызова fetch, в противном случае переменная ответа будет содержать undefined, что приведет к нежелательному результату.

Синтаксис и наследование класса ES6

Классы ES6 предлагают гораздо более чистый и лучший синтаксис для написания кода и обработки наследования по сравнению со способом написания классов в ES5. Он просто обеспечивает лучший синтаксис для работы с прототипом (например, добавление функции в прототипы, наследование прототипа), но не вводит какую-либо новую объектно-ориентированную модель в JS.

ES5 способ написания классов:

var Dog = function(name , color) {
    this.name = name;
    this.color = color;
};
    Dog.prototype.getDogDetails = function(){
        return `${this.name} is ${this.color} in color.`
    };

var dog = new Dog('Tom', 'White');
console.log(dog.getDogDetails());

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

Но в ES6. синтаксис довольно крутой и его легко написать:

class Dog {

    constructor(name, color) {
        this.name = name;
        this.color = color;
    }

       getDogDetails() {
            return `${this.name} is ${this.color} in color.`;
        }
}

let dog = new Dog('Tom', 'White');
console.log(dog.getDogDetails());

Мы создаем класс Dog, используя ключевое слово class . name и color - это свойства конструктора класса Dog. В фоновом режиме функция getDogDetails назначается прототипу класса Dog, который обрабатывается ES6, нам не нужно делать это явно, что приводит к довольно ясному коду.

Итак, теперь вы можете сравнить, как ES6 сокращает наши усилия по созданию класса. Когда дело доходит до наследования, способ написания класса в ES6 - это как благо, поскольку он избавляет нас от написания сложного кода с неприятным синтаксисом. Давайте посмотрим на пример, чтобы сравнить способ наследования в ES5 и ES6:

var Dog = function(name , color) { /* step1 */
    this.name = name;
    this.color = color;
}; /* step1 finished */

Dog.prototype.getDogDetails = function(){  /* step2 */
    return `${this.name} is ${this.color} in color.`
};  /* step2 finished */

var WhiteDog = function (name, color) { /* step3 finished */
    this._super.call(this, name, color);
};  /* step3 finished */

WhiteDog.prototype = Object.create(Dog.prototype); /* step4 */

WhiteDog.prototype.constructor = WhiteDog; /* step5 */

WhiteDog.prototype._super = Dog; /* step6*/

var whiteDog = new WhiteDog('Tom', 'White');
console.log(whiteDog.getDogDetails());

Я знаю, что приведенный выше код немного неуклюжий 😕. Позвольте мне объяснить это, чтобы вы могли понять усилия, которые были уменьшены с синтаксисом класса ES6. Шаги 1 и Шаг 2 должны быть понятны вам, как я уже объяснял в приведенном выше примере.

  1. Шаг 3 - создание класса WhiteDog способом ES5, this._super.call (this, name, color); используется для передачи значения переменной в ее суперкласс. Мы вызываем метод вызова и передаем this ключевое слово, чтобы установить новый контекст (специфичный для дочернего класса) this.
  2. На шаге 4 мы устанавливаем прототип класса Child равным родительскому классу.
  3. На шаге 5 мы назначаем конструктор дочернего класса его собственному прототипу.
  4. На шаге 6 мы назначаем класс Dog в качестве суперкласса для класса WhiteDog.

Теперь давайте посмотрим, как ES6 пишет класс:

class Dog {

    constructor(name, color) {
        this.name = name;
        this.color = color;
    }

       getDogDetails() {
            return `${this.name} is ${this.color} in color.`;
        }
}

class WhiteDog extends Dog {
    constructor(name, color){
        super(name, color);
    }
}

let whiteDog = new WhiteDog('Tom', 'White');
console.log(whiteDog.getDogDetails());

Давайте пройдемся по коду один раз, чтобы объяснить вам:

  1. Dog - это родительский класс, в котором есть свойство name, color и поведение getDogDetails.
  2. WhiteDog - это дочерний класс, который наследует родительский класс с помощью ключевого слова extends, и поэтому дочерний класс может использовать свойства и поведение родительского класса.

Прохладный!! Этот код выглядит довольно аккуратным, чистым и легким для понимания 😊. Теперь, я думаю, вы можете ясно видеть, насколько сократились усилия благодаря синтаксису класса ES6.

Итак, я рассмотрел все темы, необходимые для начала работы с ES6, и надеюсь, вам понравилось. ES6 довольно популярен в наши дни, но все же есть некоторый синтаксис ES6, который еще не поддерживается некоторыми браузерами, и для этого нам нужно выполнить транспилирование нашего кода ES6. Это просто преобразование кода ES6, который вы написали, в ES5, чтобы браузер поддерживал его, и для этого было доступно множество инструментов, таких как babel и т. Д. Дайте мне знать, если вы хотите, чтобы я написал, для настройки инструмент babel для транспиляции ES6. Удачного кодирования 😊 😊