Обзор новых возможностей JavaScript. Часть 1

Главная » Видеоуроки » JavaScript » Обзор новых возможностей JavaScript. Часть 1
JavaScript — это расширение языка ECMAScript. Одно из самых больших и важных для разработчиков обновлений — ECMASript 2015 (ECMASript 6). Сегодня мы рассмотрим некоторые из новых возможностей ECMAScript.
В этом уроке мы рассмотрим следующие возможности современного JavaScript:

  • переменные (новые ключевые слова let и const)
  • стрелочные функции, контекст вызова функций
  • шаблонные переменные (упрощение конкатенации строк)
  • деструктурализация
  • параметры функции (параметры по умолчанию, rest параметры)
  • промисы
Код урока
<!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("done!"), 1000);
            setTimeout(() => reject("error!"), 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))
   
    </script>
</body>
</html>

0 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

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

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

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

Pin It on Pinterest

Share This