ES6 для начинающих (3).

Часть 1 статьи можно прочитать здесь.

Часть 2 статьи.

Темы, которые я расскажу в этой статье:

1. Array map
2. Array filter
3. Array reduce
4. Template literals
5. Imports and exports
6. Destructuring objects and arrays
7. Extend and super

Array Map

Оператор Map используется для выполнения конкретной операции над всеми элементами массива и возвращает массив с модифицированными элементами.

Это очень легко реализовать. Давайте посмотрим пример.

let arr = [1,2,3,4,5];
let modifiedArr = arr.map(function(element, index, arr) {
  return element * 10;
});
console.log(modifiedArr);
Output:
[10, 20, 30, 40, 50]

Как видите, map принимает функцию с тремя параметрами.

1. Первый параметр - это сам элемент.
2. Второй параметр - это индекс элемента.
3. Третий параметр - это весь массив.

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

Еще одна вещь, которую я хотел бы добавить, - второй и третий параметр, является необязательным. Обязателен только первый параметр.

let modifiedArr = arr.map(function(element) {
  return element * 10;
});

Как вы видите, map принимает функцию с одним параметром.

Хорошо. Давайте попробуем написать map со стрелочными функциями.

let modifiedArr = arr.map((element, index) => {
  console.log("index "+index);
  return element * 10;
});
console.log(modifiedArr);
Output:
index 0
index 1
index 2
index 3
index 4
[10, 20, 30, 40, 50]

Думаю, мне не нужно много объяснять. Это просто.

Последний пример.

let modifiedArr = arr.map(element => element * 10);
console.log(modifiedArr);

Если вы знаете, стрелочные функции хорошо, это легко понять. Но если нет, то я попытаюсь объяснить.

Здесь есть две вещи.

1. Если у вас есть функция с единственным параметром, вам не нужны круглые скобки - (). В нашем случае элементом является параметром.
2. И если у вас есть единственная строка как тело функции, вам не нужны фигурные скобки - {}, а также JS будет неявно возвращать значение после выполнения функции. Вам не нужно использовать ключевое слово return.

Array Filter

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

Давайте посмотрим пример.

let arr = [1, 2, 3, 4, 5, 6]
let modifiedArr = arr.filter(function(element, index, array) {
  return element % 2 == 0
});
console.log(modifiedArr);
Output:
[2, 4, 6]

Как видно из приведенного выше примера, filter, подобно map, принимает три параметра.

И мы должны вернуть логическое значение для каждого элемента массива. Если вы не вернете какое-либо логическое значение в конце, тогда фильтр примет его как false и удалит элемент.

Хорошо .. Давайте попробуем это в стрелочной функции.

let modifiedAarr = arr.filter((element, index) => element%2 == 0)

Надеюсь, вы поняли. И не забывайте об этом, только первый параметр является обязательным. Другие два параметра являются необязательными.

Array Reduce

Array Reduce используется для агрегирования всех элементов массива и возврата одного значения. Давайте посмотрим пример

let arr = [1,2,3,4,5,6]
let total= arr.reduce(function(sum, element, index, array) {
  return sum + element;
},0);
console.log("total is "+total);
Output:
total is 21

В отличие от filter и map, сокращение принимает функцию с четырьмя параметрами, а также дополнительный элемент. В нашем случае это 0.

Давайте посмотрим, как это работает.

Первый параметр - это элемент агрегатора. Он имеет сумму элементов в любой заданной точке. И это начальное значение определяется как дополнительный элемент. В нашем случае это 0.

Затем второй, третий и четвертый параметры такие же, как у filter и map.

Как и в функциях filter и map, вы должны вернуть конечный результат.

Давайте посмотрим другой пример.

let arr = [1,2,3,4,5,6];
let totalSum = arr.reduce(function(sum, element, index, array) {
  console.log(sum+"+"+element+"="+sum+element);
  return sum + element;
}, 10);
console.log("Total sum is "+ totalSum);
Output:
10 + 1 = 11
11 + 2 = 13
13 + 3 = 16
16 + 4 = 20
20 + 5 = 25
25 + 6 = 31
Total sum is 31

Надеюсь, это понятный пример. Обратите внимание, что я сначала установил начальное значение суммы sum, элемента агрегатора на 10.

Давайте напишем тот же код со стрелочными функциями.

let totalSum = arr.reduce((sum, element) => element+sum, 0)

Надеюсь, вы поняли. Это легко.

В отличие от filter и map, первые два параметра являются обязательными. Другие два являются необязательными.

Template Literals

Если вы знаете другие языки программирования, такие как ruby, python, то Template Literals для вас не новы.

Это новый синтаксис, который упрощает добавление выражений.

Template Literals используются для выполнения любых выражений JS.

Давайте посмотрим пример

let name = "Jon Snow";
let msg = `My name is ${name}`;
console.log(msg);
Output:
My name is Jon Snow

всё очень просто.

Вы также можете использовать многострочные строки- multi-line strings.

let msg = `My name
is ${name}`;
console.log(msg);
Output:
My name
is Jon Snow

Давайте посмотрим другой пример

let name = "Srebalaji";
let languages = () => {return "Ruby, Js, Java, Python"}
let msg = `My name is ${name}
My age is ${20+3}
And I code in ${languages()}`
Output:
My name is Srebalaji
My age is 23
And I code in Ruby, Js, Java, Python

Надеюсь, вы поняли. Идем дальше. Вы можете добавить любое выражение легко, а также многострочные строки (multi-line strings).

Imports and Exports

Импорт и экспорт модулей в ES6 - одна из полезных функций, которые вы увидите в современных библиотеках интерфейсов.

Я очень рекомендую поиграть с этой функцией в этом Plunk. Окружающая среда уже настроена в этом Plunk.

Хорошо .. Так импорт и экспорт работают в ES6.

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

Импорт используется для импорта переменных, функций, классов из других модулей.

Если вы не устали. то давайте посмотрим пример.

app.js
export let name = "Jon"
export let age = 23
index.js
import {name, age} from './app'
console.log(name);
console.log(age);
index.html

Output:
Jon
23

В приведенном выше примере мы определили две переменные name и age переменных и экспортировали их.

В другом файле мы импортировали переменные и получили доступ к их значениям.

Это очень просто.

Пойдем глубже.

app.js
export default const name = "Jon"
index.js
import name from './app.js'
console.log(name);
Output:
Jon

В приведенном выше коде вы видите, что мы использовали новое ключевое слово default - по умолчанию. Значения по умолчанию в основном используются, если вам нужно экспортировать одно значение, функцию или объект из модуля. И в модуле может быть только одно значение по умолчанию - default value.

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

Пример:

import n from './app.js'
console.log(n);
Output:
Jon

Как вы можете видеть, мы указали значение по умолчанию - n здесь.

Пойдем глубже.

app.js
let a = 10;
let b = 2;
let sum = () => a+b;
export {a,b}
export default sum
index.js
import * as variables from './app'
import addition from './app' // default value
console.log(variables.a);
console.log(variables.b);
console.log(addition());
Output:
10
2
12

В приведенном выше примере вы можете видеть, что мы экспортировали две переменные и функцию. И мы импортировали все переменные, используя *.

При импорте есть две вещи.

1. Если вы используете * для импорта значений, вы должны использовать псевдонимы - alias, которые будут ссылаться на импортированные значения. В нашем примере мы использовали переменные - variables как псевдоним.
2. Использование * для импорта значений не импортирует значение по умолчанию. Вы должны импортировать их отдельно.

import addition, * as variables from './app'

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

Надеюсь, вы поняли. :)

Destructuring objects and arrays

Деструктуризация является одной из полезных функций в ES6. И это очень просто использовать.

Приведем пример.

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName, lastName, age} = person
console.log(firstName);
console.log(lastName);
console.log(age);
Output:
Jon
Snow
23

В приведенном выше коде вы можете видеть, что у нас есть объект person с несколькими ключами.

И мы создали три переменные firstName, lastName, age (то же самое, что и ключи объектов.) из самого объекта.

Чтобы выразить это простыми словами, мы создали три переменные извлечением ключей из объекта.

Давайте посмотрим другой пример

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName} = person
console.log(firstName);
Output:
Jon

В приведенном выше примере вы можете видеть, что мы извлекли из объекта только требуемые значения.

let person = {firstName: "Jon", lastName: "Snow", age: 23}
const {firstName: name, age} = person
console.log(name);
console.log(age);
Output:
Jon
23

В приведенном выше примере вы можете видеть, что мы определили новое имя переменной и присвоили значение firstName.

Надеюсь, вы поняли. Это просто.

Давайте посмотрим, как деструктурировать массив - destructure array.

let arr [1, 2, 3, 4]
const [a, b, c, d] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
Output:
1
2
3
4

Надеюсь, вы уловили это из кода выше. Это просто.

Мы присваиваем каждому элементу массива переменную.

Давайте посмотрим другой пример.

let arr = [1,2,3,4,5,6]
let [a,b,,d,e] = arr
console.log(a);
console.log(b);
console.log(d);
console.log(e);
Output:
1
2
4
5

В приведенном выше коде вы можете видеть, что мы пропустили третий элемент массива. Помимо этого все так же, как в предыдущем примере.

Давайте посмотрим другой пример.

let person = {firstName: "Jon", lastName: "Snow", age: 23}
let displayName = ({firstName, lastName:last}) => {
  console.log(`${firstName} - ${last}`);
}
displayName(person);
Output:
Jon - Snow

Надеюсь, вы поняли. идем дальше.

Extend and Super

Если у вас есть опыт кодирования в OОП (объектно-ориентированном программировании), то >Extend - расширение и Super - супер не новы для вас.

Extend используется для создания подкласса из основного класса. Подкласс наследует все свойства основного класса и также может изменять свойства основного класса.

class Person{
 constructor(firstName, lastName, age) {
   this.firstName = firstName;
   this.lastName = lastName;
   this.age = age;
 }
 displayName() {
  return `${this.firstName} - ${this.lastName}`;
 }
}
class Employee extends Person {
 constructor(firstName, lastName, age, salary) {
  super(firstName, lastName, age);
  this.salary = salary;
 }
 displaySalary() {
  return `${this.salary}`;
 }
 displayName() {
  return super.displayName();
 }
 displayAge() {
  return this.age;
 }
}
let manager = new Employee("Jon", "Snow", 23, 100);
console.log(manager.displaySalary());
console.log(manager.displayName());
console.log(manager.displayAge());
Output:
100
Jon Snow
23

В приведенном выше коде вы можете видеть, что мы определили класс Person с конструктором и простой метод.

И тогда мы определили еще один класс Employee, который является подклассом, унаследованным от Person. Для этого мы использовали расширения - Extend. Надеюсь, что это ясно.

И затем мы использовали ключевое слово super, чтобы вызвать конструктор родительского класса. И мы также вызвали метод, объявленный в родительском классе, используя super.

Примечание: вы можете использовать this в подклассе только после вызова super. Если вы используете this перед вызовом super в подклассе, вы получите RefrenceError.

Итак, мы достигли трех вещей в приведенном выше коде

1. Мы использовали расширения Extend для создания подкласса из родительского класса.
2. Мы использовали super для вызова конструктора родительского класса.
3. Мы использовали super для вызова метода, определенного в родительском классе.

Надеюсь, у вас это получилось :)

Здесь можно немного поиграть и потренировать свои знания


Часть 1 статьи здесь.

Часть 2 статьи здесь.

---

Автор: Srebalaji Thirumalai.
Перевод: Kolesnikov Yaroslav