Home-theater-designers
ES6 относится к версии 6 языка программирования ECMA Script. ECMA Script - это стандартизированное имя для JavaScript, а версия 6 - это следующая версия после версии 5, выпущенной в 2011 году. Это серьезное усовершенствование языка JavaScript, в которое добавлены многие другие функции, призванные упростить крупномасштабную разработку программного обеспечения. .
ECMAScript, или ES6, был опубликован в июне 2015 года. Впоследствии он был переименован в ECMAScript 2015. Поддержка всего языка веб-браузером еще не завершена, хотя поддерживаются основные части. Основные веб-браузеры поддерживают некоторые функции ES6. Однако можно использовать программное обеспечение, известное как игрок для преобразования кода 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.)
До этого обновления переменные в JavaScript имели функциональную область видимости. То есть, когда вам нужна была новая область видимости для переменной, вы должны были объявить ее внутри функции.
Переменные сохраняют значение до конца блока. После блока восстанавливается значение во внешнем блоке (если есть).
сколько вам должно быть лет, чтобы пользоваться PayPal
{
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 представляет стрелочные функции в JavaScript. (Они похожи на традиционные функции, но имеют более простой синтаксис.) В следующем примере Икс это функция, которая принимает параметр, называемый к , и возвращает его приращение:
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 или оболочка. Шаблон строки заключен в символы обратной галочки ( `` ). В отличие от одинарных кавычек ( ' ) или двойные кавычки ( ' ) обозначают нормальные строки. Выражения внутри шаблона выделяются между $ { а также } . Вот пример:
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.
Далее: знакомство с несколько важных методов массива JavaScript и создание сценария голосовой анимации робота! Также узнайте об отличной интерфейсной среде под названием Vue.
Кредит изображения: micrologia / Depositphotos
Делиться Делиться Твитнуть Эл. адрес Canon против Nikon: какой бренд камеры лучше?Canon и Nikon - два крупнейших имени в индустрии фотоаппаратов. Но какой бренд предлагает лучшую линейку камер и объективов?
почему мошенники хотят подарочные картыЧитать далее Похожие темы
- Программирование
- JavaScript
Подписывайтесь на нашу новостную рассылку
Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!
Нажмите здесь, чтобы подписаться