New javascript features overview. Part two

Home » Tutorials » JavaScript » 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

Submit a Comment

Your email address will not be published. Required fields are marked *

Подписаться на рассылку

Будьте в курсе - получайте последние статьи на свой email

Ваша подписка успешно оформлена

Pin It on Pinterest

Share This