Автор оригинала: Per Harald Borgen.
JavaScript, несомненно, является одним из самых популярных языков программирования в мире. Он используется практически везде: из крупных веб-приложений на сложные серверы на мобильные устройства и IOT.
Итак, мы сотрудничали с Дилан С. Израиль – Программирование YouTuber и FreeCodecamp Grad – и попросил его создать Введение в курс ES6 на Scrimba.
Курс содержит 17 уроков и 4 интерактивных задача. Это для разработчиков JavaScript, которые хотят узнать современные функции JavaScript, представленные в ES6, ES7 и ES8.
Давайте посмотрим на структуру курса:
Часть № 1: Введение
В вступительном видео Дилан дает обзор того, как будет выглядеть его курс, а какие основные темы он будет трогать. Он также дает вам вступление о себе, так что вы с ним знакомы, прежде чем прыгать в кодирующие вещи.
Часть 2: Шаблонные литералы
Первая особенность ES6, что обложки курса – это шаблонные литералы. Шаблонные литералы – это более чистый и красивый способ играть с строками. Они избавляются от необходимости в многом + Знаки для объединения строк.
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;
В коде выше, мы извлекаем свойства Имя и фамилия от объекта, и мы назначаем их переменные с помощью деструктуризации объекта.
Часть № 4: Деструктурные массивы
В этой части вы узнаете, как получить указатель предмета, который мы заинтересованы в массиве, используя разрушение массива.
let [ firstName ] = ['Dylan', 'Israel'];
Здесь Имя указывает на первый элемент в массиве на правой стороне. Мы также можем создавать больше указателей на левой стороне элементов в нашем массиве.
Часть № 5: Объектный литерал
В части 5 нашего курса мы узнаем другую крутую особенность ES6, которая является литералом объекта. Объектные литералы позволяют вам опустить ключ в объекте, если имя ключа и значения одинаково.
let firstName = 'Dylan';
let information = { firstName };
Итак, в приведенном выше примере мы хотели добавить свойство Имя в нашем Информация объект. Имя Переменная – другая переменная с тем же именем. Мы опускаем ключ и просто пропустите имя переменной, и она создаст свойство и присвоение самого значения.
Часть № 6: Объектный литерал (вызов)
Теперь пришло время для первой проблемы курса! Цель здесь – консоль, журнал новый город, новый адрес и страна с ней.
function addressMaker(address) {
const newAddress = {
city: address.city,
state: address.state,
country: 'United States'
};
...
}
Вам рекомендуется использовать темы, которые мы узнали до сих пор, чтобы решить эту проблему. Это включает в себя шаблонные литералы, разрушение объекта и объектных литералов.
Часть № 7: для … цикла
В части 7 вы узнаете о новом способе циркуляции сквозь элементы. ES6 представила a для … из оператора loop, которое создает цикл, который итасившись по поводу передовых объектов, таких как строка, массив, объекты odelist и многое другое.
let str = 'hello';
for (let char of str) { console.log(char);}// "h"// "e"// "l"// "l"// "o"
В приведенном выше примере кода выше для … из цикла петлей через строку и выходит из системы.
Часть № 8: для … цикла испытание
В этой задаче вам просят угадать, что происходит, когда вы используете Пусть над Const внутри для ... из петля, и пытаться манипулировать значениями внутри цикла.
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];
Вышеуказанный код демонстрирует одну из многочисленных прохладных реализаций использования оператора распространения. Здесь мы объединяем две массивы, поместив их в новый массив с тремя точками (…) перед именем массива.
Часть № 10: Оператор отдыха
В этом уроке вы будете изучать некоторые случаи использования для оператора отдыха. Оператор отдыха помогает нам обрабатывать параметры функции лучше, позволяя нам представлять переменное количество параметров функций в качестве массива.
function findLength(...args) { console.log(args.length);}
findLength(); // 0
findLength(1); // 1
findLength(2, 3, 4); // 3
Здесь мы называем ту же функцию с другим номером параметров, а оператор остального обрабатывает это идеально для нас.
Часть № 11: Функции стрелки
Этот урок учит нам один из самых крутых и наиболее разговариваемых о функциях, представленных в ES6: функции стрелки. Функции стрелки изменили способ написания функций.
const square = num => num * num; square(2); // 4
Используя функцию стрелки, внешний вид Квадрат Функция полностью изменилась. Всего в одной строке кода мы можем вернуть квадрат числа. Функции стрелки имеют много других потрясающих реализаций, которые объяснены на уроке.
Часть № 12: Параметры по умолчанию
Параметры по умолчанию позволяют нам инициализировать функции с значением по умолчанию. В этом уроке вы узнаете, насколько полезно эта функция может быть в реальных задачах по кодированию жизни, так как она помогает избежать ошибок и ошибок. Простой пример параметров по умолчанию будет:
function sum (a, b = 1) {
return a + b;
}
sum(5); // 6
Здесь мы устанавливаем значение по умолчанию B Так что, когда мы не проходим никакого значения B, он будет использовать значение по умолчанию для расчета результата.
Часть № 13: включает в себя ()
Используя включает в себя Метод, мы можем узнать, если какая-либо строка содержит определенный символ или подстроку. В этом уроке вы подробно учитесь о практических случаях использования этой функции.
let str = 'Hello World';
console.log(str.includes('hello')); // true
Здесь мы узнаем, если наша строка содержит подстроку Привет Отказ Как вы можете видеть, включенный метод возвращает либо верно или ложное в зависимости от того, соответствует ли условие.
Часть № 14: пусть и стоимость
Возможно, самая важная особенность ES6 – это два новых ключевых слова для объявления переменных: Пусть и Const Отказ
let str = 'Hello World'; const num = 12345;
Использование Пусть , мы можем создавать переменные, которые можно изменить позже в программе. Переменные объявлены с Const никогда не может быть изменен. Мы узнаем о них в этом уроке.
Часть № 15: Импорт и экспорт
Мы все знаем, насколько важно иметь модульный код, особенно если вы работаете над крупномасштабными приложениями. С Импорт и Экспорт Заявления в JavaScript, он стал чрезвычайно легким и чистым, чтобы объявить и использовать модули.
В части 15 этого курса вы узнаете, как использовать экспортные и импортные операторы для создания модулей.
// exports function
export function double(num) {
return num * num;
}
В указанном выше коде мы экспортируем функцию по имени двойной. Затем мы импортируем функцию в отдельный файл:
// imports function
import { double } from '..filepath/filename
Часть № 16: Padstart () и padend ()
ES2017 представил два новых метода для манипулирования строками, которые вы подробно учитесь в этой части. Padstart и Poadend Просто добавьте прокладку в начале и конец строки.
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, он облегчил писать более объектно-ориентированным образом.
Таким образом, в этом уроке вы подробно узнаете, как вы можете использовать классы и принять преимущество функций OOP, например, наследство. Ниже приведен простой пример использования классов.
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
Здесь мы создаем простой класс автомобиля, в котором у нас есть конструктор, присваивая колеса и двери. У нас также есть метод, который регистрирует количество дверей и колес автомобиля.
Затем мы создаем новый экземпляр и передаем значения колес и дверей. Наконец, мы называем Описать Метод на нем.
Часть № 19.: Комиссионные запяты
В урок 19 вы будете изучать, как использовать Training Commas. Они облегчают добавление новых элементов, свойств или атрибутов для вашего кода, так как вы можете сделать это, без необходимости добавления запятой на предыдущий элемент.
let arr = [ 1, 2, 3, ];arr.length; // 3
Это был просто простой пример использования комиссионных запятых. Вы узнаете о них больше в нашем уроке во время нашего курса.
Часть № 20: async & a ждать
Async & await – мои любимые функции ES6. С Async & ждут, мы можем написать асинхронный код, который выглядит как синхронный код. Это чисто, легко читать и легко понять. Таким образом, в этом уроке вы узнаете несколько практических примеров того, как его использовать.
let response = await fetch('https://example.com/books');
console.log('response');
В приведенном выше примере мы использовали ключевое слово await перед оператором Fetch, поэтому он будет ждать до тех пор, пока результат этого API не будет привлечен до продвижения вперед к следующей строке.
Часть № 21: Async & await (Challenge)
Это последняя проблема этого курса, и это, конечно, о Async & ждут. Вам будет предложено сначала попробовать преобразовывать следующий код на основе обещания в использование Async & await:
function resolveAfter3Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 3000);
});
}
Не волнуйтесь, если вы не можете решить это полностью. Дилан подробно объяснит, как это сделать. К концу урока вы будете достаточно уверены, чтобы начать использовать его немедленно.
Часть № 22: Набор
В последней лекции курса вы будете изучать о очень важной структуре данных, установленной. Это объект, который позволяет хранить уникальные значения. Поэтому, когда вы хотите иметь коллекцию, которая содержит только уникальные значения, вы можете использовать наборы.
const set1 = new Set([1, 2, 3, 4, 5]);
Часть № 23: Что дальше?
Чтобы завернуть курс, Дилан дает несколько советов о том, как взять это обучение дальше и улучшить код, который вы пишете сегодня.
И это все! Если вы получите это далеко, вы можете дать себе погладить на спину! Вы завершили курс и один шаг ближе, чтобы стать JavaScript Ninja.
Спасибо за чтение! Меня зовут пер, я соучредитель Scrimba И я люблю помогать людям узнать новые навыки. Следуй за мной на Twitter Если вы хотите получить уведомление о новых статьях и ресурсах.
Спасибо за чтение! Меня зовут на Борген, я соучредитель Scrimba – Самый простой способ научиться кодировать. Вы должны проверить наш Отзывчивый веб-дизайн Bootcamp Если хотите научиться строить современный веб-сайт на профессиональном уровне.