В этом руководстве вы узнаете о JavaScript ES6 с помощью примеров.
JavaScript ES6 (также известный как ECMAScript 2015 или ECMAScript 6 ) - это более новая версия JavaScript, представленная в 2015 году.
ECMAScript - это стандарт, который использует язык программирования JavaScript. ECMAScript предоставляет спецификацию того, как должен работать язык программирования JavaScript.
В этом руководстве содержится краткое описание часто используемых функций ES6, чтобы вы могли быстро начать работу с ES6.
JavaScript позволяет
JavaScript letиспользуется для объявления переменных. Ранее переменные объявлялись с использованием varключевого слова.
Чтобы узнать больше о разнице между letи var, посетите JavaScript let vs var.
Переменные, объявленные с использованием, letимеют блочную область видимости . Это означает, что они доступны только в определенном блоке. Например,
// variable declared using let let name = 'Sara'; ( // can be accessed only inside let name = 'Peter'; console.log(name); // Peter ) console.log(name); // Sara
JavaScript const
Оператор constиспользуется для объявления констант в JavaScript. Например,
// name declared with const cannot be changed const name = 'Sara';
После объявления вы не можете изменить значение constпеременной.
Функция стрелки JavaScript
В версии ES6 вы можете использовать стрелочные функции для создания функциональных выражений. Например,
эта функция
// function expression let x = function(x, y) ( return x * y; )
можно записать как
// function expression using arrow function let x = (x, y) => x * y;
Чтобы узнать больше о стрелочных функциях, посетите JavaScript Arrow Function.
Классы JavaScript
Класс JavaScript используется для создания объекта. Класс похож на функцию-конструктор. Например,
class Person ( constructor(name) ( this.name = name; ) )
Ключевое слово classиспользуется для создания класса. Свойства назначаются в функции-конструкторе.
Теперь вы можете создать объект. Например,
class Person ( constructor(name) ( this.name = name; ) ) const person1 = new Person('John'); console.log(person1.name); // John
Чтобы узнать больше о классах, посетите Классы JavaScript.
Значения параметров по умолчанию
В версии ES6 вы можете передавать значения по умолчанию в параметрах функции. Например,
function sum(x, y = 5) ( // take sum // the value of y is 5 if not passed console.log(x + y); ) sum(5); // 10 sum(5, 15); // 20
В приведенном выше примере, если вы не передадите параметр для y, по умолчанию потребуется 5 .
Чтобы узнать больше о параметрах по умолчанию, посетите Параметры функции JavaScript по умолчанию.
Литералы шаблона JavaScript
Литерал шаблона упростил включение переменных в строку. Например, раньше нужно было сделать:
const first_name = "Jack"; const last_name = "Sparrow"; console.log('Hello ' + first_name + ' ' + last_name);
Этого можно добиться с помощью литерала шаблона:
const first_name = "Jack"; const last_name = "Sparrow"; console.log(`Hello $(first_name) $(last_name)`);
Чтобы узнать больше о шаблонных литералах, посетите JavaScript Template Literal.
Деструктуризация JavaScript
Синтаксис деструктуризации упрощает присвоение значений новой переменной. Например,
// before you would do something like this const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Используя синтаксис ES6 Destructuring, приведенный выше код можно записать как:
const person = ( name: 'Sara', age: 25, gender: 'female' ) let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Чтобы узнать больше о деструктуризации, посетите JavaScript Destructuring.
Импорт и экспорт JavaScript
Вы можете экспортировать функцию или программу и использовать ее в другой программе, импортировав. Это помогает создавать компоненты многократного использования. Например, если у вас есть два файла JavaScript с именами contact.js и home.js.
В contact.js файл можно экспортировать в contact()функцию:
// export export default function contact(name, age) ( console.log(`The name is $(name). And age is $(age).`); )
Затем, когда вы захотите использовать contact()функцию в другом файле, вы можете просто импортировать функцию. Например, в файле home.js:
import contact from './contact.js'; contact('Sara', 25); // The name is Sara. And age is 25
Обещания JavaScript
Обещания используются для обработки асинхронных задач. Например,
// returns a promise let countValue = new Promise(function (resolve, reject) ( reject('Promise rejected'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); // Promise resolved ), )
Чтобы узнать больше о обещаниях, посетите JavaScript-обещания.
Параметр отдыха JavaScript и оператор распространения
Вы можете использовать параметр rest для представления неопределенного числа аргументов в виде массива. Например,
function show(a, b,… args) ( console.log(a); // one console.log(b); // two console.log(args); // ("three", "four", "five", "six") ) show('one', 'two', 'three', 'four', 'five', 'six')
Остальные аргументы передаются с использованием … синтаксиса. Следовательно, имя остального параметра .
Вы используете синтаксис распространения, … чтобы скопировать элементы в один массив. Например,
let arr1 = ('one', 'two'); let arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // ("one", "two", "three", "four", "five")
И параметр rest, и оператор распространения используют один и тот же синтаксис. Однако оператор распространения используется с массивами (повторяемыми значениями).
Чтобы узнать больше об операторе распространения, посетите Оператор распространения JavaScript.
