ES2015 и следующие версии стандартов ECMAScript предоставили нам множество новых функций, которых раньше не было в JavaScript. Даже если у вас есть предыдущий опыт работы с JS, вы столкнетесь со многими трудностями, если не будете иметь правильного понимания функций ES6, особенно когда вы работаете над React. В этой статье мы собираемся обсудить наиболее заметные новые функции ES6, которые часто используются в React.
Что такое ES6?
ES6 - это стандарт, реализованный Javascript, и он описывает все правила, детали и рекомендации, которые должна иметь реализация Javascript. Есть несколько стандартов JavaScript. И React намного легче изучить, если вы правильно знаете синтаксис ES6. Узнать обо всех новых свойствах ES6 можно здесь.
Итак, в этой статье мы собираемся описать следующие функции ES6.
- const и пусть
- Стрелочные функции
- Классы
- Отдых и распространение
- Строки шаблона
- Обещания - с асинхронностью и ожиданием
- Импорт и экспорт
1. Const и пусть
До ES6 мы использовали ключевое слово «var» для объявления переменных. Впоследствии в ES6 Javascript получил два новых ключевых слова для объявления переменных. пусть и const. Так в чем же разница между «var» и «let and const»?
Переменные, объявленные с помощью let и var, существуют только в области, которая определяет эту переменную. Если вы хотите переопределить значение, присвоенное переменной, вы должны использовать «let», а если ссылка на переменную не будет изменена, вы можете использовать «const».
Здесь переменную letOne можно без проблем изменить.
Но в этом примере (Изображение 02) возникает следующая ошибка (Изображение 03). Потому что переменная conOne неизменяема.
Теперь проверьте этот сценарий.
Несмотря на то, что это объявлено с использованием ключевого слова const, содержимое объекта conTwo может быть изменено.
Но вы не можете присвоить новый объект переменной conTwo.
«Константа не отключает все мутации переменной. Если вы объявили объект или массив с помощью const, фактическое содержимое переменной все еще может быть изменено. Однако ссылка на переменную является фиксированной и больше не может быть изменена ».
Теперь я проиллюстрирую разницу между var, let и const в отношении области, в которой они могут использоваться, в следующем примере (Изображение 05).
Обратите внимание, что вы можете использовать var вне области видимости переменной, а не const и let.
2. Стрелочные функции
До синтаксиса ES6 функции писались на javaScript с использованием ключевого слова function (Изображение 06).
Но в ES6 этот код можно записать так (Изображение 07).
Вы можете избавиться от ключевого слова «return» и скобок, если функция должна возвращать только выражение, как на «изображении 08».
3. Классы
Класс - это новая концепция, представленная в ES6. Вы можете добавить конструктор в класс для инициализации некоторых атрибутов внутри класса (как в Java). Каждый раз, когда вы создаете экземпляр нового объекта из класса, вызывается конструктор.
Здесь вы можете увидеть простой пример использования класса в JS.
4. Операции по отдыху и распространению
Сначала поговорим об операторе Rest в JavaScript. Операция Rest просто расширяет одну переменную на несколько. Параметр rest позволяет нам представить неопределенное количество аргументов в виде массива. Используя параметр rest, функцию можно вызывать с любым количеством аргументов.
Рассмотрим этот метод «сокращения» в JS, который используется для уменьшения массива до одного значения.
Рассмотрим метод getNumbers. Когда мы вызываем этот метод, мы можем указать неопределенное количество параметров. Все эти параметры передаются функции в виде массива с именем «params». Это волшебство, которое эти три точки добавили в JS. Результат, который возвращается в коде выше (Изображение 10), равен 21.
Конечно, вы можете отправить любой другой параметр функции, которого также не должно быть в массиве параметров. В этом случае вы должны сначала отправить эти другие параметры в списке параметров.
Когда вы вызываете метод getNumbers, первый параметр присваивается переменной «a», а второй параметр присваивается переменной «b». Все остальные параметры присвоены массиву с именем param.
Вывод приведенного выше кода:
Теперь обсудим оператор распространения. Оператор распространения позволяет итерируемому объекту (например, массивам) расширяться в местах, где ожидается ноль или более аргументов. Это легко понять как обратную работу механизма параметров «Остальные».
Взгляните на приведенный ниже пример (Изображение 13).
В этом примере переменная «c» содержит все содержимое массива «a» и массива «b». Эти три точки охватывают содержимое упомянутых массивов.
Вывод приведенного выше кода: [1,2,3,4,5,6,7,8,9,10]
Обратите внимание, что если вы поместите просто «a» вместо «… a», он создаст двумерный массив. Мы можем проиллюстрировать разницу следующим образом.
Вывод этого кода:
[[1,2,3,4,5],6,7,8,9,10]
5. Строки шаблона
Вкратце, строки шаблона - это заполнители. До ES6, когда нам нужно было включить выражение в строку, мы использовали такой оператор «+».
Но строки шаблона можно использовать для того же самого более простым способом.
Обратите внимание, что вы должны использовать обратные кавычки «» вместо кавычек, чтобы заключить строку. вы также можете записать строку в несколько строк без каких-либо дополнительных изменений. проверьте этот пример (Изображение 17).
Результатом этого является
6. Обещания - с async и ожиданием
Чтобы понять эту часть, вы должны иметь общее представление о Promises в JS. Если вам неизвестны обещания в JS, я рекомендую вам прочитать this и получить представление.
Ключевые слова async и await используются для включения асинхронного поведения, основанного на обещаниях, которое должно быть написано в более понятном стиле.
Этот код (Изображение 19) сначала регистрирует строку «Внутри асинхронной функции». Затем, через четыре секунды, он регистрирует строку «Через четыре секунды…».
Ключевое слово await разрешено внутри асинхронной функции. Асинхронная функция всегда возвращает обещание. Даже если вы не возвращаете обещание, JavaScript преобразует его в обещание.
async function myFunc() {
return 1
}
Приведенный выше код эквивалентен этому.
function foo() {
return Promise.resolve(1)
}
Одна асинхронная функция может иметь более одного выражения await.
7. Импорт и экспорт
В JavaScript ES6 вы можете импортировать и экспортировать функции из модулей. Это могут быть функции, классы, компоненты, константы, практически все, что вы можете присвоить переменной.
Вы можете экспортировать участников по одному, добавив ключевое слово «экспорт» перед каждым участником, или вы можете экспортировать всех участников одновременно как группу.
Вы также можете определить экспорт по умолчанию с помощью ключевого слова default.
При импорте экспортированных модулей необходимо использовать ключевое слово «import». Имена импортируемых модулей должны быть заключены в фигурные скобки, если они не являются «экспортируемыми по умолчанию» членами.
Предположим, что файл, содержащий приведенный выше код (изображение 20), - это app.js. Вы можете импортировать эти элементы следующим образом.
import {myNumbers,myFunc} , myStr from 'app.js';
Причина, по которой я не заключил myStr в фигурные скобки, заключается в том, что он экспортируется по умолчанию. Когда вы импортируете экспортируемый элемент по умолчанию, вы можете дать ему любое имя, которое вам нужно. У вас может быть только один экспорт по умолчанию для каждого файла. Нет необходимости использовать то же имя метода, которое вы использовали для экспортируемого элемента по умолчанию при импорте.
Именованный экспорт полезен для экспорта нескольких значений.
Итак, это наиболее важный синтаксис Es6, который вы должны знать, прежде чем погрузиться в ReactJS. Давайте обсудим больше о ReactJ в следующих статьях.
Вы можете прокомментировать здесь, если у вас есть какие-либо вопросы относительно вещей, включенных в эту статью.
Спасибо.
