JavaScript Refersher

JavaScript ES6 вышел в 2015 году, и с тех пор прошло довольно много времени. Я просто расскажу о некоторых основных функциях, которые были введены в ES6 и которые важно понимать.

let и const

До ES6 var был ключевым словом де-факто для объявления переменных, используемым в JavaScript. Теперь рекомендуется использовать let и const. Сначала давайте разберемся, что делает var.

var, если она объявлена вне функций, имеет глобальную область видимости. Она поднимается наверх и инициализируется как undefined. Мы также можем повторно объявить переменную. Некоторая проблема заключается в том, что мы можем использовать переменную до инициализации и ожидать ошибки, но получим undefined. Кроме того, переменные, использующие var, могут быть повторно объявлены и использованы для другой цели. Это особенно актуально в больших проектах.

Ниже мы можем ожидать ошибки или забыть инициализировать переменную. Но мы получаем неопределенное значение.

console.log(test);//undefined
var test = "Hi";
Вход в полноэкранный режим Выход из полноэкранного режима

Ниже мы могли неосознанно использовать ту же переменную для другой цели.

var test = "Hi"
var no = 5
if (no == 5) {
    var test = 0;
}
console.log(test);//0
Вход в полноэкранный режим Выход из полноэкранного режима

Также могут возникнуть ситуации, когда мы хотим, чтобы переменная не изменялась (константы). Все эти проблемы решаются с помощью let и const. Приведенная ниже таблица даст вам представление о том, как это делается.

var let const
Область применения Глобальная или функция Блок Блок
Объявление Re Да Нет Нет
Подъемник Да Да Да
Инициализировано Не определено Не инициализировано Не инициализировано
Объявление без инициализации Да Да Нет

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

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

function myDobuleFun(no){
    return no * 2;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Стрелочную функцию можно записать несколькими способами. Давайте рассмотрим их.

const myDoubleFun = (no) => {
    return no * 2;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

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

const myDobuleFun = no => no * 2;
Вход в полноэкранный режим Выйти из полноэкранного режима

Экспорт и импорт (модули)

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

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

//test.js
const test = 10;
export default-test;
Вход в полноэкранный режим Выход из полноэкранного режима

Это импорт по умолчанию, мы можем назвать его как угодно, поскольку существует только один экспорт, обозначенный по умолчанию.

//app.js
import test from './test.js'
import t from './test.js'
Вход в полноэкранный режим Выйти из полноэкранного режима

Ниже мы используем именованные экспорт и импорт. Поскольку их несколько, мы используем именованный импорт.

//util.js
export const pi = 3.14;
export const e = 2.718;
Вход в полноэкранный режим Выход из полноэкранного режима

Ниже мы используем именованный импорт, мы можем импортировать по одному, используя имя или в виде пакета. Мы назвали пакет как bundled, и доступ к импортированным свойствам можно получить через bundled.pi или bundled.e.

//app.js
import {pi} from './util.js'
import {e} from './util.js'
import {pi as math_pi} from './util.js'
import * as bundled from './util.js'
Вход в полноэкранный режим Выход из полноэкранного режима

Операторы Spread и Rest

Оба оператора представлены по адресу …..

Spread используется для разделения элементов массива или свойств объекта.

let no = [1, 2, 3];
let newNo = [...no, 4];//[1, 2, 3, 4]
let newNo = [no, 4];//[[1, 2, 3], 4]
Войти в полноэкранный режим Выход из полноэкранного режима

Rest используется для объединения списка аргументов функции в массив.

const filter = (...args) => {
    return args.filter(e1 => e1 === 1);
}
Войти в полноэкранный режим Выход из полноэкранного режима

Деструктуризация

Используется для извлечения элементов массива или свойств объекта и хранения их в переменных.

[a, b] = ['Hi', 'World'];
console.log(a); //Hi
console.log(b); //World
{name} = {name: 'John', age: 20};
console.log(name)//John
console.log(age)//undefined
Войти в полноэкранный режим Выход из полноэкранного режима

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

Оцените статью
Procodings.ru
Добавить комментарий