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

ES6 JavaScript.

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

JavaScript имеет много вкусов

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

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

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

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

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

Что нового

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

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

Стрелка Функции

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

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

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

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

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

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.

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *