7 функций JavaScript, которые нужно знать, прежде чем изучать React

От автора: React — отличная и популярная библиотека JavaScript для создания пользовательских интерфейсов. Он известен своей реактивностью, виртуальной DOM и компонентами. Однако, прежде чем вы начнете изучать React, вам необходимо хорошо разбираться в JavaScript и его функциях. Итак, вам нужно хорошо разбираться в этих основах, потому что они значительно облегчат вам работу с React.

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

1. Let и Const

Ключевое слово let- одна из полезных функций ES6 в JavaScript. Оно используется для объявления переменных как ключевое слово var. Но ключевое слово let имеет область видимости блока, а это означает, что оно не может быть доступно за пределами этой области.

Взгляните на следующий пример:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Вот еще один пример для сравнения с ключевым словом var:

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

Но нельзя переназначить постоянный объект или массив:

В отличие от ключевого слова var, переменные с let и const не поднимаются.

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

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

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

Как вы можете видеть, вам просто нужно удалить ключевое слово function и добавить символ жирной стрелки => после ().

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

Если ваша стрелочная функция — это только одна строка, вы можете возвращать значения без использования ключевого слова return и фигурных скобок {}.

3. Назначение деструктуризации для массивов и объектов

Один из наиболее полезных новых синтаксисов, представленных в ES6, деструктурирующее присваивание — это просто копирование части объекта или массива и помещение их в именованные переменные. Простой пример:

Здесь будут созданы переменные name и age и им будут присвоены значения соответствующие значениям из объекта user. Вы можете видеть, насколько это чище.

Вы также можете использовать назначение деструктуризации для присвоения переменных из объектов. Вот пример использования предыдущего объекта user:

Деструктуризация работает и с массивами, только вместо ключей объекта используется индекс:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

4. Функции высшего порядка

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

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

Метод reduce, который принимает функцию с двумя аргументами (аккумулятор и элемент). Мы также можем вернуть общее количество всех элементов массива, используя метод reduce, как мы это делаем в примере ниже.

5. Классы ES6

В современном JavaScript классы — это шаблон для создания объектов. Они построены на прототипах и обеспечивают простоту написания функций-конструкторов для объектно-ориентированного программирования на JavaScript.

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

Теперь вы можете создать новый объект с именем «myCar», используя этот класс в примере ниже:

Наследование класса

Класс, созданный с помощью наследования класса, наследует все методы другого класса. Чтобы создать наследование класса, используйте ключевое слово extends. Посмотрите на приведенный ниже пример, где мы создадим класс с именем «Model», который унаследует методы класса «Car».

Метод super() относится к родительскому классу. Вызывая его, мы получаем доступ ко всем свойствам и методам класса Car (родительского класса). Как видите, очень важно знать классы. Вы будете часто использовать их в React.

6. Модули ES6

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

Создайте скрипт модуля

Чтобы использовать модули JavaScript, вы должны сообщить браузеру, что вы используете модули внутри файла JavaScript. Вы можете добиться этого, поместив приведенный ниже скрипт в тег заголовка вашего HTML.

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

Теперь вы можете импортировать этот экспортированный код в другой файл, чтобы использовать его. Вот пример:

7. Оператор распространения

Оператор распространения — одна из важных и полезных функций, добавленных в JavaScript. По сути, он расширяет значение итеративного объекта в JavaScript. Это также позволяет нам расширять массивы и другие выражения в местах, где ожидается несколько параметров или элементов.

Вот пример, в котором мы объединили два объекта с помощью оператора распространения:

Заключение

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

Автор: Mehdi Aoussiad

Источник: medium.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.