Эта статья является частью моей серии Визуализация с помощью React. Предыдущая статья: React и D3 — сходства и различия
В этом руководстве я буду использовать нотацию ES6 всякий раз, когда я обычно делаю это в своей повседневной работе. В ES6 есть много различий по сравнению с предыдущими версиями javascript, и это может быть пугающим. Но в наше время большая часть кода, с которым вы можете столкнуться, будет написана на ES6, поэтому поверхностное знание некоторых его функций может иметь большое значение.
Вот функции, которые я использую чаще всего. :
Функции толстых стрелок
ES6 представляет новый, более лаконичный способ написания функций. Вместо того, чтобы писать:
function
add10(d) {return
d + 10;}
можно написать:
var
add10 = d => d + 10
Технически эти две формы не полностью эквивалентны. Основное отличие заключается в том, что вам нужно использовать контекстное ключевое слово this. Но в большинстве случаев толстые стрелки — это гораздо более лаконичный, а значит, и более разборчивый синтаксис.
Чтобы сделать функцию, которая принимает более 1 аргумента, заключите их в круглые скобки следующим образом:
(a, b) => a + b
Для функции с несколькими операторами вы должны использовать фигурные скобки, как обычную функцию, и использовать return, если это необходимо:
d => { console.log(d); return
d; }
Для функции, которая возвращает объект, заключите этот объект в круглые скобки, чтобы не путать его с предыдущей формой:
d => ({key: d})
const и пусть
До ES6 для объявления переменных можно было использовать только ключевое слово var.
var
a; var
b = 10;
В ES6 вы можете объявлять переменные, используя const или let. Когда вы используете const, переменная не может быть переназначена:
const a; // error - a must be assigned a value
const b = 1;
b = 2; // error - b can no longer be reassigned
Переменные, объявленные с помощью let, могут быть переназначены.
let
a; // ok a = 10; // ok a = 20; // still no error
const и let более выразительны, чем var, потому что они указывают, планируем ли мы изменить значение переменной или нет. У них есть еще одно преимущество: они имеют прицел. Их можно использовать внутри ветки if или цикла for, и они не будут доступны за их пределами. И наоборот, var не имеет области действия — они доступны везде внутри функции, где они объявлены, или глобально, если они объявлены вне функции.
Таким образом, нет никаких причин использовать ключевое слово var в ES6.
Оператор спреда
В ES6, если у вас есть массив внутри другого массива, вы можете последовательно заменить этот массив его элементами с помощью оператора распространения. Пример сделает это более понятным:
const a = [1, ...[2, 3, 4]]; // [1, 2, 3, 4].
Это может показаться немного, но это очень универсально и полезно. Например, вместо объединения двух массивов вы можете написать:
const a = [1, 2];
const b = [3, 4];
const c = [...a, ...b]; // [1, 2, 3, 4];
Интересно, что он работает с пустыми массивами:
const a = [1, 2];
const b = [];
const c = [...a, ...b]; // [1, 2]
Но не с примитивными литералами (числа и т.д.)
const a = [1, 2];
const b = 3;
const c = [...a, ...b]; // error
Вместо того, чтобы помещать элемент в конец массива, вы также можете использовать оператор распространения:
const a = [1, 2];
const b = 3;
const c = [...a, b]; // added benefit - creates a new array instead of changing it in place.
Обратите внимание на разницу между этими 2.
[…[1,2], 3] будет работать;
[…[1, 2], …3] не будет.
Составление таких массивов может быть условным!
const a = [1, 2];
const b = 3;
const condition = false;
const c = [...a, ...(condition ? [b] : [])] // [1, 2];
Что только что произошло? точно так же, как и выше, но мы применили оператор распространения к выражению, которое находится в круглых скобках. Если бы условие было истинным, это выражение было бы эквивалентно [b]. Но поскольку оно ложно, оно эквивалентно пустому массиву.
Экспериментальная функция ES7 распространяет оператор распространения на объекты.
const obj = {key: 'a'};
const newObj = {...obj, value: 1}; // {key: 'a', value: 1}
Назначение деструктурирования
Вы можете делать больше вещей с объектами в ES6. Присваивание деструктуризации включает в себя ряд отличных функций, но вот две из них, которые я использую чаще всего.
const obj = {key: 'a', value: 123};
// you can read several properties from an object at once and assign them to variables:
const {key, value} = obj;
console.log(key, value); // 'a', 123
До ES6 вам приходилось писать такую функцию:
function
div(num, den) {return
num / den;} div(6, 2); // 3; div(2, 6); // 0.333333 order of the parameters matters! div(3); // NaN - can't forget an argument!
В ES6 мы можем ожидать, что функция в качестве аргумента примет объект и получит доступ к его свойствам:
function
div({num, den = 1}) {return
num / den;} div({num: 6, den: 2}); // 3 div({den: 2, num: 6}); // still 3 div({num: 3}); // still 3 - den has a default value
Используя объект, нам не нужно помнить, в каком порядке должны быть указаны параметры функции.
Обернув все это вместе
какая другая форма для последней функции, которую я написал?
const div = ({num, den = 1}) => num / den;
В следующей статье цикла Кодирование на React мы, наконец, начнем писать код на React.