ES6 относится к версии 6 языка программирования ECMA Script. ECMA Script — это стандартизированное имя для JavaScript
и версия 6 является следующей версией после версии 5, которая была выпущена в 2011 году. Это значительное улучшение языка JavaScript и добавлено много других функций, предназначенных для облегчения крупномасштабной разработки программного обеспечения.
ECMAScript, или ES6, был опубликован в июне 2015 года. Впоследствии он был переименован в ECMAScript 2015. Поддержка полного языка в веб-браузере еще не завершена, хотя основные части поддерживаются. Основные веб-браузеры поддерживают некоторые функции ES6. Тем не менее, можно использовать программное обеспечение, известное как transpiler конвертировать код ES6 в ES5, который лучше поддерживается в большинстве браузеров.
Давайте теперь посмотрим на некоторые основные изменения, которые ES6 вносит в JavaScript.
1. Константы
Наконец концепция констант добралась до JavaScript! Константы — это значения, которые могут быть определены только один раз (для каждой области, области действия, поясненной ниже). Переопределение в той же области вызывает ошибку.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
Вы можете использовать константу везде, где вы можете использовать переменную (вар).
console.log("Value is: " + joe * 2)
// prints: 8
2. Блок-переменные и функции
Добро пожаловать в 21 век, JavaScript! В ES6 переменные объявлены с использованием позволять (и константы, описанные выше) следуют правилам видимости блока, как в Java, C ++ и т. д.
Перед этим обновлением переменные в JavaScript были ограничены функциями. То есть, когда вам нужна новая область видимости для переменной, вы должны были объявить ее внутри функции.
Переменные сохраняют значение до конца блока. После блока значение во внешнем блоке (если есть) восстанавливается.
{
let x = "hello";
{
let x = "world";
console.log("inner block, x = " + x);
}
console.log("outer block, x = " + x);
}
// prints
inner block, x = world
outer block, x = hello
Вы также можете переопределять константы внутри таких блоков.
{
let x = "hello";
{
const x = 4.0;
console.log("inner block, x = " + x);
try {
x = 3.5
} catch(err) {
console.error("inner block: " + err);
}
}
x = "world";
console.log("outer block, x = " + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world
3. Стрелка Функции
ES6 содержит новый синтаксис для определения функций с помощью стрелки. В следующем примере Икс это функция, которая принимает параметр с именем , и возвращает его приращение:
var x = a => a + 1;
x(4) // returns 5
Используя этот синтаксис, вы можете легко определять и передавать аргументы в функции.
Использование с для каждого():
[1, 2, 3, 4].forEach(a => console.log(a + " => " + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
Определите функции, принимающие несколько аргументов, заключив их в скобки:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. Параметры функции по умолчанию
Параметры функции теперь могут быть объявлены со значениями по умолчанию. В следующих, Икс это функция с двумя параметрами а также б. Второй параметр б дается значение по умолчанию 1.
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
В отличие от других языков, таких как C ++ или python, параметры со значениями по умолчанию могут появляться перед параметрами без значений по умолчанию. Обратите внимание, что эта функция определяется как блок с вернуть значение в качестве иллюстрации.
var x = (a = 2, b) => { return a * b }
Однако аргументы сопоставляются слева направо. В первом вызове ниже, б имеет неопределенное значение, даже если был объявлен со значением по умолчанию. Переданный аргумент соответствует скорее, чем б. Функция возвращает NaN.
x(2)
// returns NaN
x(1, 3)
// returns 3
Когда вы явно передаете не определено в качестве аргумента используется значение по умолчанию, если оно есть.
x(undefined, 3)
// returns 6
5. Параметры остальных функций
При вызове функции иногда возникает необходимость передать произвольное количество аргументов и обработать эти аргументы внутри функции. Эта потребность обрабатывается параметры функции покоя синтаксис. Он обеспечивает способ захвата остальных аргументов после определенных аргументов с использованием синтаксиса, показанного ниже. Эти дополнительные аргументы фиксируются в массиве.
var x = function(a, b, ...args) { console.log("a = " + a + ", b = " + b + ", " + args.length + " args left"); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left
6. Струнные шаблоны
Строковый шаблон относится к интерполяции переменных и выражений в строки с использованием синтаксиса, такого как perl или shell. Шаблон строки заключен в символы обратной галочки (`). В отличие от одинарных кавычек («) или двойные кавычки («) указать нормальные строки. Выражения внутри шаблона выделены между $ { а также }. Вот пример:
var name = "joe";
var x = `hello ${name}`
// returns "hello joe"
Конечно, вы можете использовать произвольное выражение для оценки.
// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns "hello 20"
Этот синтаксис для определения строк может также использоваться для определения многострочных строк.
var x = `hello world
next line`
// returns
hello world
next line
7. Свойства объекта
ES6 имеет упрощенный синтаксис создания объектов. Посмотрите на пример ниже:
var x = "hello world", y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
Вычисленные имена свойств тоже довольно изящны. В ES5 и более ранних версиях для установки свойства объекта с вычисляемым именем вам нужно было сделать это:
var x = "hello world", y = 25
var a = {x: x, y: y}
a["joe" + y] = 4
// a is now:
{x: "hello world", y: 25, joe25: 4}
Теперь вы можете сделать все это в одном определении:
var a = {x, y, ["joe" + y]: 4}
// returns
{x: "hello world", y: 25, joe25: 4}
И, конечно, чтобы определить методы, вы можете просто определить его с именем:
var a = {x, y, ["joe" + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. Формальный синтаксис определения класса
Определение класса
И наконец, JavaScript получает формальный синтаксис определения класса. Хотя это всего лишь синтаксический сахар по сравнению с уже доступными классами на основе прототипов, он служит для повышения ясности кода. Это означает, что это не добавляет новую объектную модель или что-либо еще такое.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
Объявление методов
Определить метод тоже довольно просто. Там нет сюрпризов.
class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669
Добытчики и сеттеры
Теперь у нас также есть геттеры и сеттеры с простым обновлением синтаксиса. Давайте переопределим Круг класс с площадь имущество.
class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669
Давайте теперь добавим сеттер. Уметь определять радиус как устанавливаемое свойство, мы должны переопределить фактическое поле _радиус или что-то, что не будет конфликтовать с сеттером. В противном случае мы сталкиваемся с ошибкой переполнения стека.
Вот переопределенный класс:
class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255
В общем, это хорошее дополнение к объектно-ориентированному JavaScript.
наследование
В дополнение к определению классов с использованием учебный класс ключевое слово, вы также можете использовать продолжается Ключевое слово для наследования от суперклассов. Давайте посмотрим, как это работает на примере.
class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483
И это было краткое введение в некоторые функции JavaScript ES6.
Следующий шаг: создание сценариев голосовой анимации робота
!
Кредит изображения: micrologia / Depositphotos
