Оглавление:
В этой статье мы дадим вам общее представление обо всех этих функциях, которые вам нужно освоить, прежде чем думать о React. Давайте приступим к делу.
1. Let и Const
Ключевое слово let- одна из полезных функций ES6 в JavaScript. Оно используется для объявления переменных как ключевое слово var. Но ключевое слово let имеет область видимости блока, а это означает, что оно не может быть доступно за пределами этой области.
Взгляните на следующий пример:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
JavaScript { let x = 2; //Block scope. } // x can NOT be used here
1234 | { let x = 2; //Block scope.}// x can NOT be used here |
Вот еще один пример для сравнения с ключевым словом var:
JavaScript 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
12345678910 | 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, у него также есть область видимости блока, но оно используется для постоянных значений, что означает, что его нельзя изменить, кроме константных объектов и массивов.
JavaScript // 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»);
123456789101112131415 | // 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»); |
Но нельзя переназначить постоянный объект или массив:
JavaScript 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
12345 | 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, которая почти широко используется в современных кодовых базах, поскольку она делает код кратким и читаемым. Эта функция позволяет нам писать функции с использованием более короткого синтаксиса. Это синтаксис функции, который вам нужно знать, потому что его используют многие люди.
Взгляните на пример ниже:
JavaScript // regular function const testFunction = function() { // content.. } // arrow function const testFunction = () => { // content.. }
123456789 | // regular functionconst testFunction = function() { // content..} // arrow functionconst testFunction = () => { // content..} |
Как вы можете видеть, вам просто нужно удалить ключевое слово function и добавить символ жирной стрелки => после ().
Скобки по-прежнему используются для передачи параметров функции, и если у вас есть только один параметр, вы можете опустить скобки.
JavaScript const testFunction = (firstName, lastName) => { return firstName+’ ‘+lastName; } const singleParam = firstName => { return firstName; }
1234567 | const testFunction = (firstName, lastName) => { return firstName+’ ‘+lastName;} const singleParam = firstName => { return firstName;} |
Если ваша стрелочная функция — это только одна строка, вы можете возвращать значения без использования ключевого слова return и фигурных скобок {}.
JavaScript const testFunction = () => ‘hello there.’; testFunction(); //hello there.
12 | const testFunction = () => ‘hello there.’;testFunction(); //hello there. |
3. Назначение деструктуризации для массивов и объектов
Один из наиболее полезных новых синтаксисов, представленных в ES6, деструктурирующее присваивание — это просто копирование части объекта или массива и помещение их в именованные переменные. Простой пример:
JavaScript // 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
1234567891011 | // 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:
JavaScript const { name: userName, age: userAge } = user; // userName = ‘John Doe’, userAge = 34
12 | const { name: userName, age: userAge } = user;// userName = ‘John Doe’, userAge = 34 |
Деструктуризация работает и с массивами, только вместо ключей объекта используется индекс:
JavaScript const numbers = [1,2,3,4,5]; const [one, two] = numbers; // one = 1, two = 2
12 | const numbers = [1,2,3,4,5];const [one, two] = numbers; // one = 1, two = 2 |
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
4. Функции высшего порядка
Любая функция, которая принимает другую функцию в качестве аргумента, называется функцией высшего порядка. JavaScript предоставляет несколько полезных функций высшего порядка для простого управления данными. Вот некоторые из важных функций, которые вам следует знать. Метод карты, который помогает передать функцию для преобразования каждого элемента в массиве.
JavaScript const numbers = [1, 2, 3]; const doubles = numbers.map(num => num * 2) //[2, 4, 6]
12 | const numbers = [1, 2, 3];const doubles = numbers.map(num => num * 2) //[2, 4, 6] |
Фильтр получает набор данных, и вы можете передать условную функцию, которая возвращает подмножество коллекции.
JavaScript const numbers = [1, 2, 3]; const isGreaterThanOne = numbers.filter(num => num > 1) //[2, 3]
12 | const numbers = [1, 2, 3];const isGreaterThanOne = numbers.filter(num => num > 1) //[2, 3] |
Метод reduce, который принимает функцию с двумя аргументами (аккумулятор и элемент). Мы также можем вернуть общее количество всех элементов массива, используя метод reduce, как мы это делаем в примере ниже.
JavaScript const numbers = [1, 2, 3]; const mySum = numbers.reduce((accumulator, num) => accumulator + num) // returns: 6.
12 | const numbers = [1, 2, 3];const mySum = numbers.reduce((accumulator, num) => accumulator + num) // returns: 6. |
5. Классы ES6
В современном JavaScript классы — это шаблон для создания объектов. Они построены на прототипах и обеспечивают простоту написания функций-конструкторов для объектно-ориентированного программирования на JavaScript.
Чтобы создать класс JavaScript, вам нужно будет использовать ключевое слово class и методы конструктора внутри него. Взгляните на пример ниже:
JavaScript class Car { constructor(name, year) { this.name = name; this.year = year; } }
123456 | class Car { constructor(name, year) { this.name = name; this.year = year; }} |
Теперь вы можете создать новый объект с именем «myCar», используя этот класс в примере ниже:
JavaScript let myCar = new Car(«Ferrari», 2020);
1 | let myCar = new Car(«Ferrari», 2020); |
Наследование класса
Класс, созданный с помощью наследования класса, наследует все методы другого класса. Чтобы создать наследование класса, используйте ключевое слово extends. Посмотрите на приведенный ниже пример, где мы создадим класс с именем «Model», который унаследует методы класса «Car».
JavaScript 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»);
1234567891011121314151617181920 | 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>
1 | <script type=»module» src=»filename.js»></script> |
Допустим, вы хотите использовать блок кода в нескольких разных файлах. Вы можете добиться этого, экспортируя этот блок кода, а затем импортировав его в другие файлы. Взгляните на пример ниже, где мы экспортировали функцию добавления.
JavaScript export const add = (x, y) => { return x + y; } // OR. const add = (x, y) => { return x + y; } export { add };
12345678910 | export const add = (x, y) => { return x + y;} // OR.const add = (x, y) => { return x + y;} export { add }; |
Теперь вы можете импортировать этот экспортированный код в другой файл, чтобы использовать его. Вот пример:
JavaScript import { add } from ‘./math_functions.js’;
1 | import { add } from ‘./math_functions.js’; |
7. Оператор распространения
Оператор распространения — одна из важных и полезных функций, добавленных в JavaScript. По сути, он расширяет значение итеративного объекта в 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»}
123456 | 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
Источник: webformyself.com