В настоящее время работаю над приложением React, которое в основном предназначено для редактирования содержания статей и сведений о продуктах на официальном сайте моей компании. После реализации некоторого нового синтаксиса из ES6 я просто не могу больше жить без него, он настолько интуитивно понятен, что даже не могу представить, как мы, разработчики JS, выживали без этих новых функций раньше.

Эта статья в основном предназначена для тех, кто разрабатывает на Javascript, но не знаком с ES6. Они не нужны при разработке Javascript, но всегда полезно знать что-то новое, что также может сэкономить ваше время. Я надеюсь, что они помогут вам в некоторых моментах; )

Вот несколько приемов, которые так полезны при разработке приложений React:

Литералы шаблонов

Прежде чем на самом деле внедрять литералы шаблонов, я просто чувствую, что это странный синтаксис, но когда мне нужно вставить некоторые переменные, чтобы сделать вызов AJAX с другим URL-адресом, стоит его изучить.

Скажем, мне нужно создать простую вспомогательную функцию, чтобы получить URL-адрес для запроса разных таблиц и идентификаторов элементов.

// Before ES6:
var getQueryURL = function(table, id){
  return '/' + table '/' + id;
}
// With ES6:
const getQueryURL = (table, id) => `/${table}/${id}`

На самом деле здесь мы также используем const и стрелочную функцию из ES6, я упомяну стрелочную функцию позже.

Деструктуризация объекта

Всякий раз, когда нам приходится иметь дело с реквизитами и состояниями в компонентах, гораздо элегантнее использовать деструктурирующее присваивание, чтобы сделать код читаемым, особенно вам не нужно писать много this.props.propName или this.state.stateName, чтобы просто передать все это.

Скажем, я просто хочу передать props в render() для рендеринга кнопки.

// Before ES6 in a really bad way to write:
render(){
  var name = props.name;
  var value = props.value;
  var disabled = props.disabled;
  return (    
    <button 
      name={props.name} 
      value={props.value} 
      disabled={props.disabled}
    />
  )
}

// Before ES6 in a better way:
render(){
  var value = props.value;
  var name = props.name;
  var disabled = props.disabled;
return (    
    <button name={name} value={value} disabled={disabled} />
  )
}

// With ES6 there is a much more better way
render(){
  const { value, name, disabled } =  props;   
  return (    
    <button name={name} value={value} disabled={disabled} />
  )
}

Более того, мы глубоко сопоставляем свойства объектов.

Скажем, мы используем реактивный маршрутизатор и хотим получить строку запроса из URL-адреса и извлечь таблицу из реквизита, а также обновить форму.

// Before ES6:
updateForm(){
  var search= this.props.location.search;
  var table = this.props.fetchTable;
  ...
}

// With ES6:
updateForm(){
  const { location:{ search }, fetchTable: table } = this.props;
}

В приведенном выше примере мы также переименовываем fetchTable в table, что является еще одним полезным приемом.

Стрелочные функции

Это первый синтаксис, который я изучил из ES6, который должен быть известен во всем мире. Поначалу это довольно запутанно, но в какой-то момент вы к этому привыкнете. Это имеет большое значение, если не писать function для каждой функции.

Скажем, я хочу создать чистый функциональный компонент кнопки:

// Before ES6:
function Button(props){
  var name = props.name;
  var value = props.value;
  var disabled = props.disabled;
  return <button name={name} value={value} disabled={disabled}/>
}

// With ES6:
const Button = (props) => {
  const { value, name, disabled } =  props;
  return <button name={name} value={value} disabled={disabled}/>
}

// Or without object deconstructing, the curly brackets will be replaced by parentheses and the return will be omitted.
const Button = props => (
  <button 
    name={props.name} 
    value={props.value} 
    disabled={props.disabled} />
)

Значения параметров по умолчанию

Я был очень удивлен, что Javascript не предоставляет синтаксис параметра по умолчанию до ES6. Эта функция помогает мне избежать typeError, когда выборка данных является асинхронной и не была получена полностью, что весьма полезно.

Скажем, мне нужно получить заголовки из всех данных статей:

// Before ES6:
function getTitles(articles){
  if (articles === undefined){
      articles = [];
  }
  return articles.map(function(article){ return article.title })
}

// With ES6:
const getTitles = (articles = []) => articles.map( a => a.title )

С помощью функции стрелки мы можем использовать одну строку вместо пяти, что так мило ❤

Расширенные свойства объекта

И последнее, но не менее важное: иногда мне нужно создать данные или добавить свойства к объектам с настраиваемыми ключами, вычисленные имена свойств пригодятся :)

Скажем, мне нужно добавить данные в список объектов, а ключ основан на имени таблицы в базе данных:

// Before ES6:
function updateData(dataList, table, update){
  var newDataList = dataList;
  newDataList[table] = update;
  ...
}

// With ES6:
const updateData = (dataList, table, update) => {
  const newDataList = { ...dataList, [table]: update }
  ...
}

Здесь мы также используем оператор распространения, который также очень удобен для присвоения новых свойств новому объекту или массиву!

Выше перечислены функции, которые я часто использую в разработке React. Я надеюсь, что вы узнали что-то новое, чего раньше не пробовали, и вам не терпится улучшить свое Javascript-приложение. Некоторые элементы синтаксиса могут быть довольно запутанными в начале, но в какой-то момент вы обнаружите, что они очень полезны и необходимы в Javascript.

Если вы хорошо знакомы с этим синтаксисом и хотите узнать больше о возможностях ES6, этот веб-сайт ES6-features — то, что вам нужно.

Спасибо за ваше чтение, и если есть какие-либо предложения или опечатки в этой статье, добро пожаловать оставлять свои комментарии :)