|
@@ -0,0 +1,154 @@
|
|
|
+# Синтаксический сахар в ES6.
|
|
|
+
|
|
|
+
|
|
|
+*Синтаксический сахар* - ряд усовершенствований в синтаксисе языка, не несущих семантического смысла. Обычно синтаксический сахар легко заменяется более пространным и менее прозрачным синтаксисом, и при этом код работает так же.
|
|
|
+Отличия между **ES5** и **ES6** в-основном в сахаре и заключаются.
|
|
|
+
|
|
|
+## Стрелочные функции.
|
|
|
+
|
|
|
+Синтаксически это `=>`, параметры до этой пары символов, выражение-результат функции - после:
|
|
|
+
|
|
|
+```javascript
|
|
|
+var sqr = x => x*x //один параметр, скобки не нужны
|
|
|
+alert(sqr(2))
|
|
|
+
|
|
|
+var mul = (x,y) => x*y //два параметра - нужны скобки
|
|
|
+alert(mul(2,5))
|
|
|
+
|
|
|
+var objectCreator = (x,y) => ({x, y}) //создает объект {x: x, y: y}. Если забыть скобки - то JS воспримет {x,y} как блок кода, и без return вернет undefined
|
|
|
+console.log(objectCreator(4,5))
|
|
|
+
|
|
|
+var longFunc = (x,y) => { //почти обычная функция
|
|
|
+ let result = prompt(x,y)
|
|
|
+ return result;
|
|
|
+}
|
|
|
+
|
|
|
+longFunc('check', 'text')
|
|
|
+
|
|
|
+({arrowFuncMaker: function(){
|
|
|
+ return () => {console.log(this), this.oldSchoolSklerotikMaker()()}
|
|
|
+ },
|
|
|
+ oldSchoolSklerotikMaker: function(){
|
|
|
+ return function(){
|
|
|
+ console.log(this)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}).arrowFuncMaker()() //стрелочные функции помнят this на момент создания.
|
|
|
+```
|
|
|
+
|
|
|
+Свойства стрелочных функций:
|
|
|
+- Они анонимные. Синтаксис не предусматривает имени функции.
|
|
|
+- Они помнят `this`.
|
|
|
+
|
|
|
+В целом стрелочные функции могут быть заменены следующим синтаксисом **ES5**:
|
|
|
+
|
|
|
+```javascript
|
|
|
+var func = (function(x, y, z){
|
|
|
+ console.log(this)
|
|
|
+ return x + y + z
|
|
|
+}).bind(this) //bind прибивает this при объявлении функции
|
|
|
+```
|
|
|
+
|
|
|
+## Параметры по умолчанию.
|
|
|
+
|
|
|
+Знакомы некоторым по другим языкам:
|
|
|
+
|
|
|
+```javascript
|
|
|
+var pow = sqr = (x, power = 2) => Math.pow(x, power)
|
|
|
+console.log(pow(2,5))
|
|
|
+console.log(sqr(2)) //квадрат по умолчанию
|
|
|
+```
|
|
|
+
|
|
|
+В **ES5** для этого обычно использовали проверку на `undefined`:
|
|
|
+```javascript
|
|
|
+var pow = sqr = function(x, power){
|
|
|
+ return Math.pow(x, power || 2)
|
|
|
+ }
|
|
|
+console.log(pow(2,5))
|
|
|
+console.log(sqr(2)) //квадрат по умолчанию
|
|
|
+```
|
|
|
+
|
|
|
+## rest/spread `...`
|
|
|
+
|
|
|
+Теперь можно, при вызове указать массив в качестве параметров, или же, наоборот, получить параметры как массив:
|
|
|
+
|
|
|
+```javascript
|
|
|
+var func = function(a,b,...rest){
|
|
|
+ console.log(a,b,rest,arguments)
|
|
|
+}
|
|
|
+
|
|
|
+func(1,2,3)
|
|
|
+func(...[1,2,3,4,5])
|
|
|
+```
|
|
|
+
|
|
|
+Подобные возможности в **ES5** реализуются через `arguments` и `apply`
|
|
|
+
|
|
|
+## Литералы объектов
|
|
|
+
|
|
|
+```javascript
|
|
|
+ var name = 'John'
|
|
|
+var age = Math.round(Math.random()*100)
|
|
|
+var obj = {
|
|
|
+ name, //name: name
|
|
|
+ ["a" + 'ge']: age, //выражение в ключе,
|
|
|
+ greet() {
|
|
|
+ alert(this.name + ', ' + this.age)
|
|
|
+ }
|
|
|
+}
|
|
|
+obj.greet()
|
|
|
+```
|
|
|
+
|
|
|
+## Деструктуризация
|
|
|
+
|
|
|
+**Деструктуризация** позволяет доставать значения полей объектов и массивов по нескольку за одну операцию и избавляет вас от заведения временной переменной для хранения массива или объекта:
|
|
|
+```javascript
|
|
|
+var [a,b,c] = [1,2,3] //создается три переменных из массива
|
|
|
+var {rand1: x, rand2: y, rand3: z} = {rand1: Math.random(), rand2: Math.random(), rand3: Math.random()}
|
|
|
+```
|
|
|
+
|
|
|
+## Восьмеричные и двоичные литералы
|
|
|
+```javascript
|
|
|
+console.log(0b1010)
|
|
|
+console.log(0777)
|
|
|
+console.log(0o555)
|
|
|
+```
|
|
|
+
|
|
|
+## `for .. of`
|
|
|
+
|
|
|
+Работает как `for in` (почти), но перебирает *значения*, а не *ключи*:
|
|
|
+
|
|
|
+```javascript
|
|
|
+for (let word of ['foo','bar']){
|
|
|
+ console.log(word)
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+## Шаблонизация строк `` `
|
|
|
+
|
|
|
+Символ `` ` (*backtick*, обратная кавычка, находится на `Ё`) позволяет вставить выражение в строку без использования конкатенации:
|
|
|
+
|
|
|
+```javascript
|
|
|
+alert(`Привет, ${prompt('Имя?')}`)
|
|
|
+```
|
|
|
+
|
|
|
+## ES6 ООП.
|
|
|
+
|
|
|
+В синтаксисе **ES6** появились *классы* как их привыкли видеть в других языках:
|
|
|
+
|
|
|
+```javascript
|
|
|
+class Parent {
|
|
|
+ someMethod(){
|
|
|
+ console.log('Parent method')
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class Child extends Parent {
|
|
|
+ someMethod(){
|
|
|
+ console.log('Child method')
|
|
|
+ super.someMethod()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+let child = new Child()
|
|
|
+child.someMethod()
|
|
|
+```
|