ES6 для начинающих с примерами

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

Темы о которых мы будем говорить:

  • Let и Const
  • Стрелочная функция
  • Параметры по умолчанию
  • Цикл for of
  • Объект Map
  • Объекты Set
  • Статические методы
  • Геттеры и сеттеры

Let

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

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

В приведенном выше примере переменная 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; // покажет ошибку. Вы не можете изменить значение 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 фактически ссылается на память, выделенную для массива. Поэтому вы не можете изменить эту переменную, чтобы позже ссылаться на другую ячейку памяти. Всюду по программе он ссылается только на массив.

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

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

// старый
function oldOne() {
console.log("Hello World..!");
}
// новый
var newOne = () => {
console.log("Hello World..!");
}

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

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

  1. var newOne = ()
  2. => {}

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

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

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

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

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

Если вы знакомы с другими языками программирования, такими как 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. Не сработает.

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

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

NotWorkingFunction(20, 30); // 50;

Сработает отлично

Цикл for of

For…of очень похож на for…in с небольшими изменениями.

for…of выполняет итерацию по списку элементов (например, типа Array) и возвращает элементы (а не их индекс) один за другим.

let arr = [2,3,4,1];
for (let value of arr) {
console.log(value);
}
Вывод:
2
3
4
1

Обратите внимание, что переменная ‘value’ выводит каждый элемент в массиве, а не индекс. Другой пример:

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

Да. Это работает и для строк

Объект Map

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

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

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

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

var map = new Map();
map.set('name', 'Vania');
map.set('name', 'Misha');
map.set(1, 'число один');
map.set(NaN, 'Нет значения');
map.get('name'); // Misha. Примечание. Misha заменил Vania.
map.get(1); // число один
map.get(NaN); // Нет значения

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

var map = new Map();
map.set('name', 'John');
map.set('id', 10);
map.size; // 2. Возвращает размер map.
map.keys(); // выводит только ключи.
map.values(); // выводит только значения.
for (let key of map.keys()) {
console.log(key);
}
Вывод:
name
id

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

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

var map = new Map();
for (let element of map) {
console.log(element);
}
Вывод:
['name', 'Vania']
['id', 10]

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

var map = new Map();
for (let [key, value] of map) {
console.log(key+" - "+value);
}
Вывод:
name - Vania
id - 10

Объекты Set

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

var sets = new Set();
sets.add('a');
sets.add('b');
sets.add('a'); // Мы добавляем повторяющееся значение.
for (let element of sets) {
console.log(element);
}
Вывод:
a
b

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

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

Другие методы:

var sets = New Set([1,5,6,8,9]);
sets.size; // вернет 5
sets.has(1); // вернет true.
sets.has(10); // вернет false.

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

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

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

class Example {
static Callme() {
console.log("Статический метод");
}
}
Example.Callme();
Вывод:
Статический метод

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

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

Геттеры и сеттеры

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());
Вывод:
Jon Snow
Dany

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

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 вызывается без скобок, и это точно так же, как присвоение значения переменной.

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