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

Например, рассмотрим этот фрагмент кода ниже:

let apple = {color: 'red'};
let {color} = apple;

console.log(color); // red

Приведенный выше код является примером деструктуризации объекта. Некоторым из нас может быть трудно понять, что означает вторая строка кода и как она вообще работает.

Отсюда и необходимость в этой статье.

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

Ниже перечислены некоторые из наиболее распространенных функций ES6, часто используемых в приложении React.

Пусть / Const

Во многих современных кодах JS широко используются ключевые слова let и const, которые используются для объявления переменных.

По сути, let и const вводят в наш код область видимости на уровне блоков.

Посмотрите на пример ниже, чтобы увидеть, как let и var различаются в использовании.

var x = 1
let y = 2
if (x === 1) {
  var x = 100
  let y = 200
  console.log(x) // output: 100
  console.log(y) // output: 200
}
console.log(x) // output: 100
console.log(y) // output: 2

При использовании const для объявления переменной она может поддерживать постоянное значение.

const pi = 3.141593
pi = 5.6 // this will throw an error

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

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

// Pre-ES6 way
function sayHello() {
 console.log("Hello World..!");
}
// The ES6 way
var sayHello = () => {
 console.log("Hello World..!");
}

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

Что такое this снова .. спросите вы?

Ну, this - это привязка, которая создается при вызове функции, и то, на что она ссылается, полностью определяется сайтом вызова (т.е. как функция вызывается).

И .. на что конкретно ссылается this?

Привязка this указывает на различные объекты, и все зависит от места вызова функции.

Есть 4 правила, которые можно применить к месту вызова функции.

  1. Вызывается с new? Используйте только что построенный объект.
  2. Вызывается с call или apply (или bind)? Использовать указанный объект.
  3. Вызывается с помощью объекта контекста, которому принадлежит вызов? Используйте этот объект контекста.
  4. По умолчанию: undefined в strict mode, в противном случае - глобальный объект.

Для получения дополнительной информации перейдите по ссылке ниже. Он дает наиболее ясное объяснение this.



getify / You-Dont-Know-JS
You-Dont-Know-JS - серия книг по JavaScript. @YDKJS в твиттере. github.com



array.map () метод

Метод map() создает новый массив с результатами вызова предоставленной функции для каждого элемента массива.

В частности, полезно при создании списка в приложении React. Пример:

const colors = ["red", "green", "blue"];
const items = colors.map(color => `<li>${color}</li>`);
console.log(items);

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

Возвращаясь к коду, который мы видели ранее в начале этой статьи.

let apple = {color: 'red', quantity: 10, fresh: true};
let {color, quantity} = apple;

console.log(color); // red;
console.log(quantity); // 10

Переписываем приведенный выше код без деструктуризации объекта.

let apple = {color: 'red', quantity: 10, fresh: true};
let color = apple.color;
let quantity = apple.quantity;
console.log(color); // red
console.log(quantity) // 10

Сравнив оба кода, вы можете согласиться с тем, что первый блок кода намного более разборчив и позволяет избежать повторения apple.somePropertyName снова и снова.

Фигурные скобки слева от знака равенства не представляют собой блок или объект. Это новый синтаксис деструктуризации.

По сути, первый блок кода говорит: дайте мне переменную с именем color и переменную с именем quantity и возьмите их из объекта apple. Мы берем свойство color и quantity и помещаем их в две новые переменные, которые будут привязаны к родительскому блоку.

Операторы распространения

Еще одна широко используемая функция ES6 - это ..., также известный как оператор распространения.

Чтобы лучше понять это, давайте рассмотрим пример.

let mid = [3, 4];
let arr = [1, 2, mid, 5, 6];
console.log(arr); // [1, 2, [3, 4], 5, 6]

В приведенном выше блоке кода мы еще не используем операторы распространения и, как мы видим, результатом является вставка массива mid в середину массива arr как массива внутри массива.

Но что, если нам нужен только один массив, а не вложенный?

Мы можем использовать оператор распространения. ... позволяет элементам нашего массива расширяться.

let mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];
console.log(arr); // [1, 2, 3, 4, 5, 6]

Как видите, когда мы создаем массив arr и используем оператор распространения в массиве mid, вместо того, чтобы просто вставлять его, массив mid расширяется. Каждый элемент массива mid вставляется в массив arr. В результате в едином массиве.

ES6 классы

Синтаксис class в JavaScript был введен в ES6, и он не пытается ввести новую модель наследования в JavaScript.

JavaScript по-прежнему следует модели наследования на основе прототипов.

Классы ES6 в основном просто добавляют синтаксический сахар к уже существующей модели функций-конструкторов.

Например:

// class definition
class Person{
  constructor(name){         
    this.name = name;
  }     
  walk(){
    console.log(`${this.name} walks`)      
  } 
}
// creating a person1 object
const person1 = new Person('Tim')
person1.walk(); // Tim walks

Наследование

Давайте расширим пример кода в приведенном выше разделе, чтобы иметь класс Teacher, который имеет свой собственный набор свойств и методов.

// class definition
class Teacher{  
  teach(){
    console.log(`teaches`)      
  } 
}

Поскольку Teacher по сути является подмножеством Person, мы хотели бы, чтобы Teacher имел метод walk() класса Person. Это можно сделать по наследству.

Чтобы добиться такого поведения, мы будем использовать ключевое слово extends.

// rewriting class definition
class Teacher extends Person{  
  constructor(name, subject){
     super(name);
     this.subject = subject;
  }
  teach(){
    console.log(`${this.name} teaches ${this.subject}`)      
  } 
}
const teacher1 = new Teacher('Han', 'Maths');
teacher1.teach() // Han teaches Maths
teacher1.walk() // Han walks

Класс Teacher может расширять метод walk() класса Person, а также использовать свойство name, вызывая super() в функции конструктора класса учителя.

Модули

В идеале приложение React состоит из множества компонентов. Каждый компонент записан в свой собственный файл, который мы можем назвать модулем. Внутри каждого модуля классы или объекты, которые мы определяем, по умолчанию являются закрытыми. Чтобы сделать их общедоступными и доступными для других модулей, нам нужно export класс или объект, определенный внутри модуля. Экспортированный класс / объект можно затем использовать в любом другом компоненте, импортировав его с помощью ключевого слова import.

// Person class in Person.js file
export class Person{
  constructor(name){         
    this.name = name;
  }     
  walk(){
    console.log(`${this.name} walks`)      
  } 
}
-------------------------------------------------
// Teacher class in Teacher.js file
import {Person} from './Person'
class Teacher extends Person{  
  constructor(name, subject){
     super(name);
     this.subject = subject;
  }
  teach(){
    console.log(`${this.name} teaches ${this.subject}`)      
  } 
}

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

Вот и все, ребята!

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

Кроме того, вы можете найти больше информации о ES6 здесь:



ES6 - начните писать прямо сегодня!
Зачем нужно изучать ES6? medium.com



Эта статья вдохновлена ​​видео Моша Хамедани о JavaScript для разработчиков React.

Для дальнейшего развития ваших концепций посмотрите это видео.

✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .