Эта статья является частью моей серии Визуализация с помощью 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.