Синтаксический сахар в ES6.

Синтаксический сахар - ряд усовершенствований в синтаксисе языка, не несущих семантического смысла. Обычно синтаксический сахар легко заменяется более пространным и менее прозрачным синтаксисом, и при этом код работает так же. Отличия между ES5 и ES6 в-основном в сахаре и заключаются.

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

Синтаксически это =>, параметры до этой пары символов, выражение-результат функции - после:

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:

var func = (function(x, y, z){
    console.log(this)
    return x + y + z
}).bind(this) //bind прибивает this при объявлении функции

Параметры по умолчанию.

Знакомы некоторым по другим языкам:

var pow = sqr = (x, power = 2) => Math.pow(x, power)
console.log(pow(2,5))
console.log(sqr(2)) //квадрат по умолчанию

В ES5 для этого обычно использовали проверку на undefined:

var pow = sqr = function(x, power){ 
                    return Math.pow(x, power || 2)
                }
console.log(pow(2,5))
console.log(sqr(2)) //квадрат по умолчанию

rest/spread `...`

Теперь можно, при вызове указать массив в качестве параметров, или же, наоборот, получить параметры как массив:

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

Литералы объектов

    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()

Деструктуризация

Деструктуризация позволяет доставать значения полей объектов и массивов по нескольку за одну операцию и избавляет вас от заведения временной переменной для хранения массива или объекта:

var [a,b,c] = [1,2,3] //создается три переменных из массива
var {rand1: x, rand2: y, rand3: z} = {rand1: Math.random(), rand2: Math.random(), rand3: Math.random()}

Восьмеричные и двоичные литералы

console.log(0b1010)
console.log(0777)
console.log(0o555)

`for .. of`

Работает как for in (почти), но перебирает значения, а не ключи:

for (let word of ['foo','bar']){
    console.log(word)
}

Шаблонизация строк `

Символ ` (backtick, обратная кавычка, находится на Ё) позволяет вставить выражение в строку без использования конкатенации:

alert(`Привет, ${prompt('Имя?')}`)

12Sugar.md 4.7 KB Постоянная ссылка История Исходник