Быстрая и практичная шпаргалка по JavaScript от Toptal: ES6 и не только

Константы

пусть против вар

> const ЭЙЛЕР = 2,7182818284
> ЭЙЛЕР = 13
> ЭЙЛЕР
> 2,7182818284

> переменная средняя = 5
> переменная средняя = (средняя + 1) / 2
> средний
> 3
> пусть значение = 'привет, мир'
> пусть значение = 'что нового'
// -> выдает TypeError: Идентификатор 'value' уже объявлен

Предупреждение! Если массив или объект, ссылка остается постоянной . Если константа является ссылкой на объект, вы все равно можете изменить содержимое, но никогда не изменяйте переменную.

> const КОНСТАНТЫ = []
> КОНСТАНТЫ.push(ЭЙЛЕР)
> КОНСТАНТЫ
> [ 2,7182818284 ]
> КОНСТАНТЫ = {'эйлер': 2.7182818284}
> КОНСТАНТЫ
> [ 2,7182818284 ]

Помните о временных мертвых зонах :

> console.log(val) // -> 'не определено'
> переменная знач = 3
> console.log(val) // -> 3

Потому что это эквивалентно:

Двоичная, восьмеричная и шестнадцатеричная запись

> вар вал
> console.log(значение)
> значение = 3
> console.log(значение)

> 0b1001011101 // 605
> 0o6745 // 3557
> 0x2f50a // 193802

Переменные, объявленные с помощью «let/const», не поднимаются:

Новые типы

> console.log(значение)
// -> Выдает ReferenceError
> пусть значение = 3
> console.log(val) // -> 3

Символы, карты, слабые карты и наборы

Функция стрелки

Новые функции с ограниченной областью действия

> setTimeout(() => {
… console.log('отложено')
… }, 1000)

> {
… let cue = «Люк, я твой отец»
… console.log(сигнал)
… }
> Люк, я твой отец

Эквивалент с анонимной функцией

Эквивалент с немедленно вызываемыми функциональными выражениями (IIFE)

> setTimeout (функция () {
… console.log('отложено')
… }.bind(это), 1000)

> (функция () {
… var cue = 'Люк, я твой отец' … console.log(cue) // 'Люк, я –
… }())
> console.log(cue) // Ошибка ссылки

Новинки в обозначениях объектов

Интерполяция строк, благодаря литералам шаблонов

// Вычисляемые свойства
> пусть ключ = новая дата (). GetTime ()
> пусть obj = {[ключ]: «значение» }
> объект
> { '1459958882881': 'значение' }

// Литералы объектов
воздушный шар = {цвет, размер};

// Такой же как
воздушный шар = {
цвет: цвет,
размер: размер

}

// Улучшенные обозначения методов
объект = {
foo (а, б) {…},
бар (х, у) {…}
}

> константное имя = 'Тигр'
> постоянный возраст = 13
> console.log (`Мою кошку зовут ${name}, ей ${age} лет.`)
> Моего кота зовут Тигр, ему 13 лет.

// Мы можем сохранить новые строки…
пусть текст = (`кошка
собака
никелодеон`
)

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

> функция HowAreYou (ответ = 'ok') {
console.log(answer) // возможно , "хорошо"
}

Обещания

Классы, наследование, сеттеры, геттеры

новое обещание ((разрешить, отклонить) => {
request.get(url, (ошибка, ответ,
тело) => {
если (тело) {
разрешить (JSON.parse (тело));
} еще {
решать({});
}
})
}).then(() => { ... })
.catch((ошибка) => бросить ошибку)

// Распараллелить задачи
Обещание.все([
обещание1, обещание2, обещание3
]).тог(() => {
// все задачи выполнены
})

класс Rectangle расширяет форму {
конструктор (id, x, y, w, h) {
супер(ид, х, у)
эта ширина = ш
это.высота = ч
}
// Геттер и сеттер
установить ширину (w) { this._width = w }
получить ширину () { вернуть this._width }
}

класс Circle расширяет форму {
конструктор (id, x, y, радиус) {
супер(ид, х, у)
this.radius = радиус
}
делать_а (х) {
пусть а = 12;
супер.до_а (х + а);
}
статический do_b() { ... }
}
Круг.do_b()

Разрушение массивов

Разрушение объектов

> пусть [a, b, c, d] = [1, 2, 3, 4];
> console.log(а);
> 1
> б
> 2

> пусть люк = { род занятий: 'джедай',
отец: 'энакин' }
> пусть {род занятий, отец} = Лука
> console.log(род занятий, отец)
> Джедай Энакин

Оператор спреда

...Деструктуризируй как босс

// Превратить массивы в разделённые запятыми
// значения и прочее
> регистратор функций (...аргументы) {
console.log('%s аргументов',
аргументы.длина)
args.forEach(console.log)
// аргумент [0], аргумент [1], аргумент [2]
}

> const [кошка, собака, ...рыба] = [
«Шрёдингер», «Лайка», «Немо», «Дори»]
> рыба // -> ['Немо', 'Дори']

Или сделайте лучший толчок

...и деструктуризация в будущем ES7

> пусть обр = [1, 2, 3]
> [...обр, 4, 5, 6]
> [1, 2, 3, 4, 5, 6]

{а, б, ...остальное} = {а: 1, б: 2, в: 3, д: 4}

Асинхронный ES7

Ждите ES7

асинхронная функция Шредингера () {
вернуть новое обещание ((разрешить, отклонить)
=> {
постоянный результат = Math.random> 0,5
setTimeout(() => {
вернуть результат? решить ('живой')
: отклонить('мертвый')
})
})
}

пытаться {
console.log(ждите шредингера())
// -> 'живой'
} поймать (ошибиться) {
console.log(ошибка)
// -> 'мертвый'
}

Экспорт ES7

Импорт ES7

функция экспорта sumTwo (a, b) {
вернуть а + б;
}
экспортная константа EULER = 2,7182818284
пусть вещи = {sumTwo, EULER}
экспортировать { все по умолчанию }

импортировать React из «реагировать»
импортировать { EULER } из './myexports'
импортировать * как материал из './myexports'
// эквивалентно
импортировать данные из './myexports'
// { суммаДва, ЭЙЛЕР }

Генераторы

Они возвращают объекты, реализующие протокол итерации. т.е. у него есть метод next(), который возвращает { value: <some value>, done: <true or false> } .

function* incRand (max) { // Asterisk определяет это как генератор
пока (правда) {
// Приостановить выполнение после yield, возобновить
// когда вызывается next(<что-то>)
// и присвоить <что-то> x
пусть x = yield Math.floor (Math.random () * max + 1);
макс += х;
}
}

> var rng = incRand(2) // Возвращает объект-генератор
> rng.next() // { значение: <между 1 и 2>, готово: ложь }
> rng.next(3) // как указано выше, но между 1 и 5
> rng.next() // NaN, так как 5 + undefined приводит к NaN
> rng.next(20) // Никто снова не ожидал NaN?
> rng.throw(новая ошибка('Неисправимое состояние генератора.'))
// Будет выброшено из yield