Поиск по сайту:

Что такое JavaScript ES6 и чем он отличается?


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

JavaScript имеет множество разновидностей

Oracle имеет торговую марку на термине JavaScript, поэтому фактический стандарт, который реализует современный JavaScript, называется стандартом ECMAScript или ES. Основным стандартом JavaScript является ECMAScript 5 или ES5, выпущенный в 2009 году. Это ванильный JavaScript без каких-либо специальных функций, поддерживаемый везде, даже в IE 9.

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

ES6 важен, в частности, потому, что он знаменует собой начало рестандартизации JavaScript. В настоящее время ECMA ежегодно выпускает новый стандарт. Но ES6 был выпущен через 6 лет после ES5, то есть через 10 лет после ES3, так что это важная веха.

Как использовать синтаксис ES6

ES6 на самом деле поддерживается во многих местах, и основная проблема — это Internet Explorer (как обычно). Таким образом, хотя вы можете просто начать писать в стиле ES6, вы не можете быть уверены, что все браузеры будут вести себя одинаково.

В настоящее время он по-прежнему обычно компилируется в «обычный» синтаксис ES5 с помощью такой утилиты, как Babel. Babel — это компилятор, который преобразует ваш код разработки (написанный на ES6 со всеми его преимуществами) в код, который вы будете запускать на своем рабочем сайте, часто связанный и минимизированный с помощью Webpack.

Вот как это работает: у вас есть среда разработки, в которой вы пишете файлы .js. Вы можете использовать любой причудливый синтаксис ES6, который вам нравится. Вместо того, чтобы запускать их напрямую, вы настраиваете Webpack для загрузки файлов JS с помощью Babel. Часто вам нужно запустить webpack-dev-server, чтобы это происходило автоматически при внесении изменений.

Теперь вместо загрузки index.js вы загружаете bundle.js, который содержит весь ваш код. Это также имеет большое преимущество, позволяя вам использовать модули NPM в вашем JS, хотя это может сделать ваш код громоздким, если вы добавите слишком много (хотя веб-пакет довольно хорош в минимизации).

Что нового

Здесь есть что распаковать, поэтому в этой статье, конечно, не все. Чтобы увидеть полный список, вы можете просмотреть эту таблицу совместимости, которая также включает ES2016 и более новые функции.

В общем, если Babel может скомпилировать что-то в соответствии со старой спецификацией JS, вероятно, его можно безопасно использовать в разработке. Если это не так, и вас не волнуют 3% населения, использующие IE 11, он, вероятно, поддерживается в большинстве браузеров, при условии, что это не супер новая функция.

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

Вместо того, чтобы печатать:

arr.map(function (d) {
  return d + 1;
});

Вместо этого вы можете заменить ключевое слово function стрелкой после круглых скобок:

arr.map((d) => {
  return d + 1;
});

Кроме того, вам не нужны круглые скобки, если вы передаете только один аргумент. И вам не нужны скобки и инструкция return, если вы возвращаете только одно значение:

arr.map(d => d + 1);

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

Упрощенное создание объектов и массивов с деструктурированием

Вместо того, чтобы писать:

var type = "123", color = "blue"
var obj = { type: type, color: color }

Вы можете просто опустить имена ключей, и они будут автоматически установлены на имена переменных:

var obj = { type, color }

Кроме того, это работает наоборот, называется назначением деструктурирования:

var { type, color } = obj

Причудливым побочным эффектом деструктурирования является синтаксис ... , который действует как «и т. д.». и присваивает оставшуюся часть массива или объекта переменной:

var { type, ...rest } = obj

//rest == { color: "blue" }

И это также работает наоборот, что приводит к расширению и сглаживанию массивов:

var arr1 = ["a", "b"], arr2 = ["c", "d"]
var flat = [...a, ...b, "e"]

//flat = ["a", "b", "c", "d", "e"]

Деструктуризация — это гораздо больше, чем описано здесь.

Классы

В JavaScript теперь есть классы. Вот как это работает, из документации Mozilla:

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

Как видите, он похож на другие объектно-ориентированные языки, но не совсем. Как заявляет Mozilla, эта новая система является «прежде всего синтаксическим сахаром по сравнению с существующим в JavaScript наследованием на основе прототипов» и на самом деле не делает JS объектно-ориентированным. Но все же приятно иметь.

Кроме того, синтаксис класса поддерживает статические методы и свойства, а также дочерние классы, но дочерний класс не может наследовать от нескольких родителей.

Изменения в аргументах функции

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

var func = (a, b = "default") => {  }

Если бы вы вызвали func без указания двух аргументов, он принял бы значение по умолчанию.

Кроме того, функциям теперь можно задавать неопределенное количество аргументов в виде массива, что называется синтаксисом остальных параметров функции:

var func = (a, b, c, ...rest) => {  }

Параметр rest будет установлен в массив остальных параметров функции или undefined, если присутствует не более именованных параметров.

пусть и const

Команда let – это замена var , которая предоставляет область действия блока. Вот как переменные обычно работают в JS:

var x = 0; //global variable

function someFunc() {
  
  var y = 3; //local variable

}

Глобальная переменная может использоваться в функции, но локальная переменная функции не может использоваться вне функции. Именно это позволяет вам называть ваши переменные «i», «tmp», «x» и «count» все время и уйти с ним.

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

var x = 0

{
  let x = 2
    //x == 2
}
// x == 0 again

Синтаксис let по существу позволяет вам изменять содержимое x внутри этого блока (будь то функция, блок catch или такой явный блок) и сбрасывать его при выходе из блока. Это особенно полезно для временных переменных «count», поскольку каждый блок будет иметь разную область действия. Область действия наследуется дочерними блоками, но может быть дополнительно вложена и снова изменена.

Синтаксис const довольно прост. Замените var на const, и ваша переменная теперь доступна только для чтения. Если вы попытаетесь написать ему, он выдаст:

Uncaught TypeError: Assignment to constant variable.

Дать вам понять, что вы пытаетесь сделать то, чего не должны. Это не имеет никакой цели, кроме как хорошее напоминание при кодировании, чтобы предотвратить некоторые ошибки.