ReactJS ES6
ES6, также известный как ECMA script 2015, - это язык сценариев, который основан на спецификации и стандартизации ECMA International Company в ECMA-262 и ISO / IEC 1623. Это шестая редакция стандарта спецификации языка ECMAScript. Он был создан для стандартизации языка JavaScript с целью предоставления нескольких реализаций. Он представил несколько новых функций, таких как новый цикл для перебора массивов, переменные с блочной областью видимости, литералы шаблонов и многие другие изменения, упрощающие программирование на JavaScript. Сценарий ECMA обычно используется для написания сценариев на стороне клиента, особенно во всемирной паутине. Он пользуется огромным спросом для написания серверных приложений и более широких сервисов с использованием node.js.
Определение: ES6 - это язык программирования сценариев ECMA, следующая версия после 5 была выпущена в 2015 году. Он используется для создания стандартов для языка JavaScript, так что он может предлагать несколько независимых реализаций.
Как пользоваться ES6?
ES6 обычно поддерживается во многих местах, но имеет проблемы с Internet Explorer. Итак, пока вы только начинаете писать в стиле ES6, вы не можете быть уверены, что все браузеры будут вести себя одинаково.
В настоящее время ES6 компилируется до «обычного» синтаксиса ES5 с помощью такой утилиты, как Babel. Babel - это компилятор, который помогает преобразовать ваш код разработки, написанный на ES6, в код, который будет работать на вашем рабочем сайте, часто объединенный и минимизируемый с помощью веб-пакета.
Работа: вы пишете свои файлы .js в среде разработки и можете использовать любой синтаксис ES6, какой захотите. Вместо того, чтобы загружать их напрямую, вы настраиваете веб-пакет для загрузки файлов js с помощью Babel. Часто вам нужно запустить webpack-dev-server, поэтому это происходит автоматически, когда вы вносите изменения. Теперь вместо загрузки index.js вы загружаете bundle.js, в котором есть весь ваш код.
Ключевое слово let: ES6 представил новое ключевое слово let для объявления переменных. До появления ES6 единственным способом объявления переменной было использование ключевого слова var .
Переменные, объявленные с помощью ключевого слова var, имеют функциональную область видимости, тогда как переменные, объявленные с использованием ключевого слова let, имеют блочную область видимости. Кроме того, переменные поднимаются вверх в пределах своей области, если они объявлены с использованием ключевого слова var , но не поднимаются, когда переменные объявляются с использованием ключевого слова let.
Область видимости блока означает объединение всех операторов JavaScript в один блок. Он создает новую область видимости между парой фигурных скобок, т.е. {}. Итак, если вы объявите переменную с помощью ключевого слова let , она не будет существовать вне этого цикла. Посмотрим на пример:
// Синтаксис ES6
for (let i = 0; i <10; i ++) {
// Выводит '0,1,2, ..... 9'
console.log (я);
}
// Выводит undefined
console.log (я); // Синтаксис ES5
for (var i = 0; i <10; i ++) {
// Выводит '0,1,2, ..... 9'
console.log (я);
}
// Выводит '10'
console.log (я);Следовательно, вы можете видеть, что переменная i в синтаксисе ES6 недоступна вне цикла for. Это имеет то преимущество, что одно и то же имя переменной используется несколько раз, поскольку область видимости ограничена блоком, то есть {}.
Ключевое слово const: ключевое слово const используется для определения констант. Константы доступны только для чтения, что означает, что вы не можете переназначить им какое-либо новое значение. Они также имеют блочную область видимости, как ключевое слово let.
// Создание постоянной переменной const PI = 3,14; // Выводит '3.14' console.log (PI); // Выдает ошибку PI = 777;
Пример: код, демонстрирующий, как изменять свойства объекта или элементы массива, как показано ниже:
// Пример объекта с некоторыми свойствами
const Branch = {name: "IT", студентов: 55};
// Выводит "IT"
console.log (Branch.name);
// Изменение значения свойства объекта
Branch.name = "CSE";
// Выводит 'CSE'
console.log (Branch.name);// Пример массива с некоторыми значениями const Fruits = ["яблоко", "манго", "банан"]; // Печатает яблоко console.log (Фрукты [0]); // Изменение элемента массива Фрукты [0] = "виноград"; // Печатает 'виноград' console.log (Фрукты [0]);
for-of Loop: цикл for-of используется для очень простого перебора массивов или любых других итерируемых объектов. Кроме того, с помощью этого типа цикла выполняется каждый элемент итеративного объекта внутри цикла.
Пример: код, демонстрирующий, как использовать цикл for-of в ReactJs, как показано ниже:
// Iterating over array
let colors = ["red", "blue", "green",
"yellow", "pink", "purple"];
// Using the for-of loop
for (let color of colors) {
// Prints "red,blue,green,yellow,pink,purple"
console.log(color);
}// Iterating over string
let name = "Alpha Charlie";
// Using the for-of loop
for(let character of name) {
// Prints "A,l,p,h,a, ,C,h,a,r,l,i,e"
console.log(character);
}Шаблонные литералы: шаблонные литералы помогают обеспечить простой и понятный способ записи нескольких строк строк и выполнения интерполяции строк. Он также упростил встраивание переменных или выражений в строку в любом месте.
Теперь символы обратной галочки (``) используются для создания шаблонных литералов вместо одинарных и двойных кавычек. Переменные и выражения могут быть помещены внутри строки с использованием синтаксиса литералов шаблона.
Пример: использование многострочной строки в ES6.
// Многострочная строка в ES6
let str = `Джек и Джилл
поднялся на холм.`;
// Примеры значений
пусть а = 30;
пусть b = 10;
// Строка со встроенными переменными
// и выражение
пусть ответ =
`Разница между $ {30} и $ {10} равна $ {ab}. ';
// Выводит "Разница 30 и 10 равна 20."
console.log (ответ);Пример: использование многострочной строки в ES5.
// Многострочная строка в ES5
var str = 'Джек и Джилл n t'
+ 'поднялся в гору.';
// Примеры значений
var a = 30;
var b = 10;
// Создание строки с использованием переменных
// и выражение
var answer = 'Разница' +
+ 'и' + b + 'равно' + (ab) + '.';
// Выводит "Разница 30 и 10 равна 20."
console.log (ответ);Стрелочные функции: Стрелочные функции упростили создание функций. Это закрытие выражения, которое создает красивые и компактные функции, особенно при работе с обратными вызовами, списками или обработкой ошибок.
// Стрелочные функции
arr.map ((func) => {
return func + 1;
});Кроме того, скобки не нужны, если вы передаете только один аргумент. Кроме того, без скобок и операторов возврата, если вы возвращаете только одно значение:
arr.map (func => func + 1);
Без использования стрелочных функций синтаксис будет таким:
// Без стрелочных функций
arr.map (function (func) {
return func + 1;
});