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, чтобы попробовать некоторые из них в действии.