Знакомство с ES6. Урок 21

ES6
let&const
Деструктуризация (массивов и объектов)
…Spread-оператор
Стрелочные функции
Шаблонные строки

Метод includes
Проверяет, включает ли одна строка str в себя другую строку searchString, возвращает true/false
let str = 'To be, or not to be, that is the question.';
console.log(str.includes('To be')); //true
console.log(str.includes('question')); //true
console.log(str.includes('nonexistent')); //false
console.log(str.includes('To be', 1)); //false
console.log(str.includes('TO BE')); //false

Метод endsWith
Возвращает true, если строка str заканчивается подстрокой searchString
let str = 'To be, or not to be, that is the question.';
console.log(str.endsWith('question.'));//true
console.log(str.endsWith('to be')); //false
console.log(str.endsWith('to be', 19));//true

Метод startsWith
Возвращает true, если строка str начинается со строки searchString
let str = 'To be, or not to be, that is the question.';
console.log(str.startsWith('To be')); //true
console.log(str.startsWith('not to be')); //false
console.log(str.startsWith('not to be', 10));//true

Метод repeat
Повторяет строку str count раз
'abc'.repeat(-1); //RangeError
'abc'.repeat(0); //''
'abc'.repeat(1); //'abc'
'abc'.repeat(2); //'abcabc'
'abc'.repeat(3.5); //'abcabcabc' (count will be converted to integer)
'abc'.repeat(1/0); //RangeError

Объекты и прототипы

Короткое свойство
При объявлении свойства объекта достаточно указать только его имя, а значение будет взято из переменной с аналогичным именем
let name = "Вася";
let isAdmin = true;
let user = {
name,
isAdmin
};
console.log(JSON.stringify(user));//{"name": "Вася", "isAdmin": true}

Вычисляемые свойства
let propName = "firstName";
let user = {
[propName]: "Вася"
};
console.log(user.firstName);//Вася

Вычисляемые свойства
let a = "Зелёный ";
let b = "Крокодил";
let user = { [(a + b).toLowerCase()]: "Петя"
};
console.log( user["зелёный крокодил"] );//Петя

Метод setPrototypeOf
Метод устанавливает прототип (внутреннее свойство [[Prototype]]) указанного объекта в другой объект или null
let dict = Object.setPrototypeOf({}, null);
let person = {
name: 'unknown'
};
let student = {
group: 1
};
let p1 = Object.setPrototypeOf(student, person);
console.log(p1.group);//1
console.log(p1.name);//unknown

Object.assign
Метод используется для копирования значений всех собственных перечисляемых свойств из одного или более объектов в целевой объект
Object.assign(target, src1, src2...)
let o1 = { a: 1 };
let o2 = { b: 2 };
let o3 = { c: 3 };
let obj = Object.assign(o1, o2, o3);
console.log(obj);//{ a: 1, b: 2, c: 3 }
console.log(o1); //{ a: 1, b: 2, c: 3 }
//изменился и целевой объект

Object.is
Метод определяет, являются ли два значения одинаковыми
Iet sSame = Object.is(value1, value2);
Object.is('foo', 'foo'); //true
Object.is(window, window); //true
Object.is('foo', 'bar'); //false
Object.is([], []); //false
let test = { a: 1 };
Object.is(test, test); //true
Object.is(null, null); //true
//Специальные случаи
Object.is(0, -0); //false
Object.is(-0, -0); //true
Object.is(NaN, 0/0); //true
Object.is(NaN, NaN); //true

Объявление метода
Более короткий и удобный синтаксис
let name = "Вася";
let user = { name,
//something: function()
//{
//console.log(this.name);
//}
something() {
console.log(this.name);
}
};
user.something();//Вася

Классы

Объявление класса
class Название [extends Родитель] {
constructor
методы
}

Объявление класса
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}

Выражение класса
//безымянный
var Polygon = class {
constructor(height, width) {
this.height = height; this.width = width;
}
};
//именованный
var Polygon = class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
};

Создание объекта и прототип
Constructor запускается при создании new Object, остальные методы записываются в Object.prototype
class User {
constructor(name) {
this.name = name;
}
sayHi() { console.log(this.name);}
}
let user = new User("Вася");

Создание объекта и прототип
function User(name) {
this.name = name;
}
User.prototype.sayHi = function() { console.log(this.name);
};

Всплытие (hoisting)
Разница между объявлением функции (function declaration) и объявлением класса (class declaration) в том, что объявление функции совершает подъём (hoisted), в то время как объявление класса — нет
var p = new Polygon();
class Polygon {}
//Uncaught ReferenceError: Polygon is not defined

Статические методы
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
static distance(a, b) {
const dx = a.x - b.x;
const dy = a.y - b.y;
return Math.sqrt(dx*dx + dy*dy);
}
}
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
console.log(Point.distance(p1, p2));//7.07....

Геттеры, сеттеры
class User {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
set fullName(newValue) {
[this.firstName, this.lastName] = newValue.split(' ');
}
};
let user = new User('Maksim', 'Hladki');
console.log(user.fullName);//Maksim Hladki
user.fullName = "Ivan Ivanov";
console.log(user.fullName);//Ivan Ivanov

Пример
class Rectangle {
constructor (width, height) {
this._width = width
this._height = height
}
set width (width) { this._width = width}
get width () { return this._width}
set height (height) { this._height = height}
get height () { return this._height}
get area () { return this._width * this._height }
}
let test = new Rectangle(50, 20);
console.log(test.area);//1000

Вычисляемые имена методов
class Foo() {
myMethod() {}
}
class Foo() {
['my'+'Method']() {}
}
const m = 'myMethod';
class Foo() {
[m]() {}
}

Наследование
//Только один конструктор, прототип, базовый класс!
class Child extends Parent {
//TODO logic
}

Пример
class Point {
constructor(x, y) {
this.x = x; this.y = y; }
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
class ColorPoint extends Point {
constructor(color) {
super(0, 0);
this.color = color;
}
toString() {
return super.toString() + ' in ' + this.color;
}
}
let cPoint = new ColorPoint('red');
console.log(cPoint.toString());//(0, 0) in red

Наследование статических методов
class Foo {
static classMethod() {
return 'hello';
}
}
class Bar extends Foo {
//TODO
}
console.log(Bar.classMethod());//hello

Super
//Используется для вызова функций, принадлежащих
//родителю объекта
super([arguments]);//вызов родительского конструктора
super.functionOnParent([arguments]);

Пример: вызов конструктора
class Polygon {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
class Square extends Polygon {
constructor(length) {
super(length, length);
}
get area() {
return this.height * this.width;
}
}

Вызов метода
class Foo {
static classMethod() {
return 'hello';
}
}
class Bar extends Foo {
static classMethod() {
return super.classMethod() + ', too';
}
}
Bar.classMethod();//hello, too

Mixins

Mixins
// Абстрактные подклассы (mix-ins) — это шаблоны для классов.
//У класса может быть только один родительский класс, поэтому
// множественное наследование невозможно.
//Функциональность должен предоставлять родительский класс
class B extends A, M {}// Uncaught SyntaxError: Unexpected token ,
// множественного наследования нет
const mixin = base => class extends base {
/* свойства и методы */
}

Пример
class Person { ··· }
const Storage = Sup => class extends Sup {
save(database) { ··· }
};
const Validation = Sup => class extends Sup {
validate(schema) { ··· }
};
class Employee extends Storage(Validation(Person)) { ··· }

Пример
let MyMixin = (superclass) => class extends superclass {
test() { console.log('test from MyMixin');
}
};
class MyClass extends MyMixin(MyBaseClass) {
/* ... */
}
let c = new MyClass();
c.test();//test from MyMixin

Symbol

Тип данных Symbol
Уникальный и неизменяемый тип данных, который может быть использован как идентификатор для свойств объектов
Символьный объект — это объект-обертка для примитивного символьного типа
let sym = Symbol("foo");
console.log(typeof sym);//symbol
let symObj= Object(sym);
console.log(typeof symObj);//object
console.log(Symbol("name") == Symbol("name"));//false

Тип данных Symbol
let isAdmin = Symbol("isAdmin");
let user = {
name: "Вася",
[isAdmin]: true
};
console.log(user[isAdmin]);//true

Тип данных Symbol
Свойство, объявленное через символ, не будет видно в for-in, Object.keys, Object.getOwnPropertyNames, также не будет добавлено при использовании JSON.stringify

Тип данных Symbol
let user = {
name: "Вася",
age: 30,
[Symbol.for("isAdmin")]: true
};
//в цикле for..in не будет символа
console.log(Object.keys(user));//["name", "age"]
//доступ к свойству через глобальный символ — работает
console.log(user[Symbol.for("isAdmin")]);//true

Глобальные символы
Глобальный реестр символов позволяет иметь общие глобальные символы, которые можно получить из реестра по имени. Используется метод for
//создание символа в реестре
let name = Symbol.for("name");
//символ уже есть, чтение из реестра
console.log(Symbol.for("name") == name);//true