{"blocks":[{"type":"paragraph","data":{"text":"Шпаргалка для повседневного использования, содержащая подборку советов по ES2015 [ES6] с примерами. Делитесь своими советами в комментариях! "}},{"type":"header3","data":{"level":3,"text":"var против let / const"}},{"type":"blockquote","data":{"author":"","authorJob":"","fullWidth":false,"quoteMark":false,"withBorder":false,"text":"Кроме var нам теперь доступны 2 новых идентификатора для хранения значений — let и const. В отличие от var, let и const обладают блочной областью видимости."}},{"type":"paragraph","data":{"text":"Пример использования var:"}},{"type":"code","data":{"code":"var snack = 'Meow Mix';\r\n\r\nfunction getFood(food) {\r\n if (food) {\r\n var snack = 'Friskies';\r\n return snack;\r\n }\r\n return snack;\r\n}\r\n\r\ngetFood(false); // undefined","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"А вот что происходит при замене var на let:"}},{"type":"code","data":{"code":"let snack = 'Meow Mix';\r\n\r\nfunction getFood(food) {\r\n if (food) {\r\n let snack = 'Friskies';\r\n return snack;\r\n }\r\n return snack;\r\n}\r\n\r\ngetFood(false); // 'Meow Mix'","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Такое изменение в поведении показывает, что нужно быть осторожным при рефакторинге старого кода, в котором используется var. Простая замена var на let может привести к непредсказуемому поведению программы."}},{"type":"blockquote","data":{"author":"","authorJob":"","fullWidth":false,"quoteMark":false,"withBorder":false,"text":"Примечание: let и const видимы лишь в своём блоке. Таким образом, попытка вызвать их до объявления приведёт к ReferenceError."}},{"type":"code","data":{"code":"console.log(x); // ReferenceError: x is not defined\r\n\r\nlet x = 'hi';","language":"javascript lazy-code"}},{"type":"blockquote","data":{"author":"","authorJob":"","fullWidth":false,"quoteMark":false,"withBorder":false,"text":"Лучшая практика: Оставьте var в legacy-коде для дальнейшего тщательного рефакторинга. При работе с новым кодом используйте let для переменных, значения которых будут изменяться, и const — для неизменных переменных."}},{"type":"header3","data":{"level":3,"text":"Замена немедленно вызываемых функций (IIFE) на блоки (Blocks)"}},{"type":"blockquote","data":{"author":"","authorJob":"","fullWidth":false,"quoteMark":false,"withBorder":false,"text":"Обычно немедленно вызываемые функции используют для ограждения значений в их областях видимости. В ES6 можно создавать блочные области видимости."}},{"type":"code","data":{"code":"(function () {\r\n var food = 'Meow Mix';\r\n}());\r\n\r\nconsole.log(food); // Reference Error","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Пример ES6 Blocks:"}},{"type":"code","data":{"code":"{\r\n let food = 'Meow Mix';\r\n};\r\n\r\nconsole.log(food); // Reference Error","language":"javascript lazy-code"}},{"type":"header3","data":{"level":3,"text":"Стрелочные функции"}},{"type":"paragraph","data":{"text":"Часто при использовании вложенных функций бывает нужно отделить контекст this от его лексической области видимости. Пример приведён ниже:"}},{"type":"code","data":{"code":"function Person(name) {\r\n this.name = name;\r\n}\r\n\r\nPerson.prototype.prefixName = function (arr) {\r\n return arr.map(function (character) {\r\n return this.name + character; // Cannot read property 'name' of undefined\r\n });\r\n};","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Распространённым решением этой проблемы является хранение контекста this в переменной:"}},{"type":"code","data":{"code":"function Person(name) {\r\n this.name = name;\r\n}\r\n\r\nPerson.prototype.prefixName = function (arr) {\r\n var that = this; // Store the context of this\r\n return arr.map(function (character) {\r\n return that.name + character;\r\n });\r\n};","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Также мы можем передать нужный контекст this:"}},{"type":"code","data":{"code":"function Person(name) {\r\n this.name = name;\r\n}\r\n\r\nPerson.prototype.prefixName = function (arr) {\r\n return arr.map(function (character) {\r\n return this.name + character;\r\n }, this);\r\n};","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Или привязать контекст:"}},{"type":"code","data":{"code":"function Person(name) {\r\n this.name = name;\r\n}\r\n\r\nPerson.prototype.prefixName = function (arr) {\r\n return arr.map(function (character) {\r\n return this.name + character;\r\n }.bind(this));\r\n};","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Используя стрелочные функции, лексическое значение this не скрыто, и вышеприведённый код можно переписать так:"}},{"type":"code","data":{"code":"function Person(name) {\r\n this.name = name;\r\n}\r\n\r\nPerson.prototype.prefixName = function (arr) {\r\n return arr.map(character => this.name + character);\r\n};","language":"javascript lazy-code"}},{"type":"blockquote","data":{"author":"","authorJob":"","fullWidth":false,"quoteMark":false,"withBorder":false,"text":"Лучшая практика: используйте стрелочные функции всегда, когда вам нужно сохранить лексическое значение this."}},{"type":"paragraph","data":{"text":"Стрелочные функции также более понятны, когда используются для написания функций, просто возвращающих значение:"}},{"type":"code","data":{"code":"var squares = arr.map(function (x) { return x * x }); // Function Expression","language":"javascript lazy-code"}},{"type":"code","data":{"code":"const arr = [1, 2, 3, 4, 5];\r\nconst squares = arr.map(x => x * x); // Arrow Function for terser implementation","language":"javascript lazy-code"}},{"type":"blockquote","data":{"author":"","authorJob":"","fullWidth":false,"quoteMark":false,"withBorder":false,"text":"Лучшая практика: используйте стрелочные функции вместо функциональных выражений, когда это уместно."}},{"type":"header3","data":{"level":3,"text":"Строки"}},{"type":"paragraph","data":{"text":"С приходом ES6 стандартная библиотека сильно увеличилась. Кроме предыдущих изменений появились строчные методы, такие как .includes() и .repeat()."}},{"type":"header4","data":{"level":4,"text":".includes( )"}},{"type":"code","data":{"code":"var string = 'food';\r\nvar substring = 'foo';\r\n\r\nconsole.log(string.indexOf(substring) > -1);","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Вместо проверки возвращаемого значения > -1 для проверки на наличие подстроки можно использовать .includes(), возвращающий логическую величину:"}},{"type":"code","data":{"code":"const string = 'food';\r\nconst substring = 'foo';\r\n\r\nconsole.log(string.includes(substring)); // true","language":"javascript lazy-code"}},{"type":"header4","data":{"level":4,"text":".repeat( )"}},{"type":"code","data":{"code":"function repeat(string, count) {\r\n var strings = [];\r\n while(strings.length < count) {\r\n strings.push(string);\r\n }\r\n return strings.join('');\r\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"В ES6 всё намного проще:"}},{"type":"code","data":{"code":"// String.repeat(numberOfRepetitions)\r\n'meow'.repeat(3); // 'meowmeowmeow'","language":"javascript lazy-code"}},{"type":"header4","data":{"level":4,"text":"Шаблонные литералы"}},{"type":"paragraph","data":{"text":"Используя шаблонные литералы, мы можем спокойно использовать в строках специальные символы."}},{"type":"code","data":{"code":"var text = \"This string contains \\\"double quotes\\\" which are escaped.\";","language":"javascript lazy-code"}},{"type":"code","data":{"code":"let text = `This string contains \"double quotes\" which don't need to be escaped anymore.`;","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Шаблонные литералы также поддерживают интерполяцию, что делает задачу конкатенации строк и значений:"}},{"type":"code","data":{"code":"var name = 'Tiger';\r\nvar age = 13;\r\n\r\nconsole.log('My cat is named ' + name + ' and is ' + age + ' years old.');","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Гораздо проще:"}},{"type":"code","data":{"code":"const name = 'Tiger';\r\nconst age = 13;\r\n\r\nconsole.log(`My cat is named ${name} and is ${age} years old.`);","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"В ES5 мы обрабатывали переносы строк так:"}},{"type":"code","data":{"code":"var text = (\r\n 'cat\\n' +\r\n 'dog\\n' +\r\n 'nickelodeon'\r\n);","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Или так:"}},{"type":"code","data":{"code":"var text = [\r\n 'cat',\r\n 'dog',\r\n 'nickelodeon'\r\n].join('\\n');","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Шаблонные литералы сохраняют переносы строк:"}},{"type":"code","data":{"code":"let text = ( `cat\r\ndog\r\nnickelodeon`\r\n);","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Шаблонные литералы также могут обрабатывать выражения:"}},{"type":"code","data":{"code":"let today = new Date();\r\nlet text = `The time and date is ${today.toLocaleString()}`;","language":"javascript lazy-code"}},{"type":"header3","data":{"level":3,"text":"Деструктуризация"}},{"type":"paragraph","data":{"text":"Деструктуризация позволяет нам извлекать значения из массивов и объектов (даже вложенных) и помещать их в переменные более удобным способом."}},{"type":"header4","data":{"level":4,"text":"Деструктуризация массивов"}},{"type":"code","data":{"code":"var arr = [1, 2, 3, 4];\r\nvar a = arr[0];\r\nvar b = arr[1];\r\nvar c = arr[2];\r\nvar d = arr[3];","language":"javascript lazy-code"}},{"type":"code","data":{"code":"let [a, b, c, d] = [1, 2, 3, 4];\r\n\r\nconsole.log(a); // 1\r\nconsole.log(b); // 2","language":"javascript lazy-code"}},{"type":"header4","data":{"level":4,"text":"Деструктуризация объектов"}},{"type":"code","data":{"code":"var luke = { occupation: 'jedi', father: 'anakin' };\r\nvar occupation = luke.occupation; // 'jedi'\r\nvar father = luke.father; // 'anakin'","language":"javascript lazy-code"}},{"type":"code","data":{"code":"let luke = { occupation: 'jedi', father: 'anakin' };\r\nlet {occupation, father} = luke;\r\n\r\nconsole.log(occupation); // 'jedi'\r\nconsole.log(father); // 'anakin'","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Подробнее о деструктуризации в JavaScript."}},{"type":"header3","data":{"level":3,"text":"Модули"}},{"type":"paragraph","data":{"text":"До ES6 нам приходилось использовать библиотеки наподобие Browserify для создания модулей на клиентской стороне, и require в Node.js. С ES6 мы можем прямо использовать модули любых типов (AMD и CommonJS)."}},{"type":"header4","data":{"level":4,"text":"Экспорт в CommonJS"}},{"type":"code","data":{"code":"module.exports = 1;\r\nmodule.exports = { foo: 'bar' };\r\nmodule.exports = ['foo', 'bar'];\r\nmodule.exports = function bar () {};","language":"javascript lazy-code"}},{"type":"header4","data":{"level":4,"text":"Экспорт в ES6"}},{"type":"paragraph","data":{"text":"В ES6 мы можем использовать разные виды экспорта."}},{"type":"paragraph","data":{"text":"Именованный экспорт:"}},{"type":"code","data":{"code":"export let name = 'David';\r\nexport let age = 25;","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Экспорт списка объектов:"}},{"type":"code","data":{"code":"function sumTwo(a, b) {\r\n return a + b;\r\n}\r\n\r\nfunction sumThree(a, b, c) {\r\n return a + b + c;\r\n}\r\n\r\nexport { sumTwo, sumThree };","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Также мы можем экспортировать функции, объекты и значения, просто используя ключевое слово export:"}},{"type":"code","data":{"code":"export function sumTwo(a, b) {\r\n return a + b;\r\n}\r\n\r\nexport function sumThree(a, b, c) {\r\n return a + b + c;\r\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"И наконец, можно экспортировать связывания по умолчанию:"}},{"type":"code","data":{"code":"function sumTwo(a, b) {\r\n return a + b;\r\n}\r\n\r\nfunction sumThree(a, b, c) {\r\n return a + b + c;\r\n}\r\n\r\nlet api = {\r\n sumTwo,\r\n sumThree\r\n};\r\n\r\nexport default api;\r\n\r\n/* Which is the same as\r\n * export { api as default };\r\n */","language":"javascript lazy-code"}},{"type":"blockquote","data":{"author":"","authorJob":"","fullWidth":false,"quoteMark":false,"withBorder":false,"text":"Лучшая практика: всегда используйте метод export default в конце модуля. Это чётко покажет, что именно экспортируется, и сэкономит время."}},{"type":"header4","data":{"level":4,"text":"Импорт в ES6"}},{"type":"paragraph","data":{"text":"ES6 предоставляет различные виды импорта. Мы можем импортировать целый файл:"}},{"type":"code","data":{"code":"import 'underscore';","language":"javascript lazy-code"}},{"type":"blockquote","data":{"author":"","authorJob":"","fullWidth":false,"quoteMark":false,"withBorder":false,"text":"Важно заметить, что импортирование всего файла приведёт к исполнению всего кода на внешнем уровне этого файла."}},{"type":"paragraph","data":{"text":"Как и в Python, есть именованный импорт:"}},{"type":"code","data":{"code":"import { sumTwo, sumThree } from 'math/addition';","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Который можно переименовывать:"}},{"type":"code","data":{"code":"import {\r\n sumTwo as addTwoNumbers,\r\n sumThree as sumThreeNumbers\r\n} from 'math/addition';","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Кроме того, можно импортировать пространство имён:"}},{"type":"code","data":{"code":"import * as util from 'math/addition';","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"И наконец, список значений из модуля:"}},{"type":"code","data":{"code":"import * as additionUtil from 'math/addition';\r\nconst { sumTwo, sumThree } = additionUtil;","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Импорт из связывания по умолчанию выглядит так:"}},{"type":"code","data":{"code":"import api from 'math/addition';\r\n// Same as: import { default as api } from 'math/addition';","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Экспортирование лучше упрощать, но иногда можно смешивать импорт по умолчанию с чем-то ещё. Когда мы экспортируем так:"}},{"type":"code","data":{"code":"// foos.js\r\nexport { foo as default, foo1, foo2 };","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Импортировать их можно так:"}},{"type":"code","data":{"code":"import foo, { foo1, foo2 } from 'foos';","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"При импортировании модуля, экспортированного с использованием синтаксиса CommonJS (как в React), можно сделать:"}},{"type":"code","data":{"code":"import React from 'react';\r\nconst { Component, PropTypes } = React;","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Это можно упростить:"}},{"type":"code","data":{"code":"import React, { Component, PropTypes } from 'react';","language":"javascript lazy-code"}},{"type":"blockquote","data":{"author":"","authorJob":"","fullWidth":false,"quoteMark":false,"withBorder":false,"text":"Примечание: экспортируемые значения — это связывания, не ссылки. Поэтому изменение в одном модуле повлечёт за собой изменение в другом."}},{"type":"header3","data":{"level":3,"text":"Параметры"}},{"type":"paragraph","data":{"text":"В ES5 было несколько способов обработки функций со значениями по умолчанию, неопределёнными аргументами и именованными параметрами. В ES6 всё это реализуется, причём с понятным синтаксисом."}},{"type":"header4","data":{"level":4,"text":"Параметры по умолчанию"}},{"type":"code","data":{"code":"function addTwoNumbers(x, y) {\r\n x = x || 0;\r\n y = y || 0;\r\n return x + y;\r\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"В ES6 можно просто указать параметры функции по умолчанию:"}},{"type":"code","data":{"code":"function addTwoNumbers(x=0, y=0) {\r\n return x + y;\r\n}","language":"javascript lazy-code"}},{"type":"code","data":{"code":"addTwoNumbers(2, 4); // 6\r\naddTwoNumbers(2); // 2\r\naddTwoNumbers(); // 0","language":"javascript lazy-code"}},{"type":"header4","data":{"level":4,"text":"Остаточные параметры"}},{"type":"paragraph","data":{"text":"В ES5 неопределённое количество аргументов обрабатывалось так:"}},{"type":"code","data":{"code":"function logArguments() {\r\n for (var i=0; i < arguments.length; i++) {\r\n console.log(arguments[i]);\r\n }\r\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Используя остаточный оператор, можно передавать неопределённое число аргументов:"}},{"type":"code","data":{"code":"function logArguments(...args) {\r\n for (let arg of args) {\r\n console.log(arg);\r\n }\r\n}","language":"javascript lazy-code"}},{"type":"header4","data":{"level":4,"text":"Именованные параметры"}},{"type":"paragraph","data":{"text":"Одним из шаблонов ES5 для работы с именованными параметрами был шаблон options object, взятый из jQuery."}},{"type":"code","data":{"code":"function initializeCanvas(options) {\r\n var height = options.height || 600;\r\n var width = options.width || 400;\r\n var lineStroke = options.lineStroke || 'black';\r\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Тоже самое можно получить, используя деструктор в качестве формального параметра функции:"}},{"type":"code","data":{"code":"function initializeCanvas(\r\n { height=600, width=400, lineStroke='black'}) {\r\n // Use variables height, width, lineStroke here\r\n }","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Если мы хотим сделать всё значение опциональным, можно деструктурировать пустой объект:"}},{"type":"code","data":{"code":"function initializeCanvas(\r\n { height=600, width=400, lineStroke='black'} = {}) {\r\n // ...\r\n }","language":"javascript lazy-code"}},{"type":"header4","data":{"level":4,"text":"Оператор расширения"}},{"type":"paragraph","data":{"text":"В ES5 можно было найти максимум массива, используя метод apply над Math.max:"}},{"type":"code","data":{"code":"Math.max.apply(null, [-1, 100, 9001, -32]); // 9001","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"В ES6 можно использовать оператор расширения для передачи массива значений в качестве параметров функции:"}},{"type":"code","data":{"code":"Math.max(...[-1, 100, 9001, -32]); // 9001","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Также можно интуитивно конкатенировать массивы литералов:"}},{"type":"code","data":{"code":"let cities = ['San Francisco', 'Los Angeles'];\r\nlet places = ['Miami', ...cities, 'Chicago']; // ['Miami', 'San Francisco', 'Los Angeles', 'Chicago']","language":"javascript lazy-code"}},{"type":"header3","data":{"level":3,"text":"Классы"}},{"type":"paragraph","data":{"text":"До ES6 классы нужно было создавать, добавляя к функции-конструктору свойства, расширяя прототип:"}},{"type":"code","data":{"code":"function Person(name, age, gender) {\r\n this.name = name;\r\n this.age = age;\r\n this.gender = gender;\r\n}\r\n\r\nPerson.prototype.incrementAge = function () {\r\n return this.age += 1;\r\n};","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"А расширенные классы — так:"}},{"type":"code","data":{"code":"function Personal(name, age, gender, occupation, hobby) {\r\n Person.call(this, name, age, gender);\r\n this.occupation = occupation;\r\n this.hobby = hobby;\r\n}\r\n\r\nPersonal.prototype = Object.create(Person.prototype);\r\nPersonal.prototype.constructor = Personal;\r\nPersonal.prototype.incrementAge = function () {\r\n Person.prototype.incrementAge.call(this);\r\n this.age += 20;\r\n console.log(this.age);\r\n};","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"ES6 предоставляет весьма удобный синтаксический сахар. Классы можно создавать таким образом:"}},{"type":"code","data":{"code":"class Person {\r\n constructor(name, age, gender) {\r\n this.name = name;\r\n this.age = age;\r\n this.gender = gender;\r\n }\r\n\r\n incrementAge() {\r\n this.age += 1;\r\n }\r\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"А расширять — используя ключевое слово extends:"}},{"type":"code","data":{"code":"class Personal extends Person {\r\n constructor(name, age, gender, occupation, hobby) {\r\n super(name, age, gender);\r\n this.occupation = occupation;\r\n this.hobby = hobby;\r\n }\r\n\r\n incrementAge() {\r\n super.incrementAge();\r\n this.age += 20;\r\n console.log(this.age);\r\n }\r\n}","language":"javascript lazy-code"}},{"type":"blockquote","data":{"author":"","authorJob":"","fullWidth":false,"quoteMark":false,"withBorder":false,"text":"Лучшая практика: хотя такой синтаксис и скрывает реализацию, новичкам в нём будет проще разобраться, да и написанный код будет чище."}},{"type":"header3","data":{"level":3,"text":""}}]}

Ошибка в настройках сайта