Здравствуйте, читатели!

Как мы все знаем, JavaScript набирает обороты после того, как крупные организации, такие как IBM и Microsoft, объявили о своей поддержке Node.js. И вот он снова переживает бум рынка со своим новым стандартом, который будет использоваться при реализации JavaScript, и это ES6! Это шестая версия языка программирования сценариев ECMA под названием ES6! Он был выпущен в 2015 году, поэтому также известен как ECMAScript 2015. В простейшей форме это набор синтаксиса, который упростит крупномасштабную разработку JavaScript.

Этот пост предназначен для всех тех, кто знает JavaScript, но не работал ни с одной из функций JavaScript следующего поколения. И, если вы попытаетесь изучить любую структуру на основе JavaScript, такую ​​как React JS или Angular JS, вы можете найти JavaScript как совершенно новый язык, все из-за его поддержки новых версий. Итак, прежде чем переходить к любому фреймворку, необходимо понять базовый синтаксис последней версии JavaScript.

JavaScript - это быстро развивающийся язык. Таким образом, с каждой новой версией он позволяет нам писать нам как разработчику более надежный и чистый код. Более того, современные браузеры по-прежнему поддерживают синтаксис ES6, многие функции поддерживаются частично, а для старых браузеров нам понадобится программное обеспечение с именем transpiler, такое как Babel, для преобразования кода ES6 в ES5, который является поддерживается большинством браузеров.

Итак, в этой статье мы рассмотрим некоторые важные синтаксисы ES6, которые программисты JavaScript должны знать, чтобы быть знакомыми со всеми новыми фреймворками на основе JavaScript. Мы рассмотрим следующие темы:

  • Понимание «let» и «const»
  • Стрелочные функции
  • Операторы спреда и отдыха
  • Классы, свойства и методы
  • Деструктуризация

Да! Итак, приступим !! 😁

  1. Что такое ключевые слова let и const:

Let и Const - разные способы создания переменных. Все мы хорошо знакомы с ключевым словом var, которое используется для создания переменных. Правильно!? Хотя вы все равно можете использовать var для создания переменной, хотя вам настоятельно рекомендуется вместо этого использовать let и const.

Let и const различаются с точки зрения использования и области применения.

Let на самом деле используется для использования переменных, когда вам нужно переназначить значение переменной, но const используется, когда вам не нужно изменять его значение после его объявления. Переназначение значения переменной типа const вызовет ошибку. Вот простейший пример:

Более того, разница между let и var ограничена областью действия функции, а область действия let заблокирована. Вот пример:

2. Стрелочные функции:

Стрелочная функция - один из широко распространенных и простых синтаксисов es6. Раньше были представлены стрелочные функции, у нас были обычные функции с синтаксисом:

Функция myFunction (params) {

return params * 2;

}

myFunction (5);

Которая была заменена стрелочной функцией следующим образом:

const myFunc = (params) = ›{

вернуть параметры * 2

}

myFunc (5);

Более того, если у вас есть только один оператор в теле функции, вы можете опустить ключевое слово return и скобки {}. Нравится :

const myFunc = (params) = ›params * 2;

Добавьте, если у вас ровно один параметр, вы также можете опустить круглые скобки. Нравится:

const myFunc = params = ›params * 2;

Это кратчайшее определение стрелочной функции.

Итак, мы можем подвести итог: функция стрелки удалила ключевое слово function и return.

Более того, стрелочная функция решила проблему с ключевым словом this. Если вы использовали JavaScript, то, возможно, столкнулись с тем, что это ключевое слово всегда не ссылается на объект, на который оно должно ссылаться.

3. Операторы Spread и Rest:

Давайте перейдем к новому синтаксису ES6! Фактически, spread и Rest имеют одинаковый синтаксис… (3 точки) и будут отличаться контекстом, в котором они вызываются.

Оператор Spread используется для распространения массива или объектов. Например,

старый_массив = [1,2,3];

const new_array = [.. old_array, 4,5];

у нас есть old_array, который состоит из трех элементов. И мы хотим, чтобы в нашем new_array были все те элементы, которые были у old_array, а также новые элементы, такие как 4 и 5.

Кроме того, его можно использовать и с объектами.

старый_объект: {имя: ’john’, возраст: 15};

новый_объект: {… старый_объект, вес: 30}

Теперь new_object будет содержать 3 свойства: имя, возраст и вес.

Примечание: если old_object имеет свойство weight, то оно будет перезаписано new_object. Давайте посмотрим на пример:

Теперь оператор Rest. Оператор rest используется для объединения аргументов функции в массив.

function sortArgs (… args) {

args.sort ();

}

Здесь наша функция sortArgs получает неограниченное количество аргументов. Но с помощью оператора rest мы можем записать его как один аргумент, и все аргументы будут собраны в массив. Итак, мы можем применить любую операцию с массивом к нашим аргументам. Поясним это на примере.

4. Класс, свойства и метод:

JavaScript следующего поколения предлагает новые способы инициализации свойств и методов с очень современным синтаксисом.

Свойства подобны «переменным, прикрепленным к классам / объектам».

До сих пор мы использовали такой синтаксис:

конструктор(){

this.myProperty = значение;

}

Но современный способ позволяет нам использовать приведенный ниже синтаксис, который избавляется от части конструктора.

myProperty = значение;

За сценой этот синтаксис преобразуется в тот же синтаксис, что и с конструктором.

Методы похожи на «функцию, прикрепленную к классам / объектам».

До сих пор мы использовали синтаксис:

myMethod () {

…..

}

Но новый синтаксис позволяет нам использовать свойство, которое будет хранить функцию как значение.

myProperty = () = ›{…. }

Да, это функция стрелки, которую мы узнали ранее. Таким образом, преимущество использования этого синтаксиса для вашего метода состоит в том, чтобы избавиться от проблем с ключевым словом this.

5. Разрушение:

Деструктуризация - следующая тема, которую я действительно хочу, чтобы вы все знали. Это позволяет нам легко извлекать элементы массива и свойства объекта для сохранения их в переменных. Теперь это может звучать в точности как оператор распространения. Но на самом деле это другое. Оператор распространения опрашивает все свойства и переменные из старого массива / объектов и сохраняет их в новом массиве / объектах. Но деструктуризация позволяет нам запрашивать отдельное свойство из массива / объекта.

Разрушение массива:

[a, b] = [‘Джон’, ’Джерри’];

console.log (а); // Джон

console.log (б); // Джерри

Да, мы можем опросить отдельные элементы из массива в зависимости от порядка.

Разрушение объекта:

{name} = {name: ’John’, возраст: 15}

console.log (имя);

console.log (возраст);

{name} нацеливается на свойство name для имени с правой стороны и запрашивает значение.

Вот и все! Надеюсь, я потратил ваше время на прочтение.