От автора: React — отличная и популярная библиотека JavaScript для создания пользовательских интерфейсов. Он известен своей реактивностью, виртуальной DOM и компонентами. Однако, прежде чем вы начнете изучать React, вам необходимо хорошо разбираться в JavaScript и его функциях. Итак, вам нужно хорошо разбираться в этих основах, потому что они значительно облегчат вам работу с React.
В этой статье мы дадим вам общее представление обо всех этих функциях, которые вам нужно освоить, прежде чем думать о React. Давайте приступим к делу.
1. Let и Const
Ключевое слово let- одна из полезных функций ES6 в JavaScript. Оно используется для объявления переменных как ключевое слово var. Но ключевое слово let имеет область видимости блока, а это означает, что оно не может быть доступно за пределами этой области.
Взгляните на следующий пример:
{ let x = 2; //Block scope.
}
// x can NOT be used hereВот еще один пример для сравнения с ключевым словом var:
var x = 10;
// Here x is 10
{ let x = 2; // Block scope. var y = 5; // Here x is 2 // Here y is 5
}
// Here x is 10
// Here y is 5То же самое относится к ключевому слову const, у него также есть область видимости блока, но оно используется для постоянных значений, что означает, что его нельзя изменить, кроме константных объектов и массивов.
// You can create a const object:
const car = {type:"Fiat", model:"500", color:"white"}; // You can change a property:
car.color = "red"; // You can add a property:
car.owner = "Johnson";// You can create a constant array:
const cars = ["Saab", "Volvo", "BMW"]; // You can change an element:
cars[0] = "Toyota"; // You can add an element:
cars.push("Audi");Но нельзя переназначить постоянный объект или массив:
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"}; // ERROR const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"]; // ERRORВ отличие от ключевого слова var, переменные с let и const не поднимаются.
2. Стрелочные функции
Стрелочные функции — это новая функция ES6, которая почти широко используется в современных кодовых базах, поскольку она делает код кратким и читаемым. Эта функция позволяет нам писать функции с использованием более короткого синтаксиса. Это синтаксис функции, который вам нужно знать, потому что его используют многие люди.
Взгляните на пример ниже:
// regular function
const testFunction = function() { // content..
} // arrow function
const testFunction = () => { // content..
}Как вы можете видеть, вам просто нужно удалить ключевое слово function и добавить символ жирной стрелки => после ().
Скобки по-прежнему используются для передачи параметров функции, и если у вас есть только один параметр, вы можете опустить скобки.
const testFunction = (firstName, lastName) => { return firstName+' '+lastName;
} const singleParam = firstName => { return firstName;
}Если ваша стрелочная функция — это только одна строка, вы можете возвращать значения без использования ключевого слова return и фигурных скобок {}.
const testFunction = () => 'hello there.'; testFunction(); //hello there.
3. Назначение деструктуризации для массивов и объектов
Один из наиболее полезных новых синтаксисов, представленных в ES6, деструктурирующее присваивание — это просто копирование части объекта или массива и помещение их в именованные переменные. Простой пример:
// ES5.
const user = { name: 'John Doe', age: 34 }; const name = user.name; // name = 'John Doe'
const age = user.age; // age = 34 // Here's an equivalent assignment statement using the ES6 destructuring syntax: const { name, age } = user;
// name = 'John Doe', age = 34Здесь будут созданы переменные name и age и им будут присвоены значения соответствующие значениям из объекта user. Вы можете видеть, насколько это чище.
Вы также можете использовать назначение деструктуризации для присвоения переменных из объектов. Вот пример использования предыдущего объекта user:
const { name: userName, age: userAge } = user;
// userName = 'John Doe', userAge = 34Деструктуризация работает и с массивами, только вместо ключей объекта используется индекс:
const numbers = [1,2,3,4,5]; const [one, two] = numbers; // one = 1, two = 2
4. Функции высшего порядка
Любая функция, которая принимает другую функцию в качестве аргумента, называется функцией высшего порядка. JavaScript предоставляет несколько полезных функций высшего порядка для простого управления данными. Вот некоторые из важных функций, которые вам следует знать. Метод карты, который помогает передать функцию для преобразования каждого элемента в массиве.
const numbers = [1, 2, 3]; const doubles = numbers.map(num => num * 2) //[2, 4, 6]
Фильтр получает набор данных, и вы можете передать условную функцию, которая возвращает подмножество коллекции.
const numbers = [1, 2, 3]; const isGreaterThanOne = numbers.filter(num => num > 1) //[2, 3]
Метод reduce, который принимает функцию с двумя аргументами (аккумулятор и элемент). Мы также можем вернуть общее количество всех элементов массива, используя метод reduce, как мы это делаем в примере ниже.
const numbers = [1, 2, 3]; const mySum = numbers.reduce((accumulator, num) => accumulator + num) // returns: 6.
5. Классы ES6
В современном JavaScript классы — это шаблон для создания объектов. Они построены на прототипах и обеспечивают простоту написания функций-конструкторов для объектно-ориентированного программирования на JavaScript.
Чтобы создать класс JavaScript, вам нужно будет использовать ключевое слово class и методы конструктора внутри него. Взгляните на пример ниже:
class Car { constructor(name, year) { this.name = name; this.year = year; }
}Теперь вы можете создать новый объект с именем «myCar», используя этот класс в примере ниже:
let myCar = new Car("Ferrari", 2020);Наследование класса
Класс, созданный с помощью наследования класса, наследует все методы другого класса. Чтобы создать наследование класса, используйте ключевое слово extends. Посмотрите на приведенный ниже пример, где мы создадим класс с именем «Model», который унаследует методы класса «Car».
class Car { constructor(brand) { this.carname = brand; } present() { return 'I have a ' + this.carname; }
} class Model extends Car { constructor(brand, mod) { super(brand); this.model = mod; } show() { return this.present() + ', it is a ' + this.model; }
} let myCar = new Model("Ford", "Mustang");Метод super() относится к родительскому классу. Вызывая его, мы получаем доступ ко всем свойствам и методам класса Car (родительского класса). Как видите, очень важно знать классы. Вы будете часто использовать их в React.
6. Модули ES6
Модульная система ES6 позволяет JavaScript импортировать и экспортировать файлы. Это способ легко обмениваться кодом между файлами JavaScript, и это первое, что вы будете использовать в React.
Создайте скрипт модуля
Чтобы использовать модули JavaScript, вы должны сообщить браузеру, что вы используете модули внутри файла JavaScript. Вы можете добиться этого, поместив приведенный ниже скрипт в тег заголовка вашего HTML.
<script type="module" src="filename.js"></script>
Допустим, вы хотите использовать блок кода в нескольких разных файлах. Вы можете добиться этого, экспортируя этот блок кода, а затем импортировав его в другие файлы. Взгляните на пример ниже, где мы экспортировали функцию добавления.
export const add = (x, y) => { return x + y;
} // OR.
const add = (x, y) => { return x + y;
} export { add };Теперь вы можете импортировать этот экспортированный код в другой файл, чтобы использовать его. Вот пример:
import { add } from './math_functions.js';7. Оператор распространения
Оператор распространения — одна из важных и полезных функций, добавленных в JavaScript. По сути, он расширяет значение итеративного объекта в JavaScript. Это также позволяет нам расширять массивы и другие выражения в местах, где ожидается несколько параметров или элементов.
Вот пример, в котором мы объединили два объекта с помощью оператора распространения:
let employee = { name:'Jhon',lastname:'Doe'};
const salary = { grade: 'A', basic: '$3000' }; const summary = {...employee, ...salary};
console.log(summary); // Prints: {name: "Jhon", lastname: "Doe", grade: "A", basic: "$3000"}Заключение
Как видите, после понимания всех этих функций JavaScript вы легко сможете изучить любой фреймворк. Однако это не значит, что вам нужно знать все о JavaScript, чтобы начать писать приложение React, но эти концепции упростят вам задачу. Спасибо, что прочитали эту статью, надеюсь, вы нашли ее полезной.
Автор: Mehdi Aoussiad
Источник: medium.com
Редакция: Команда webformyself.