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

1656633981 javascript es6 – pishite menshe delajte bolshe

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

const и пусть

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

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

e4r4Zg1XTz395qj9A5hOpHMK0mzH0zwxitK9

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

km-LHiezWRHQa0aakmKyPrgd53riDwKnrSUa

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

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

Функции стрелок

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

CAtsmTIStmCZaK-7ej4vvuHzY-aqfNhRhevc

Используй это:

jaJg1ODAb7FcbQbWaQ8FwegEmTD4IsTtx7Of

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

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

2G7fWO8OuCNbdMXa7wiRxoncLZshsRxZ0WYR

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

Литералы шаблона

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

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

pyiP612uJAXA9gvXK0fnmxc9tb6J0WRSB3Nj

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

O1aAY7ehL3Vtvej0YXuZVXbN3LjHX2-WXzOG

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

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

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

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

Посмотрите на этот пример:

qFmJ6F0gOBdVl4kJ7sFhIqHaGIZx6iehhoML

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

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

-RczdieWIpZVTLYih1PD4ZJdq2UeurbiMBHu

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

Уничтожение массивов и объектов

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

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

rsZwpm7Ah7OyThsTpkBsaRUsCwjQBSGCGEfG

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

rrKo0LFQOblpaAIlywUGrtD8keMqwywZ5MXR

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

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

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

zLZ3XTvYSXB3UiRg2W05YXGcHa6GJGqEQJLa

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

JUcyaqc4T9qdXgQbYCqfbi10THAatzHh64ts

Импорт и экспорт

Использование import и export в вашем приложении JavaScript делает его более мощным. Они позволяют создавать отдельные и повторно используемые компоненты.

Если вы знакомы с любым фреймворком JavaScript MVC, вы увидите, что они используют import и export работать с компонентами большую часть времени. Итак, как они действительно работают?

Это просто! export позволяет экспортировать модуль для использования в другом компоненте JavaScript. Мы используем import чтобы импортировать этот модуль, чтобы использовать его в нашем компоненте.

К примеру, у нас есть два файла. Первый назван detailComponent.js а второй назван homeComponent.js.

в detailComponent.js мы собираемся экспортировать detail функция.

3K3KNLMTvnsVpk2EEx100lAURNgW7fXzBauC

И если мы хотим использовать эту функцию в homeComponent.js, мы просто используем import.

IB6KSO6rK-574uNXuX5tDUIly6NkqIsT7cpZ

Если мы хотим импортировать более одного модуля, мы просто берём их в фигурные скобки.

yeJzCdTfkuZEd-PL9oLX7DWO-cukNHKrLt-5

Так круто, не правда ли?!

Обещания

Обещания – это новая функция ES6. Это метод написания асинхронного кода. Его можно использовать, например, когда мы хотим получить данные из API или когда у нас есть функция, для выполнения которой требуется время. Обещания облегчают решение проблемы, поэтому давайте создадим наше первое обещание!

zVsFm1MnCkDU9oPLEmfRhLJiA0dyH1nKCa7C

Если вы зарегистрируете свою консоль, она вернет Promise. Итак, если мы хотим выполнить функцию после получения данных, мы будем использовать Promise. Обещание принимает два параметра: resolve и reject для обработки ожидаемой ошибки

Примечание: функция fetch сама возвращает Promise!

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

Теперь, если вы зарегистрируете свою консоль, она вернет массив данных.

Параметр Rest и оператор Spread

Другие параметры используются для получения аргумента массива и возврата нового массива.

ZGyyj2ByWBRUpEw841VQRKGXPX6KV4aeyRyf
SEt08SKlukqs7SSkDBoRHt-0dc9s2zrEpBDr

Оператор распространения имеет тот же синтаксис, что и параметр rest, но оператор расширения принимает сам массив, а не только аргументы. Мы можем использовать параметр Spread для получения значений массива вместо использования цикла for или любого другого метода.

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?"

Занятия

Классы представляют собой ядро ​​объектно-ориентированного программирования (ООП). Они делают ваш код более безопасным и инкапсулированным. Использование классов предоставляет вашему коду хорошую структуру и поддерживает его ориентацию.

2EGxzbm25W2EtzYv67c-N49DAqTMw01iZ2Ok

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

0K889E -- nHdRPGY1nCVvUzCtAWGkDe8vPfCa

Теперь мы можем получить доступ к class методы и свойства с помощью new ключевое слово.

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

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

rTlJ5DgmaUL1ZCoy1EEKxCt4TK2ihUeWVd-M

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

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

Вывод

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

Кстати, недавно я работал с сильной группой инженеров-программистов над одним из моих мобильных приложений. Организация была превосходной, и продукт был доставлен очень быстро, гораздо быстрее, чем другие фирмы и фрилансеры, с которыми я работал, и я думаю, что я могу честно рекомендовать их для других проектов. Отправьте мне электронное письмо, если хотите связаться — said@devsdata.com.

Добавить комментарий

Ваш адрес email не будет опубликован.