Автор оригинала: FreeCodeCamp Community Member.
Как часть нашего сотрудничества с FreeCodeCamp, их выдающийся инструктор Beau Carnes Оказал всю свою учебную программу ES6 в интерактивный курс Scrimba который вы можете посмотреть сегодня.
Как вы можете знать, ES6 – это просто способ описать новые функции JavaScript, которые не были полностью и широко приняты до 2017 года. Теперь почти все JavaScript написан с использованием функций ES6, поэтому этот курс устанавливает вас, чтобы стать современным разработчиком JavaScript.
В этой статье я отправлю главы и даю вам предложение или два об этом. Таким образом, вы сможете быстро судить, выглядит ли этот курс интересно для вас.
Если это так, обязательно Перейти к Scrimba, чтобы посмотреть его!
1. Введение
На первом скринковастье Beau предоставляет вам быстрое вступление в курс и сам и немного разговаривать о ES6. Он также показывает вам, как вы можете найти учебную программу, если вы хотели бы пройти через него на сайт FreeCodeCamp.
2. Исследуйте различия между VAR и позволяют ключевым словам
Первый предмет – переменные. В ES5 мы могли бы только объявить переменные с var , но начиная с ES6, мы теперь можем использовать Пусть и Const Отказ
Как дела Пусть и var разные? Пусть не позволяет вам дважды объявлять переменную дважды.
var catName = "Quincy"; var catName = "Beau"; // Works fine! let dogName = "Quincy"; let dogName = "Beau"; // Error: TypeError: unknown: Duplicate declaration "dogName"
3. Сравните призывы VAR и позволять ключевым словам
Еще одна серьезная разница между var и Пусть Это то, как они считают ( Руководство FreeCodeCamp по объему ).
Когда вы объявляете переменную с var Он объявлен глобально или локально, если внутри функции.
Когда он объявлен с Пусть Это было бы ограничено затвердеванием или сферой выражения.
Beau показывает вам два примера.
4. Объявите переменную только для чтения с Const ключевым словом
Const это способ назначить переменную только для чтения, которая не может быть переназначена.
const fcc = "freeCodeCamp"; const sentence = fcc + " is cool!"; sentence = fcc + " is amazing!"; // Error: SyntaxError: unknown: "sentence" is read-only
5. Мутитировать массив, объявленный с const
Вы должны быть осторожны с Const Хотя, так как все еще можно мутировать массивы, назначенные с ним.
const myArray = [5, 7, 2]; myArray[0] = 2; myArray[1] = 7; myArray[2] = 5; console.log(myArray); // [2, 7, 5]
Так же относится к объектам.
6. Предотвратить мутацию объекта
Чтобы избежать мутации объекта и массива, вы можете использовать Object.Freeze () :
const MATH_CONSTANTS = {
PI: 3.14
};
Object.freeze(MATH_CONSTANTS);
MATH_CONSTANTS.PI = 99;
// TypeError: Cannot assign to read-only property 'PI' of object '#Если вы хотите заморозить массивы, вы также можете использовать Object.Freeze () И пропустите свой массив, но он не может работать на некоторых старых браузерах.
7. Используйте функции стрелки для записи кратких анонимных функций
ES6 также вводит более короткий способ написания анонимных функций.
// ES5 anonymous function
var magic = function() {
return new Date();
};
// A shorter ES6 arrow function
var magic = () => {
return new Date();
};
// And we can shorten it even further
var magic = () => new Date();
8. Напишите функции стрелки с параметрами
Передача параметров к функциям со стрелками также легко.
var myConcat = (arr1, arr2) => arr1.concat(arr2); console.log(myConcat([1, 2], [3, 4, 5])); // [1, 2, 3, 4, 5]
9. Напишите функции стрелки более высокого порядка
Функции стрелки сияют при использовании функций более высокого порядка, как карта () , Фильтр () , Уменьшить () Отказ
10. Установите параметры по умолчанию для ваших функций
Если некоторые из наших параметров функций могут быть установлены на значение по умолчанию, вот как вы можете сделать это в ES6:
// If value parameter is not passed in, it will be assigned to 1.
function increment(number, value = 1) {
return number + value;
};
console.log(increment(5, 2)); // 7
console.log(increment(5)); // 6
11. Используйте оператор отдыха с параметрами функций
Оператор отдыха позволяет создать функцию, которая принимает переменное количество аргументов.
function sum(...args) {
return args.reduce((a, b) => a + b);
};
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4)); // 10
12. Используйте оператор по распространению для оценки массивов на месте
Распространение Оператор выглядит точно так же, как Отдых Оператор и выглядит так: ... Но он расширяет уже существующий массив на отдельные части.
const monthsOriginal = ['JAN', 'FEB', 'MAR']; let monthsNew = [...monthsOriginal]; monthsOriginal[0] = 'potato'; console.log(monthsOriginal); // ['potato', 'FEB', 'MAR'] console.log(monthsNew); // ['JAN', 'FEB', 'MAR']
13. Используйте деструктурирующие задание для назначения переменных от объектов
Разрушение – это специальный синтаксис для аккуратного назначения значений, предпринятых непосредственно из объекта к новой переменной.
// Object we want to destructure
var voxel = {x: 3.6, y: 7.4, z: 6.54 };
// This is how we would do it in ES5
var a = voxel.x; // a = 3.6
var b = voxel.y; // b = 7.4
var c = voxel.z; // c = 6.54
// A shorter ES6 way
const { x : a, y : b, z : c } = voxel;
// a = 3.6, b = 7.4, c = 6.54
14. Используйте деструктурирующие задание для назначения переменных из вложенных объектов
Вы можете использовать разрушимость, чтобы получить значения из даже вложенных объектов:
const LOCAL_FORECAST = {
today: { min: 72, max: 83 },
tomorrow: { min: 73.3, max: 84.6 }
};
function getMaxOfTmrw(forecast) {
"use strict";
// we get tomorrow object out of the forecast
// and then we create maxOfTomorrow with value from max
const { tomorrow : { max : maxOfTomorrow }} = forecast;
return maxOfTomorrow;
}
console.log(getMaxOfTmrw(LOCAL_FORECAST));
// 84.6
15. Используйте задание деструктурирования для назначения переменных из массивов
Вы задаетесь вопросом, можно ли использовать деструктурирование с массивами? Абсолютно! Есть одна важная разница, хотя. Хотя деструктурирующие массивы, вы не можете указать значение, которое вы хотите перейти в определенную переменную, и все они идут в порядке.
const [z, x, , y] = [1, 2, 3, 4, 5, 6]; // z = 1; // x = 2; // Skip 3 // y = 4;
16. Используйте деструктурирующее задание с оператором Ress для переназначения элементов массива
Давайте теперь совместимся оператору отдыха с разрушением, чтобы перезарядить наших навыков ES6.
const list = [1,2,3,4,5,6,7,8,9,10]; // Create a and b out of first two members // Put the rest in a variable called newList const [ a, b, ...newList] = list; // a = 1; // b = 2; // newList = [3,4,5,6,7,8,9,10];
17. Используйте деструктурирующие задание для передачи объекта как параметры функции
Мы можем создавать более читаемые функции.
const stats = {
max: 56.78,
standard_deviation: 4.34,
median: 34.54,
mode: 23.87,
min: -0.75,
average: 35.85
};
// ES5
function half(stats) {
return (stats.max + stats.min) / 2.0;
};
// ES6 using destructuring
function half({max, min}) {
return (max + min) / 2.0;
};
console.log(half(stats));
// 28.015
18. Создайте строки с использованием шаблонных литералов
Шаблонные литералы помогают нам создавать сложные строки. Они используют специальный синтаксис `` и $ {} Где вы можете объединить текст шаблона с переменными вместе. Например `Привет, меня зовут $ {mynamevariabiate}, и я люблю ES6!`
const person = {
name: "Zodiac Hasbro",
age: 56
};
// Template literal with multi-line and string interpolation
const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;
console.log(greeting);
19. Напишите краткие объектные буквальные объявления с использованием простых полей
ES6 Добавлена поддержка для легко определяющих объектных литералов.
// returns a new object from passed in parameters
const createPerson = (name, age, gender) => ({
name: name,
age: age,
gender: gender
});
console.log(createPerson("Zodiac Hasbro", 56, "male"));
// { name: "Zodiac Hasbro", age: 56, gender: "male" }
20. Напишите краткие декларативные функции с ES6
Объекты в JavaScript могут содержать функции.
const ES5_Bicycle = {
gear: 2,
setGear: function(newGear) {
"use strict";
this.gear = newGear;
}
};
const ES6_Bicycle = {
gear: 2,
setGear(newGear) {
"use strict";
this.gear = newGear;
}
};
ES6_Bicycle.setGear(3);
console.log(ES6Bicycle.gear); // 3
21. Используйте синтаксис класса для определения функции конструктора
ES6 обеспечивает синтаксис для создания объектов, использующих Класс ключевое слово:
var ES5_SpaceShuttle = function(targetPlanet){
this.targetPlanet = targetPlanet;
}
class ES6_SpaceShuttle {
constructor(targetPlanet){
this.targetPlanet = targetPlanet;
}
}
var zeus = new ES6_SpaceShuttle('Jupiter');
console.log(zeus.targetPlanet); // 'Jupiter'
22. Используйте GetTers и Setters для контроля доступа к объекту
С объектом вы часто хотите получить значения свойств и установить значение свойства в объекте. Они называются Геттерс и Соседниты. Они существуют, чтобы скрыть базовый код, поскольку он не должен заботиться о тех, кто использует класс.
class Thermostat {
// We create Thermostat using temperature in Fahrenheit.
constructor(temp) {
// _temp is a private variable which is not meant
// to be accessed from outside the class.
this._temp = 5/9 * (temp - 32);
}
// getter for _temp
get temperature(){
return this._temp;
}
// setter for _temp
// we can update temperature using Celsius.
set temperature(updatedTemp){
this._temp = updatedTemp;
}
}
// Create Thermostat using Fahrenheit value
const thermos = new Thermostat(76);
let temp = thermos.temperature;
// We can update value using Celsius
thermos.temperature = 26;
temp = thermos.temperature;
console.log(temp) // 26
23. Поймите различия между импортом и требуем
В прошлом мы могли использовать только требуется Для импорта функций и кода из других файлов. В ES6 мы можем использовать Импорт :
// in string_function.js file
export const capitalizeString = str => str.toUpperCase()
// in index.js file
import { capitalizeString } from "./string_function"
const cap = capitalizeString("hello!");
console.log(cap); // "HELLO!"
24. Используйте экспорт, чтобы повторно использовать код кода
Вы бы обычно Экспорт Функции и переменные в определенных файлах, чтобы вы могли импортировать их в другие файлы – и теперь мы можем повторно использовать код!
const capitalizeString = (string) => {
return string.charAt(0).toUpperCase() + string.slice(1);
}
// Named export
export { capitalizeString };
// Same line named export
export const foo = "bar";
export const bar = "foo";
25. Используйте * для импорта все из файла
Если файл экспортирует несколько разных вещей, вы можете импортировать их индивидуально, либо можно использовать * Чтобы импортировать все из файла.
Вот как вы импортируете все переменные из файла в предыдущем упражнении.
import * as capitalizeStrings from "capitalize_strings";
26. Создайте отступление экспорта с экспортом по умолчанию
Мы посмотрели на названный экспорт в предыдущих главах, а иногда может быть одна функция или переменная, которую мы хотим экспортировать из файла – Экспорт по умолчанию , часто используется в качестве последующего экспорта.
// In math_functions.js file
export default function subtract(x,y) {
return x - y;
}
27. Импортировать экспорт по умолчанию
Если вы хотите импортировать Экспорт по умолчанию Функция от предыдущих упражнений, вот как вы это сделаете.
Обратите внимание на отсутствие {} вокруг вычесть функция. Экспорт по умолчанию их не нужен.
// In index.js file import subtract from "math_functions"; subtract(7,4); // returns 3;
28. JavaScript ES6 Outro
Если вы достигли этого далеко: поздравляю! Большинство людей, которые начинают курсы, никогда не заканчивают их, так что вы можете гордиться собой.
Если вы ищете свой следующий вызов, вы должны проверить курс Beau на Regex здесь!
Удачи!:)
Спасибо за прочтение! Меня зовут на Борген, я соучредитель Scrimba – Самый простой способ научиться кодировать. Вы должны проверить наш Отзывчивый веб-дизайн Bootcamp Если хотите научиться строить современный веб-сайт на профессиональном уровне.