Изучите ES6+ в этом бесплатном интерактивном курсе из 23 частей

1656629774 izuchite es6 v etom besplatnom interaktivnom kurse iz 23 chastej
1*TsmDHkE8rZ7DQMVnqQqtYw
Нажмите здесь, чтобы перейти к курсу.

JavaScript, несомненно, является одним из самых популярных языков программирования в мире. Он используется почти везде: от масштабных веб-приложений до сложных серверов и мобильных устройств и устройств Интернет вещей.

Мы сотрудничаем с Диланом С. Израэлем — программистом YouTube и выпускником freeCodeCamp — и попросили его создать курс «Введение в ES6» на Scrimba.

Курс содержит 17 уроков и 4 интерактивных задания. Это разработчики JavaScript, которые хотят изучить современные функции JavaScript, представленные в ES6, ES7 и ES8.

Давайте посмотрим на структуру курса:

Часть №1: Введение

1*TsmDHkE8rZ7DQMVnqQqtYw

Во вступительном видео Дилан дает обзор того, как будет выглядеть его курс и каких основных тем он будет затрагивать. Он также рассказывает вам о себе, чтобы вы ознакомились с ним, прежде чем переходить к программированию.

Часть 2: Литералы шаблона

Первая функция ES6, рассматриваемая курсом, это литералы шаблонов. Литералы шаблона – это более чистый и красивый способ игры со строками. Они избавляются от потребности в большом количестве + знаки для concat строк.

let str1 = 'My name is:'  
let name="Dylan";

let str2 = `${str1} ${name}`

// --> 'My name is: Dylan'

Литералы шаблона начинаются с обратной галочки, и мы используем $ знак и фигурные скобки для ввода переменной между ними.

Часть 3: Деструктурирование объектов

В части 3 вы узнаете, как деструктурировать объект и извлечь интересующие вас свойства.

let information = { firstName: 'Dylan', lastName: 'Israel'};

let { firstName, lastName } = information;

В приведенном выше коде мы извлекаем свойства firstName и lastName с объекта, и мы назначаем их переменным посредством деструктуризации объектов.

Часть 4: Деструктурирование массивов

В этой части вы узнаете, как получить указатель на интересующий нас элемент из массива посредством уничтожения массива.

let [ firstName ] = ['Dylan', 'Israel'];

здесь, firstName указывает первый элемент в массиве справа. Мы также можем создать больше указателей слева от элементов в нашем массиве.

Часть №5: Литерал объекта

В части 5 нашего курса мы узнаем еще одну интересную функцию ES6, а именно объектный литерал. Объектные литералы позволяют опускать ключ в объекте, если имя ключа и значение совпадают.

let firstName="Dylan";  
let information = { firstName };

Итак, в примере выше мы хотели добавить свойство firstName в нашем information объект. The firstName переменная – это другая переменная с таким же названием. Мы пропускаем ключ и просто передаем имя переменной, и она сама создаст свойство и назначит значение.

Часть №6: Объектный литерал (задание)

Теперь пора для первого вызова курса! Цель здесь состоит в том, чтобы консольно записать новый город, новый адрес и страну вместе с ними.

function addressMaker(address) {  
   const newAddress = {  
      city: address.city,  
      state: address.state,  
      country: 'United States'  
   };  
   ...  
}

Мы поощряем вас использовать темы, которые мы изучали сейчас, чтобы решить эту проблему. Это включает в себя литералы шаблонов, уничтожение объектов и литералы объектов.

Часть №7: For…Of Loop

В части 7 вы узнаете новый способ циклического прохождения элементов. ES6 представил инструкцию цикла For…Of, которая создает цикл, повторяющий итерированные объекты, такие как String, Array, NodeList объекты и т.д.

let str="hello";

for (let char of str) {  console.log(char);}// "h"// "e"// "l"// "l"// "o"

В приведенном выше примере кода цикл For…Of выполняет цикл над строкой и выводит символы.

Часть 8: Задания For…Of Loop

В этой задаче вас просят угадать, что происходит, когда вы используете let закончено const внутри a for…of цикла и попытаться манипулировать значениями внутри цикла.

let incomes = [62000, 67000, 75000];

for (const income of incomes) {

}  
console.log(incomes);

Часть №9: Оператор спреда

В части 9 курса вы узнаете об одной из самых крутых функций, включенных в ES6: оператор распространения.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];

// arr3 = [1, 2, 3, 4, 5, 6];

Вышеприведенный код демонстрирует одну из многих замечательных реализаций использования оператора spread. Здесь мы объединяем два массива, помещая его в новый массив с тремя точками (…) перед названием массива.

Часть 10: Оператор отдыха

В этом уроке вы узнаете несколько случаев использования оператора Rest. Оператор Rest помогает нам лучше обрабатывать параметры функции, позволяя представлять переменное количество параметров в виде массива.

function findLength(...args) {  console.log(args.length);}

findLength();  // 0
findLength(1); // 1
findLength(2, 3, 4); // 3

Здесь мы вызываем ту же функцию с разным количеством параметров, и оператор Rest идеально справится с этим за нас.

Часть №11: Функции стрелок

Этот урок учит нас одной из самых крутых и обсуждаемых функций, представленных в ES6: функции стрелок. Функции со стрелками изменили способ написания функций.

const square = num => num * num;


square(2); // 4

Используя функцию стрелки, вид a квадратура функция была полностью изменена. Только за одну строчку кода мы можем вернуть квадрат числа. Функции со стрелками имеют много других замечательных реализаций, объясняемых в уроке.

Часть №12: Параметры по умолчанию

Параметры по умолчанию позволяют нам инициализировать функции по умолчанию. В этом уроке вы узнаете, насколько эта функция может быть полезна в реальных задачах программирования, поскольку она помогает вам избежать ошибок и ошибок. Простой пример параметров по умолчанию:

function sum (a, b = 1) {    
  return a + b;
}

sum(5); // 6

Здесь мы устанавливаем значение по умолчанию b так что, если мы не передаем ни одного значения b, для вычисления результата будет использоваться значение по умолчанию.

Часть №13: включает()

Использование includes метод, мы можем узнать, содержит ли какую-либо строку определенный символ или подстроку. В этом уроке вы подробно узнаете о практических случаях использования этой функции.

let str="Hello World";

console.log(str.includes('hello')); // true

Здесь мы узнаем, содержит ли нашу строчку подстроку hello. Как вы видите, метод include возвращает true или false в зависимости от того, соответствует ли условие.

Часть 14: Let и Cost

Пожалуй, важнейшей особенностью ES6 являются два новых ключевых слова для объявления переменных: let и const.

let str="Hello World";

const num = 12345;

Использование let, мы можем создать переменные, которые можно изменить позже в программе. Сменные, объявленные с помощью const никогда нельзя изменить. О них мы узнаем на этом уроке.

Часть 15: Импорт и экспорт

Мы все знаем, как важно иметь модульный код, особенно если вы работаете над крупномасштабными программами. С import и export операторов в JavaScript стало очень легко и понятно объявлять и использовать модули.

В части 15 этого курса вы узнаете, как использовать операторы экспорта и импорта для создания модулей.

// exports function 
export function double(num) {   
 return num * num;  
}

В приведенном выше коде мы экспортируем функцию под названием double. Затем мы импортируем функцию в отдельный файл:

// imports function  
import { double } from '..filepath/filename

Часть №16: padStart() и padEnd()

ES2017 представил два новых метода манипулирования строчками, о которых вы подробно узнаете в этой части. padStart и padEnd просто добавит отступы в начале и конце строки.

let str="Hello";  
str.padStart(3); // '   Hello'

str.padEnd(3); // 'Hello   '

Часть №17: задачи padStart() и padEnd().

В этой части вы решите третью задачу этого курса. Это небольшая викторина, в которой Дилан сначала просит вас угадать, а затем объясняет, что происходит, когда выполняется следующий код

let example="YouTube.com/CodingTutorials360";

// console.log(example.padStart(100));  
// console.log(example.padEnd(1));

Часть №18: Занятия

Классы были представлены в ES6 и полностью улучшили игру для использования объектно-ориентированных шаблонов в JavaScript. Хотя это просто синтаксический сахар над существующим прототипным наследованием JavaScript, он облегчил написание более объектно-ориентированным способом.

Поэтому в этом уроке вы подробно узнаете, как можно использовать классы и использовать преимущества ООП-функций, таких как, например, наследование. Ниже приведен простой пример использования классов.

class Car {
   constructor(wheels, doors) {
      this.wheels = wheels;
      this.doors = doors;
   }
   describeMe() {
     console.log(`Doors: ${this.doors} and Wheels: ${this.wheels}`);
   }}


const car1 = new Car(4, 2);  
car1.describeMe(); // Doors: 2 and Wheels: 4

Здесь мы создаем простой класс Car, в котором у нас есть конструктор, назначающий колеса и двери. У нас также есть метод, регистрирующий количество дверей и колес автомобиля.

Затем мы создаем новый экземпляр и передаем значение колесам и дверям. Наконец, мы называем describeMe метод на нем.

Часть №19: Конечные комы

В уроке 19 вы научитесь использовать конечные запятые. Они упрощают добавление новых элементов, свойств или атрибутов в ваш код, поскольку вы можете делать это, не беспокоясь о добавлении запятые к предыдущему элементу.

let arr = [  1,   2,   3, ];arr.length; // 3

Это был лишь простой пример использования конечных запятых. Вы узнаете о них больше на нашем уроке во время нашего курса.

Часть №20: Async & Await

Async & Await – мои любимые функции ES6. С помощью Async & Await мы можем писать асинхронный код, который смотрится как синхронный код. Это ясно, легко читать и легко понять. Поэтому на этом уроке вы узнаете несколько практических примеров того, как им пользоваться.

let response = await fetch('
console.log('response');

В приведенном выше примере мы использовали ключевое слово await перед инструкцией fetch и перед переходом к следующей строке он будет ждать, пока не будет получен результат этого API.

Часть №21: Async & Await (вызов)

Это последняя задача этого курса, и она, конечно, касается Async & Await. Вам будет предложено сначала попытаться преобразовать следующий код на основе обещаний на использование Async & Await:

function resolveAfter3Seconds() {  
   return new Promise(resolve => {  
      setTimeout(() => {  
        resolve('resolved');  
      }, 3000);  
   });  
}

Не беспокойтесь, если вы не можете решить ее полностью. Дилан подробно расскажет, как это сделать. К концу урока вы будете достаточно уверены, чтобы начать использовать его немедленно.

Часть №22: Наборы

На заключительной лекции курса вы узнаете очень важную структуру данных, Set. Это объект, позволяющий сохранять уникальные значения. Итак, если вы хотите иметь коллекцию, содержащую только уникальные значения, вы можете использовать наборы.

const set1 = new Set([1, 2, 3, 4, 5]);

Часть 23: Что дальше?

Нажмите на изображение, чтобы перейти к курсу

Подытоживая курс, Дилан дает несколько советов по поводу того, как продолжить обучение и улучшить код, который вы сегодня пишете.

И все это! Если вы зашли так далеко, можете похлопать себя по плечу! Вы прошли курс и встали на шаг ближе к тому, чтобы стать ниндзя JavaScript.

Спасибо, что прочли! Меня зовут Пер, я соучредитель Scrimba и люблю помогать людям осваивать новые навыки. Следите за мной в Twitter, если хотите получать уведомления о новых статьях и ресурсах.

Спасибо, что прочли! Меня зовут Пер Борген, я соучредитель Scrimba – самый простой способ научиться кодировать. Если вы хотите научиться создавать современный веб-сайт на профессиональном уровне, посетите наш курс по адаптивному веб-дизайну.

буткемп-баннер
Нажмите здесь, чтобы перейти к расширенному учебному лагерю.

Добавить комментарий

Ваш адрес email не будет опубликован.