Что и как в ES6: хитрости, лучшие практики и примеры. Часть первая. let/const, блоки, стрелочные функции, строки, деструктуризация, модули, параметры, классы
Комментарии
В закладки
34342
Шпаргалка для повседневного использования, содержащая подборку советов по ES2015 [ES6] с примерами. Делитесь своими советами в комментариях!
var против let / const
Пример использования var:
var snack = 'Meow Mix';
function getFood(food) {
if (food) {
var snack = 'Friskies';
return snack;
}
return snack;
}
getFood(false); // undefined
А вот что происходит при замене var на let:
let snack = 'Meow Mix';
function getFood(food) {
if (food) {
let snack = 'Friskies';
return snack;
}
return snack;
}
getFood(false); // 'Meow Mix'
Такое изменение в поведении показывает, что нужно быть осторожным при рефакторинге старого кода, в котором используется var. Простая замена var на let может привести к непредсказуемому поведению программы.
console.log(x); // ReferenceError: x is not defined
let x = 'hi';
Замена немедленно вызываемых функций (IIFE) на блоки (Blocks)
Часто при использовании вложенных функций бывает нужно отделить контекст this от его лексической области видимости. Пример приведён ниже:
function Person(name) {
this.name = name;
}
Person.prototype.prefixName = function (arr) {
return arr.map(function (character) {
return this.name + character; // Cannot read property 'name' of undefined
});
};
Распространённым решением этой проблемы является хранение контекста this в переменной:
function Person(name) {
this.name = name;
}
Person.prototype.prefixName = function (arr) {
var that = this; // Store the context of this
return arr.map(function (character) {
return that.name + character;
});
};
До ES6 нам приходилось использовать библиотеки наподобие Browserify для создания модулей на клиентской стороне, и require в Node.js. С ES6 мы можем прямо использовать модули любых типов (AMD и CommonJS).
Экспорт в CommonJS
module.exports = 1;
module.exports = { foo: 'bar' };
module.exports = ['foo', 'bar'];
module.exports = function bar () {};
Экспорт в ES6
В ES6 мы можем использовать разные виды экспорта.
Именованный экспорт:
export let name = 'David';
export let age = 25;
Экспорт списка объектов:
function sumTwo(a, b) {
return a + b;
}
function sumThree(a, b, c) {
return a + b + c;
}
export { sumTwo, sumThree };
Также мы можем экспортировать функции, объекты и значения, просто используя ключевое слово export:
export function sumTwo(a, b) {
return a + b;
}
export function sumThree(a, b, c) {
return a + b + c;
}
И наконец, можно экспортировать связывания по умолчанию:
function sumTwo(a, b) {
return a + b;
}
function sumThree(a, b, c) {
return a + b + c;
}
let api = {
sumTwo,
sumThree
};
export default api;
/* Which is the same as
* export { api as default };
*/
Импорт в ES6
ES6 предоставляет различные виды импорта. Мы можем импортировать целый файл:
import 'underscore';
Как и в Python, есть именованный импорт:
import { sumTwo, sumThree } from 'math/addition';
Который можно переименовывать:
import {
sumTwo as addTwoNumbers,
sumThree as sumThreeNumbers
} from 'math/addition';
Кроме того, можно импортировать пространство имён:
import * as util from 'math/addition';
И наконец, список значений из модуля:
import * as additionUtil from 'math/addition';
const { sumTwo, sumThree } = additionUtil;
Импорт из связывания по умолчанию выглядит так:
import api from 'math/addition';
// Same as: import { default as api } from 'math/addition';
Экспортирование лучше упрощать, но иногда можно смешивать импорт по умолчанию с чем-то ещё. Когда мы экспортируем так:
// foos.js
export { foo as default, foo1, foo2 };
Импортировать их можно так:
import foo, { foo1, foo2 } from 'foos';
При импортировании модуля, экспортированного с использованием синтаксиса CommonJS (как в React), можно сделать:
import React, { Component, PropTypes } from 'react';
Параметры
В ES5 было несколько способов обработки функций со значениями по умолчанию, неопределёнными аргументами и именованными параметрами. В ES6 всё это реализуется, причём с понятным синтаксисом.
Параметры по умолчанию
function addTwoNumbers(x, y) {
x = x || 0;
y = y || 0;
return x + y;
}
В ES6 можно просто указать параметры функции по умолчанию:
function addTwoNumbers(x=0, y=0) {
return x + y;
}
