Привет всем, я вернулся с еще одним обзором курса Javascript.

Этот обзор относится к курсу Wes Bos 'ES6 for Everyone'», цель которого — научить вас JavaScript ES6, крупному обновлению JavaScript.

Предыстория. Курсы Веса Боса часто рекомендуются на различных форумах, посвященных программированию и обучению.

Некоторые из его популярных курсов:

У него также есть несколько других бесплатных курсов по основам командной строки, уценки и возвышенного текста.

Я начал раньше с курса JS30, и меня очень впечатлил стиль преподавания. В некоторых местах Уэс использовал синтаксис ES6, особенно const, стрелочные функции, шаблонные строки, …spread, …rest и т. д.

Я был поражен синтаксисом ES6, временами он казался волшебством. Так много можно было бы сделать меньшим количеством строк кода. Код был чистым и читабельным.

Поэтому я подумал, что должен узнать больше о ES6. Он также использовал синтаксис ES6 в другом своем курсе.

Я купил все его 3 платных курса. Хорошая новость заключается в том, что Уэс поддерживает паритет покупательной способности и предлагает скидку в зависимости от страны. Я из Индии получил скидку 70%! Это означает, что курс обошелся мне примерно в 25 долларов США. Это была огромная сделка для меня. По его первоначальной цене выше $100 покупка была бы недоступна.

Я рекомендую вам приобрести его основной пакет для всех модулей курса. Я не очень понимаю, какой существует стартовый пакет, который предлагает первые 7 модулей. Наверное, для Decoy Effect или чего-то в этом роде.

Обзор курса. Курс содержит 21 модуль, что составляет примерно 8 часов содержания курса. Каждый модуль занимает около 15–30 минут в зависимости от содержания. Таким образом, большинство видео в модуле длятся около 3–5 минут. Так что все размеренно, эффективно и нет абсолютно никакой проповеди.

Распределение модулей выглядит следующим образом.

Модуль 1 — Новые переменные — создание, обновление и область действия — все о let, const, областях видимости переменных, статусе var и т. д.

// Old 
var name = 'reddit'; 
// New Variable Declaration 
// const, generally used where value 
// remains constant throughout the code 
const name = 'reddit'; 
// let, generally used where value 
// varies or as to be re-assigned in 
// the code 
for(let i=0; i< something; i++){ 
....... 
}

Модуль 2 — Улучшения функций — Функция со стрелками и аргументы по умолчанию — Функции со стрелками великолепны. Так когда и когда не использовать их.

const social = ['facebook', 'twitter', 'reddit']; 
// Old Syntax 
social.forEach(function(website){ console.log(website); }) 
// Arrow function 
social.forEach((website) => console.log(website));

Также аргументы функции по умолчанию, которые вы, вероятно, могли видеть в других языках, таких как python или ruby.

// Default Arguments example 
function multiply(a, b = 1){ 
return a * b; 
} 
multiply(5,4); // 20 multiply(5); // 5

Модуль 3 — Шаблонные строки — отличный способ использовать переменные в вашей строке или функциях. Вы используете обратные кавычки вместо одинарных или двойных кавычек.

const name = 'Tom' 
// Old Syntax 
function sayHello(name){ 
  console.log('Hello, I am ' + name + '.');
} 
sayHello(name) // Hello, I am Tom. 
// Template Strings using backticks
function sayHello(name){
 console.log(`Hello, I am ${name}.`); 
} 
sayHello(name) // Hello, I am Tom.

Модуль 4 — Дополнительные улучшения строк — Новые строковые методы, такие как .startswith(), .endswith(), .includes(), .repeat().

Модуль 5 — Разрушение объектов и массивов — Классный способ использования различных элементов массивов и объектов —

const person = { first: 'Steve', last: 'Jobs' } 
// Old syntax const 
first = person.first; 
const last = person.last; 
// ES6 Destructuring 
const {first, last} = person;

Модуль 6 — Итерации и циклы — для циклов по итерациям добавлен новый цикл for of loop. Может использоваться для массивов и особенно для новых представлений, таких как генераторы, наборы и карты.

Модуль 7 — Усовершенствования массивов — Новые методы в Array, такие как Array.from(), Array.of(), Array.find(), Array.findIndex(), Array.some(), Array .каждый().

Модуль 8 — Поздоровайтесь с …Spread и …Rest — Самая крутая часть. Предположим, вы не уверены в количестве аргументов в используемой вами функции.

function makeArray(...items){ 
  const arr = [...items]; 
  console.log(arr); 
} 
makeArray(1,2);         // [1,2] 
makeArray(1,3,5,7);     // [1,3,5,7] 
makeArray('a','b','c'); // ['a','b','c']

Модуль 9 — Обновления литерала объекта — Новый способ определения объектов, если имя свойства совпадает с именем переменной.

const first = 'Peter'; 
const last = 'Parker; 
const alias = 'spidey'; 
// old syntax 
const superhero = { 
    first:first, 
    last:last, 
    alias:alias
} 
// ES6 Object Literals 
const spiderman = { first, last, alias }

Модуль 10 — Промисы. Промисы — это расширенная функция ES6 JS, используемая в основном при получении API или задач AJAX.

Вместо использования jquery или XMLHttpRequest для запросов API мы используем fetch() API браузера.

fetch() возвращает обещание, которое затем используется для извлечения из него данных. Например -

const dataPromise = fetch('/api/endpoint');

dataPromise.then(data => { console.log(data); });

Это подробная тема с множеством аспектов, таких как обработка ошибок, множественные промисы, цепочка промисов и т. д.

Модуль 11 — Символы. Символ — это новое дополнение к примитивам JS. Он используется для создания уникальных идентификаторов типа «символ». Он используется в основном для того, чтобы избежать коллизий имен.

const name1 = Symbol('Albert'); 
const name2 = Symbol('Albert'); 
// Both of above are not same as each other 
console.log(name1 === name2); // false

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

Модуль 12 — Качество кода с помощью ESLint — это одна из моих любимых частей курса. Уэс представляет ESLint, отличный инструмент, который помогает писать чистый, согласованный и простой в обслуживании код javascript с использованием определенных правил и стилей.

Вы также можете использовать популярные руководства по стилю от google, airbnb и т. д., если не знаете, с чего начать. Вы также можете настроить правила в соответствии с вашими предпочтениями.

Это особенно полезно при сотрудничестве с другими разработчиками или при работе с открытым исходным кодом. Самое приятное то, что вы можете подключить ESLint к Git, установив правило, разрешающее код, который следует стандартным правилам.

Очень рекомендую обратить внимание на эту часть курса.

Модуль 13 — Модули JavaScript и использование npm — Все о npm, импорте и экспорте модулей, управлении зависимостями, связывании с помощью webpack. Супер полезная тема, если вы изучаете Node и современные JS-фреймворки.

Модуль 14 — Инструментарий ES6. В основном он посвящен тому, как заставить ваш код Javascript работать в старых браузерах с небольшой поддержкой функций ES6 или вообще без нее. Это называется транспиляция. Мы можем сделать это с помощью инструмента под названием Babel, который преобразует ваш код ES6 в более старый код ES5. Также Уэс рассказывает о «полифиллинге», который представляет собой процесс имитации определенных API или функций (таких как Array.from()), которые могут быть не реализованы в вашем браузере.

Модуль 15 — Классы — Все объектно-ориентированное программирование в JavaScript. Создание классов, конструкторов, геттеров и сеттеров, расширение классов и многое другое.

Модуль 16 — Генераторы — одна из наиболее продвинутых и мощных функций ES6. Генераторы предоставляют возможность приостановить функцию. Функцию можно запустить-приостановить-запустить снова.

// Silly Example 
function* generateNumbers(){
  yield 1; yield 2; yield 3; 
} 
const number = generateNumbers(); 
number.next().value; // 1 
number.next().value; // 2 
number.next().value; // 3

Модуль 17 — Прокси — Прокси в основном используются для перехвата взаимодействия с объектом. Прокси состоит из целевого объекта и обработчика. Обработчик может иметь различные параметры, называемые ловушками (получить, установить и т. д.), которые можно использовать для контроля (или ограничения) взаимодействия с объектом.

Модуль 18 — Наборы и слабые наборы — Набор похож на массив, который может содержать только уникальные элементы. Однако он не основан на индексе. Вы можете добавлять, удалять предметы из наборов. Он имеет размер, а не длину.

const sports = new Set(); 
sports.add('cricket'); 
sports.add('basketball'); 
sports.add('football'); 
console.log(sports); // Set('cricket','basketball','football') 
sports.remove('cricket') 
sports.clear();

СлабыйСет похож на Сет. Однако он может содержать только Object. Вы не можете зацикливаться на WeakSet. У него также нет четкого метода. Он как бы самоочищается, что помогает в таких вещах, как сборка мусора и управление памятью.

// Syntax 
let car1 = {name: 'audi', country: 'germany'}; 
let car2 = {name: 'ferrari'. country: 'italy'}; 
const example = new WeakSet([car1, car2]);

Модуль 19 — Карта и WeakMaps — Карты похожи на наборы. Он содержит пары ключ-значение (по сравнению со значениями в наборах). Карты имеют API, такие как получить, имеет, удалить.

// Syntax 
const players = new Map(); 
players.set('cricket', 11); 
players.set('basketball', 5); 
players.set('tennis', 2); 
console.log(players); // Map{'cricket' => 11, 'basketball' => 5, 'tennis' =>2}

WeakMap похож на WeakSet, он не перечислим и не содержит размер. Это также помогает в управлении памятью при сборке мусора.

// Syntax 
const players = new WeakMap(); 
players.set('cricket', 11); 
players.set('basketball', 5); 
players.set('tennis', 2); 
console.log(players); // WeakMap{'cricket' => 11, 'basketball' => 5, 'tennis' =>2} 
console.log(players.size) // undefined

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

Модуль 20 — Async + Await Flow Control — очень важная часть этого курса, которая недавно была обновлена. В основном async + await помогает в управлении потоком в случае асинхронного кода.

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

// Example from MDN 
function resolveAfter2Seconds(x) { 
    return new Promise(resolve => { setTimeout(() => { resolve(x);          }, 2000); }); 
} 
async function add1(x) {
 const a = await resolveAfter2Seconds(20);
 const b = await resolveAfter2Seconds(30);
 return x + a + b;
} 
// prints 60 after 4 seconds.
add1(10).then(v => {console.log(v); });
// In add1, execution suspends for 2 seconds for first await, again 2 seconds for second wait.

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

Модуль 21 — ES7, ES8 + Beyond — Экспериментальные функции JS, такие как padStart, padEnd, экспоненциальный оператор, запятая в функции, Object.entries(), Object.values() и т. д.

Заключение. На этом мой обзор заканчивается. В целом, это фантастический курс, который знакомит вас с JS и ES6. Вы определенно можете улучшить свои навыки JS и укрепить свое понимание JS.

Я настоятельно рекомендую этот курс для тех, кто готов глубоко погрузиться в разработку JS.

Первоначально опубликовано на gist.github.com.