ES 6

In this example below you will see how to do a ES 6 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Messier74, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Messier74 ©
  • HTML
  • CSS
  • JavaScript
    <div class="center">
  <h1>Learning<br>ES6<br>Just my personal notes</h1>
</div>

<!-- This is my notebook for ES6,
all examples is taken from https://learn.javascript.ru/
-->

/*Downloaded from https://www.codeseek.co/Messier74/es-6-LyzpEz */
    


/*Downloaded from https://www.codeseek.co/Messier74/es-6-LyzpEz */
    // ФУНКЦИИ ----------------------------------------------------------------------------

/*var count = 0 ;
var counter = function (){
 
  function start(){
   return count++;
  };
 return start();
};

counter();
console.log(count);
counter();
counter();
console.log(count);*/

/*
let obj = {
  size: "big",
  color: "red",
  rigid: false,
  count: [1,2,3,4,5,6]
};

let {size:s, color, rigid, made="by human", count} = obj;
console.log(s);
console.log(color);
console.log(rigid);
console.log(made);
console.log(count);



let nums = [1,4,53,64,34,64,23,44,67];
let max = Math.max(...nums);
console.log(max);

function g(){}
console.log(g.name);

let a = (b,c) => c + b;
console.log(a(2,22));


//принятие остальных аргументов 
function showName(firstName, lastName, ...rest){
  console.log(firstName + ' ' + lastName + ' ' + rest);
}

showName("Юлий", "Цезарь", "император", "Рима");

//функция без аргументов
let getTime = () => new Date().getHours() + ':' + new Date().getMinutes();
console.log(getTime());

//если тело функции большое, то можно обернуть в скобки. НО НУЖНО УКАЗЫВАТЬ Return
let getT = () => {
  let date = new Date();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  return console.log(hours + ":" + minutes);
}
getT();


//Можно отсортировать на месте 
let needSort = [2,7,8,3,5];
let sorted = needSort.sort((a,b) => a - b );
console.log(sorted);

 
// У функций со стрелками нет своего this 
let company = {
  title: "Censored",
  peoples: ["John", "Amanda", "Denis", "Richard", "Nancy"],
  
  showEvery: function (){
    this.peoples.forEach( people => console.log(people + " working at " + this.title + " company"));
  },
  show: function (){
    this.peoples.forEach(function (people){
      console.log (people + " working at " + this.title);  // isn't working :)
    });
  } 
}
company.showEvery();
company.show();


//  СТРОКИ  ---------------------------------------------------------------------------------------
// обратные кавычки, многострочные строки
console.log(`все 
  на 
разных
строках`);


// выражения при помощи ${} , но в обратных кавычках 

let apples = 2;
let oranges = 3;

console.log(`${apples} + ${oranges} = ${apples + oranges}`);


// функции шаблонизации
function f(strings, ...values) {
  console.log(JSON.stringify(strings));     // ["Sum of "," + "," =\n ","!"]
  console.log(JSON.stringify(strings.raw)); // ["Sum of "," + "," =\\n ","!"]
  console.log(JSON.stringify(values));      // [3,5,8]
}

let apples = 3;
let oranges = 5;

//          |  s[0] | v[0] |s[1]| v[1]  |s[2]  |      v[2]      |s[3]
let str = f`Sum of ${apples} +  ${oranges} =\n ${apples + oranges}!`;


// Улучшена поддержка юникода -------------------------------------------------------------------
console.log( '我'.length ); // 1
console.log( '𩷶'.length );
console.log( '𝒳'.length ); // 2, MATHEMATICAL SCRIPT CAPITAL X
console.log( '😂'.length );
console.log( '𝒳'.charCodeAt(0) + ' ' + '𝒳'.charCodeAt(1) ); // 55349 56499

//В тексте выше для первого иероглифа есть отдельный юникод-символ, и поэтому длина строки 1, а для второго используется //суррогатная пара. Соответственно, длина – 2.

В то время как codePointAt возвращает его Unicode-код суррогатной пары правильно:

 // один символ с "длинным" (более 2 байт) unicode-кодом
alert( '𝒳'.codePointAt(0) ); // 119987


// \u{длинный код}

console.log("S\u0307\u0323"); // Ṩ
console.log("S\u0323\u0307"); // Ṩ

console.log( "S\u0307\u0323" == "S\u0323\u0307" ); //false

console.log("S\u0307\u0323".normalize() == "S\u0323\u0307".normalize() ); // true


// Добавлены ряд полезных методов общего назначения:

str.includes(s) – проверяет, включает ли одна строка в себя другую, возвращает true/false.
str.endsWith(s) – возвращает true, если строка str заканчивается подстрокой s.
str.startsWith(s) – возвращает true, если строка str начинается со строки s.
str.repeat(times) – повторяет строку str times раз.


let str = "отличный день";
console.log(str.includes("день")); //true
console.log(str.endsWith("день")); // true
console.log(str.startsWith("день")); // false
console.log(str.repeat(3)); //"отличный деньотличный деньотличный день"


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

// Короткое св-во . При объявлении объекта в этом случае достаточно указать только имя свойства, а значение будет взято из // переменной с аналогичным именем.
let name = "Denis";
let age = 26;

let user = {
  name,
  age
};

console.log(user);


// Вычисляемые св-ва
let anyProp = "firstName";

let user1 = {
  [anyProp] : "Den"
};

console.log(user1);

// Object.assign() копирование всех свойств объектов 
let user = {name: "Вася"};
let visitor = {isAdmin: false, visitor: true};
let admin = {isAdmin: true, access: true};

let superUser = {};
Object.assign(superUser, user, visitor, admin);
console.log(superUser == user); //false



// Object.is (value1 , value2); метод сравнения значений объектов 
console.log(Object.is(NaN, NaN));
console.log(NaN === NaN);

console.log(Object.is(+0, -0));

// Более короткий синтаксис метода объектов
let obj = {
  name: "computer",
  sayHi(){
    alert("Hi I'm a " + this.name);
  }
};
obj.sayHi();


// Getters and Setters 
let name = "Richard", lastName = "Wick";
let user = {
  name,
  lastName,
  get fullName(){
    return `${name} ${lastName}`;
  }
};
console.log(user.fullName);


// Classes -----------------------------------------------------------------------------------------------------

class User{
  constructor(name){
    this.name = name;
  }
  sayHi(){
    alert(this.name);
  }
}

let user = new User("Vasya");
user.sayHi();

// Аналог записи 
function User(name){
  this.name = name;
}

User.prototype.sayHi = function (){
  alert(this.name);
};


// getters and setters 

class User{
  constructor (firstName, lastName){
    this.firstName = firstName;
    this.lastName = lastName;
  }
  get fullName (){
    return `${this.firstName} ${this.lastName}`;
  }
  set fullName(Name){
    [this.firstName, this.lastName] = Name.split(" "); 
  }
}

let user = new User("Вася", "Пупкин");
console.log(user.fullName);
user.fullName = "Иван Краснов";
console.log(user.fullName);



// Inheritance w.super method-------

class Animal{
  constructor(name){
    this.name = name;
  }
  walk(){
    console.log("I'm walking: " + this.name);
  }
}

class Rabbit extends Animal{
  walk(){
    super.walk();
    console.log("and jumping!");
  } 
}

let a = new Rabbit("Rogger");
a.walk();


// Constructor in classes --------

class Animal {
  constructor(name){
    this.name = name;
  }
  
  walk(){
    console.log("I walk " + this.name);
  }
}

class Rabbit extends Animal{
  constructor(){
    // alert(this); ОШИБКА THIS НЕ ОПРЕДЕЛЁН
    super("Кроль");
  }
}

new Rabbit().walk();



// ONE MORE CLASS AND INHERITANCE EXAMPLE

class Task {
  constructor(title){
    this._title = title;
    this._done = false;
    Task.count += 1;
  }
  
  get title (){
    return this.title;
  }
  
  set title(value){
    this._title = value;
  }
  
  complete(){
    this._done = true;
  }
  
  static getDefaultTitle(){
    return "Задача";
  }
  
}

Task.count = 0;

class SubTask extends Task {
  constructor(title, parent){
    super(title);
    this._parent = parent;
  }
}

let task = new Task('Изучить ES6');
let subtask = new SubTask('Изучить ES6, классы и наследование', task);

console.log(task);
console.log(subtask);


// Symbols -------------------------------------------------------------------------------------

let isAdmin = Symbol("admin");

let user = {
  name: "Vasya",
  [isAdmin] : true
};

console.log(user[isAdmin]);

//Особенность символов в том, что если в объект записать свойство-символ, то оно не участвует в итерации

let user = {
  name: "Vasya",
  age: 30,
  [Symbol.for("isAdmin")] : true
};

console.log(Object.keys(user));
console.log(user[Symbol.for("isAdmin")]);

// Чтобы получить все символы объекта, есть особый вызов Object.getOwnPropertySymbols
let obj = {
  iterator: 1,
  [Symbol.iterator]: function() {}
}

// один символ в объекте
console.log( Object.getOwnPropertySymbols(obj)[0].toString() ); // Symbol(Symbol.iterator)

// и одно обычное свойство
console.log( Object.getOwnPropertyNames(obj) ); // iterator


// ITERATORS -------------------------------------------------------

//Итерируемые или, иными словами, «перебираемые» объекты – это те, содержимое которых можно перебрать в цикле.

//Например, перебираемым объектом является массив. Но не только он. В браузере существует множество 
// объектов, которые не являются массивами, но содержимое которых можно перебрать (к примеру, список DOM-узлов).

let arr = [1,2,3];

for (let value of arr){
  console.log(value);
}

for (let char of "Hello"){
  console.log(char);
}


//Например, range – диапазон чисел от from до to, и мы хотим, чтобы for (let num of range) «перебирал» этот 
//объект. При этом под перебором мы подразумеваем перечисление чисел от from до to.
let range = {
  from: 1,
  to: 5
}

range[Symbol.iterator] = function(){
  let current = this.from;
  let last = this.to;
  
  return { 
  next(){
    if (current <= last){
      return {
        done: false,
        value: current++
      };
    } else {
      return {
        done: true
        };
      }
    }
  }
};

for (let num of range){
  console.log(num);
}
-------------------
'use strict';

let str = "Hello";

// Делает то же, что и
// for (var letter of str) alert(letter);

let iterator = str[Symbol.iterator]();

while(true) {
  let result = iterator.next();
  if (result.done) break;
  console.log(result.value); // Выведет все буквы по очереди
}


// Map, Set, WeakSet, WeakMap -----------------------------------------------

let map = new Map();

map.set('1', 'str1');
map.set(1, 'num1');
map.set(true, 'bool1');
map.set(Array, 'arr');

console.log(map.get(Array));


Методы для удаления записей:

map.delete(key) удаляет запись с ключом key, возвращает true, если такая запись была, иначе false.
map.clear() – удаляет все записи, очищает map.
Для проверки существования ключа:

map.has(key) – возвращает true, если ключ есть, иначе false.
Итерация

Для итерации по map используется один из трёх методов:

map.keys() – возвращает итерируемый объект для ключей,
map.values() – возвращает итерируемый объект для значений,
map.entries() – возвращает итерируемый объект для записей [ключ, значение], он используется по умолчанию в for..of.


let reciepeMap = new Map([
  ['огурцов','500 гр'],
  ['помидоров','300 гр'],
  ['сметаны','50 гр']
]);

for (let key of reciepeMap.keys()){
  console.log(key);
}; // ключи

for (let value of reciepeMap.values()){
  console.log(value);
}; // значения

for (let all of reciepeMap.entries()){
  console.log(all);
};  // возвращает ключ : значение
// ---------------------------------------------------


Set

Set – коллекция для хранения множества значений, причём каждое значение может встречаться лишь один раз.

Например, к нам приходят посетители, и мы хотели бы сохранять всех, кто пришёл. При этом повторные визиты не должны приводить к дубликатам, то есть каждого посетителя нужно «посчитать» ровно один раз.

Set для этого отлично подходит:


let set = new Set();

let vasya = {name: "Vasya"};
let petya = {name: "Petya"};
let dasha = {name: "Dasha"};

set.add(vasya);
set.add(petya);
set.add(dasha);
set.add(petya);
set.add(vasya);

console.log(set.size);

set.forEach(user => console.log(user.name));







// PROMISE ------------------------------------------------------------------------------------

// Один из примеров использования промисов
function apllyForVisa(documents){
	console.log("Обработка заявления на визу...");
	let promise = new Promise(function(resolve, reject){
		setTimeout(function(){
			Math.random() > .1 ? resolve({}) : reject("В визе отказано");	
		}, 2000)
	});
	return promise;
}

function getVisa(visa){
	console.info("Виза получена");
	return new Promise(function (resolve, reject){
		setTimeout(() => resolve(visa), 2000);
	});
}

function bookHotel(visa){
	console.log(visa);
	console.log("Бронируем отель");
	return Promise.resolve(visa);
}

function buyTickets(booking){
	console.log("Покупаем билеты");
	console.log("Бронь", booking);
}

apllyForVisa({})
	.then(getVisa)
	.then(bookHotel)
	.then(buyTickets)
	.catch(error => console.error(error));
	
*/

Comments