JavaScript ES6 - меньше пиши, больше делай

JavaScript ES6 предлагает новый синтаксис и новые замечательные функции, которые делают ваш код более современным и читаемым. Это позволяет писать меньше кода и делать больше. ES6 знакомит нас со многими замечательными функциями, такими как стрелочные функции, строки шаблонов, уничтожение классов, модули… и многое другое. Давайте взглянем.

const и пусть

const- новое ключевое слово в ES6 для объявления переменных. constмощнее чем var. После использования переменную нельзя переназначить. Другими словами, это неизменяемая переменная, кроме случаев, когда она используется с объектами.

Это действительно полезно для нацеливания на селекторы. Например, если у нас есть одна кнопка, запускающая событие, или когда вы хотите выбрать элемент HTML в JavaScript, используйте constвместо var. Это потому, что varон «поднят». Всегда предпочтительнее использовать, constесли не хотите переназначать переменную.

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

letможно переназначить и принять новое значение. Он создает изменяемую переменную .

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

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

Стрелочная функция действительно потрясающая, она делает ваш код более читаемым, более структурированным и похожим на современный код. Вместо этого:

Использовать это:

Как видите, стрелочная функция кажется более понятной и понятной! Вам больше не нужно использовать старый синтаксис.

Кроме того , вы можете использовать функцию Стрелка с map, filterиreduceвстроенные функции.

Функция карты со стрелками выглядит более наглядной и читаемой, чем mapв ES5. С ES6 вы можете писать более короткий и умный код. Вы можете использовать то же самое с filterи reduce.

Шаблонные литералы

Шаблонные литералы или шаблонные строки - это довольно круто. Нам не нужно использовать оператор плюс (+) для объединения строк или когда мы хотим использовать переменную внутри строки.

Старый синтаксис:

С новым синтаксисом ES6:

Так просто! Это действительно огромная разница между старым синтаксисом и ES6. При игре со строками буквальная строка в ES6 выглядит более организованной и хорошо структурированной, чем в ES5.

Параметры по умолчанию

Когда я работаю в PHP, я обычно использую параметры по умолчанию. Это позволяет вам заранее определить параметр.

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

Взгляните на этот пример:

Приведенная выше функция возвращает значение undefined, потому что мы забыли указать ей второй параметр age.

Но если мы использовали параметр по умолчанию, он не вернет undefined и будет использовать свое значение, когда мы забудем назначить параметр!

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

Разрушение массива и объекта

Уничтожение упрощает присвоение значений массива или объекта новой переменной.

Старый синтаксис:

С синтаксисом ES6:

В ES5 мы должны присвоить каждое значение каждой переменной. В ES6 мы просто помещаем наши значения в фигурные скобки, чтобы получить любое свойство объекта.

Заметка:если вы назначите переменную, не совпадающую с именем свойства, она вернет значение undefined. Например, если имя свойства nameи мы присваиваем егоusernameпеременная,он вернет undefined.

Мы всегда должны называть переменную так же, как имя свойства. Но если мы хотим переименовать переменную, мы можем :вместо этого использовать двоеточие .

For the array, we use the same syntax as the object. We have just to replace the curly brackets with square brackets.

Import and export

Using import and export in your JavaScript application makes it more powerful. They allow you to create separate and reusable components.

If you are familiar with any JavaScript MVC framework, you will see that they use import and export to handle the components most of the time. So how do they really work?

It is simple! export allows you to export a module to be used in another JavaScript component. We use import to import that module to use it in our component.

For example, we have two files. The first is named detailComponent.jsand the second is namedhomeComponent.js.

In detailComponent.jswe are going to export the detail function.

And if we want to use this function in homeComponent.js,we will just use import.

If we want to import more than one module, we just put them within curly brackets.

So cool, isn’t it?!

Promises

Promises are a new feature of ES6. It’s a method to write asynchronous code. It can be used when, for example, we want to fetch data from an API, or when we have a function that takes time to be executed. Promises make it easier to solve the problem, so let’s create our first Promise!

If you log your console, it will return a Promise. So, if we want to execute a function after data is fetched, we will use a Promise. The Promise takes two parameters: resolve and reject to handle an expected error.

Note: the fetch function returns a Promise itself!

const url="//jsonplaceholder.typicode.com/posts";
const getData=(url)=>{return fetch(url);}
getData(url).then(data=> data.json()).then(result=> console.log(result));

Now if you log your console it will return an array of data.

Rest parameter and Spread operator

The rest parameters are used to get the argument of an array, and return a new array.

The spread operator has the same syntax as the rest parameter, but the spread operator takes the Array itself and not just the arguments. We can use the Spread parameter to get the values of an Array, instead of using a for loop or any other method.

const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?']; const Func=(...anArray)=>{ return anArray; } console.log(Func(arr)); //output ["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"

Classes

Classes are the core of object oriented programming (OOP). They make your code more secure and encapsulated. Using classes gives your code a nice structure and keeps it oriented.

To create a class, use the class keyword followed by the name of the class with two curly brackets.

Now we can access the class methods and properties using the new keyword.

class myClass{ constructor(name,age){ this.name=name; this.age=age; } } const Home= new myClass("said",20); console.log(Home.name)// said

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

Вы можете узнать больше о классахВот.

У ES6 есть и другие удивительные функции - вы можете изучить их здесь.

Вывод

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

Кстати, недавно я работал с сильной группой разработчиков программного обеспечения над одним из моих мобильных приложений. Организация была отличной, и продукт был доставлен очень быстро, намного быстрее, чем у других фирм и фрилансеров, с которыми я работал, и я думаю, что могу честно рекомендовать их для других проектов. Напишите мне, если хотите связаться - [email protected]