New javascript features overview. Part two
In last lesson we began considering new modern javascript features.Today we’ll consider another of it.
Today we will talk about async/await – the new way to work with promises; new javascript data structure – Map and Set and also “syntax sugar” – classes.
Code lesson
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
'use strict';
// (1) var, let, const
var a = 5;
const b = 3;
// b = b + 3;
console.log(b);
function addNum(x) {
let b = a;
console.log(this); // не в строгом режиме - контект вызова
return b = b + x;
}
console.log(addNum(5));
console.log(a);
// (2) - стрелочные функции
function summa(a,b) {
console.log(this);
return a+b;
}
let sum = (a,b) => {
console.log(this);
return a+b
};
console.log(sum(5,11));
console.log(summa(5,11));
var man = {
name: 'Камиль',
sayHello: function() {
console.log(this);
return function() {
console.log(this);
console.log(this.name + ' привет')
}
},
sayBye: function() {
console.log(this);
return () => {
console.log(this);
console.log(this.name + ' пока');
}
}
}
// var hiKam = man.sayHello();
// hiKam();
var byeKam = man.sayBye();
byeKam();
// (3) - шаблонные литералы
let name = 'Камиль';
let surname = 'Абзалов';
console.log(name + " " + surname);
console.log(`${name} ${surname}`);
// (4) деструктулизация
const arr = [1,2,3,4,5];
const [ ,second, , ,fifth] = arr;
console.log(second, fifth);
let age = 29;
let nextAge = 30;
[age, nextAge] = [nextAge, age];
console.log(age);
console.log(nextAge);
// (4) - for...of
const secondArr = [1,2,3,4,5];
for(const num of secondArr) {
console.log(num);
}
// (5) - параметры по умолчанию
const printName = (name = 'Камиль') => console.log(name);
printName();
printName('Иван');
// (6) - rest
const printData = (name, ...data) => {
console.log(name);
console.log(data);
}
printData('Камиль', 29, 'Москва');
console.log(arr.concat(secondArr));
console.log([...arr, ...secondArr]);
// (7) - промисы
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve(), 3000);
setTimeout(() => reject(), 2000);
});
console.log(promise);
promise.then(
resolve => console.log(1),
reject => console.log(2)
);
// promise.catch(
// () => console.log('error')
// );
// promise.finally(
// () => console.log('finally')
// )
let remoteDate = fetch('http://jsonplaceholder.typicode.com/users')
.then(response => {return response.json()})
.then(text => console.log(text))
// (8) - async/await
async function kamil() {
let promise = new Promise((resolve) => {
setTimeout(() => resolve("готово!"), 3000)
})
let result = await promise;
// console.log(result);
return 'Камиль Абзалов';
}
kamil().then((res) => console.log(res));
let setter = new Set();
console.log(setter);
setter.add('к');
setter.add('к');
setter.add('а');
console.log(setter);
let mapper = new Map();
mapper.set(1, 'Камиль');
console.log(mapper);
mapper.set(1, 'Иван');
console.log(mapper);
mapper.set(2, 'Петр');
console.log(mapper);
console.log(mapper.get(1));
</script>
</body>
</html>Code lesson
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
'use strict'
class Programmer {
name = 'Камиль';
lang = 'javascript';
constructor(age) {
this.age = age;
}
sayHi() {
console.log(`${this.name}, привет`);
}
}
let kam = new Programmer(29);
console.log(kam.name);
kam.sayHi();
console.log(kam.age);
class Kamil extends Programmer {
constructor(name) {
super(); // обязательно для потомков
this.name = name;
}
sayHi() {
super.sayHi();
console.log('Ну привет');
}
}
let kamil = new Kamil('Кам');
kamil.sayHi();
console.log(kamil.name);
</script>
</body>
</html>
0 Comments