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

В этом посте я расскажу о некоторых новых функциях в ES6. Это будет полезно, если вы новичок в ES6 или изучаете front-end frameworks.

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

1. Let и Const.
2. Стрелочные функции.
3. Параметры по умолчанию.
4. Цикл for.
5. Spread атрибуты - Spread attributes.
6. Maps.
7. Sets.
8. Статические методы.
9. Геттеры и Сеттеры - Getters and Setters.

Let

Let аналогичен var, но let имеет область видимости. let доступен только на уровне блока, где он определен.

if (true) {
 let a = 40;
 console.log(a); //40
}
console.log(a); //

В приведенном выше примере переменная 'a' определяется внутри оператора If и поэтому недоступна вне функции.

Другой пример:

let a = 50;
let b = 100;
if (true) {
 let a = 60;
 var c = 10;
 console.log(a/c); // 6
 console.log(b/c); // 10
}
console.log(c); // 10
console.log(a); // 50

Const

Константа используется для назначения постоянной переменной переменной. И значение её не может быть изменено. Это фиксированная переменная.

const a = 50;
a = 60; // shows error. You cannot change the value of const.
const b = "Constant variable";
b = "Assigning new value"; // покажет ошибку.

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

const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
LANGUAGES = "Javascript"; // покажет ошибку
LANGUAGES.push('Java'); // сработает.
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']

Это может казатся немного запутанным.

Рассмотрим это таким образом. Всякий раз, когда вы определяете константную (постоянную) переменную, Javascript ссылается на адрес значения переменной. В нашем примере переменная 'LANGUAGES' фактически ссылается на память, выделенную для массива. Поэтому вы не можете изменить эту переменную, чтобы позже ссылаться на другую ячейку памяти. Всюду по программе она ссылается только на массив.

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

Функции в ES6 немного изменились. Я имею в виду синтаксис.

// Old Syntax
function oldOne() {
 console.log("Hello World..!");
}
// New Syntax
var newOne = () => {
 console.log("Hello World..!");
}

Новый синтаксис может немного запутать. Но я попытаюсь объяснить синтаксис.

Есть две части синтаксиса.

Первая часть просто объявляет переменную и присваивает ей функцию (). Она просто говорит, что переменная на самом деле является функцией.

Затем вторая часть объявляет часть тела функции. Часть стрелки с фигурными скобками определяет часть тела.

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

let NewOneWithParameters = (a, b) => {
 console.log(a+b); // 30
}
NewOneWithParameters(10, 20);

Я не думаю, что мне нужно давать объяснение этому. Это просто.

Более подробно об этих функциях я рассказываю в посте ES6: Стрелочные функции (XI).

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

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

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

Пример:

let Func = (a, b = 10) => {
 return a + b; 
}
Func(20); // 20 + 10 = 30

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

Рассмотрим другой пример:

Func(20, 50); // 20 + 50 = 70

В приведенном выше примере функция принимает два параметра, а второй параметр заменяет параметр по умолчанию.

Рассмотрим другой пример:

let NotWorkingFunction = (a = 10, b) => {
 return a + b;
}
NotWorkingFunction(20); // NAN. Not gonna work.

Когда вы вызываете функцию с параметрами, они назначаются в порядке. Первое значение присваивается первому параметру, а второе значение присваивается второму параметру и т. д.

В приведенном выше примере значение 20 присваивается параметру «a», а «b» не имеет значения. Таким образом, мы не получаем никакой информации.

Но,

NotWorkingFunction(20, 30); // 50;

Работает отлично.

Цикл for - For of loop

Цикл for очень похож на цикл for in в легкой модификации. Цикл for проходит через список элементов (например, типа Array) и возвращает элементы (а не их индекс) один за другим.

let arr = [2,3,4,1];
for (let value of arr) {
 console.log(value);
}
Output:
2
3
4
1

Обратите внимание, что переменная 'value' выводит каждый элемент в массиве, а не индекс.

Другой пример

let string = "Javascript";
for (let char of string) {
 console.log(char);
}
Output:
J
a
v
a
s
c
r
i
p
t

Да. Он также работает для строки.

Spread атрибуты - Spread attributes

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

Пример без атрибутов распространения - Spread attributes:

let SumElements = (arr) => {
 console.log(arr); // [10, 20, 40, 60, 90]
let sum = 0;
 for (let element of arr) {
 sum += element;
 }
 console.log(sum); // 220. 
}
SumElements([10, 20, 40, 60, 90]);

Вышеприведенный пример прост. Мы объявляем функцию принимающую массив как параметр и возвращать его сумму. Это просто.

Теперь рассмотрим тот же пример с атрибутами распространения

let SumElements = (...arr) => {
 console.log(arr); // [10, 20, 40, 60, 90]
let sum = 0;
 for (let element of arr) {
 sum += element;
 }
 console.log(sum); // 220. 
}
SumElements(10, 20, 40, 60, 90); // Note we are not passing array here. Instead we are passing the elements as arguments.

В приведенном выше примере атрибут spread преобразует список элементов (например, параметры) в массив.

Другой пример:

Math.max(10, 20, 60, 100, 50, 200); // returns 200.

Math.max - простой метод, который возвращает максимальный элемент из данного списка. Он не принимает массив.

let arr = [10, 20, 60];
Math.max(arr); // Shows error. Doesn't accept an array.

Так что давайте использовать нашего спасителя.

let arr = [10, 20, 60];
Math.max(...arr); // 60

В приведенном выше примере атрибут spread преобразует массив в список элементов.

Maps

Map содержит пары ключ-значение. Он похож на массив, но мы можем определить наш собственный индекс. И индексы уникальны в map.

Пример:

var NewMap = new Map();
NewMap.set('name', 'John'); 
NewMap.set('id', 2345796);
NewMap.set('interest', ['js', 'ruby', 'python']);
NewMap.get('name'); // John
NewMap.get('id'); // 2345796
NewMap.get('interest'); // ['js', 'ruby', 'python']

Я думаю, что приведенный выше пример является самоочевидным.

Другие интересные особенности map - все его индексы уникальны. И мы можем использовать любое значение в качестве ключа или значения.

Пример:

var map = new Map();
map.set('name', 'John');
map.set('name', 'Andy');
map.set(1, 'number one');
map.set(NaN, 'No value');
map.get('name'); // Andy. Note John is replaced by Andy.
map.get(1); // number one
map.get(NaN); // No value

Другие полезные методы, используемые в Map:

var map = new Map();
map.set('name', 'John');
map.set('id', 10);
map.size; // 2. Returns the size of the map.
map.keys(); // outputs only the keys. 
map.values(); // outputs only the values.
for (let key of map.keys()) {
 console.log(key);
}
Output:
name
id

В приведенном выше примере map.keys () возвращает ключи map, но возвращает его в объекте Iterator. Это означает, что он не может отображаться так, как есть. Он должен отображаться только путем итерации.

Другой пример:

var map = new Map();
for (let element of map) {
 console.log(element);
}
Output:
['name', 'John']
['id', 10]

Вышеприведенный пример является самоочевидным. Цикл for..of выводит пару ключ-значение в массиве.

Мы можем немного его оптимизировать.

var map = new Map();
for (let [key, value] of map) {
 console.log(key+" - "+value);
}
Output:
name - John
id - 10

Наборы - Sets.

Наборы используются для хранения уникальных значений любого типа. Просто..!

Пример:

var sets = new Set();
sets.add('a');
sets.add('b');
sets.add('a'); // We are adding duplicate value.
for (let element of sets) {
 console.log(element);
}
Output:
a
b

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

А также обратите внимание, что наборы являются итерируемыми объектами. Нам нужно перебирать элементы для отображения.

Другие полезные методы:

var sets = New Set([1,5,6,8,9]);
sets.size; // returns 5. Size of the set.
sets.has(1); // returns true. 
sets.has(10); // returns false.

В приведенном выше примере размер не требует пояснений. Существует еще один метод has, который возвращает логическое значение, основанное на том, присутствует ли данный элемент в наборе или нет.

Статические методы - Static methods

Большинство из вас уже слышали о статических методах. Статические методы вводятся в ES6. И это довольно легко определить и использовать.

Пример:

class Example {
 static Callme() {
 console.log("Static method");
 }
}
Example.Callme();
Output:
Static method

Обратите внимание, что я не использовал ключевое слово function внутри класса.

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

Геттеры и сеттеры - Getters and Setters

Getters и seters и одна из полезных функций, введенных в ES6. Это пригодится, если вы используете классы в JS.

Пример без геттеров и сеттеров:

class People {
constructor(name) {
 this.name = name;
 }
 getName() {
 return this.name;
 }
 setName(name) {
 this.name = name;
 }
}
let person = new People("Jon Snow");
console.log(person.getName());
person.setName("Dany");
console.log(person.getName());
Output:
Jon Snow
Dany

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

Пример с геттерами и сеттерами

class People {
constructor(name) {
 this.name = name;
 }
 get Name() {
 return this.name;
 }
 set Name(name) {
 this.name = name;
 }
}
let person = new People("Jon Snow");
console.log(person.Name);
person.Name = "Dany";
console.log(person.Name);

В приведенном выше примере вы можете увидеть, что внутри класса People есть две функции «get» и «set». Свойство «get» используется для получения значения переменной, а свойство «set» используется для установки значения переменной.

И вы можете видеть, что функция getName вызывается без скобок. И функция setName вызывается без скобок, и это точно так же, как присвоение значения переменной.

Спасибо за ваше время. Надеюсь, вам понравилась статья. :) :) promises and async/await

Надеюсь тебе понравилось. Я рассмотрю гораздо более интересные темы, такие как promises and async/await и т. д. В следующей части.

---

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