Когда я должен использовать `return` в es6 Arrow Functions?

Ответ 1

Джексон частично ответил на это в том же вопросе:

Неявный возврат, но только если нет блока.

• Это приведет к ошибкам, когда однострочный шрифт будет расширяться до нескольких строк, и программист забудет добавить return.
• Неявный возврат синтаксически неоднозначен. (name) => {id: name} возвращает объект {id: name}... правильно? Неправильно. Он возвращает undefined. Эти фигурные скобки являются явным блоком. id: - это метка.

Я бы добавил к этому определение block:

Оператор блока (или составной оператор на других языках) используется для группировки нулевых или более операторов. Блок разделен на пару фигурных скобок.

<сильные > Примерысильные > :

// returns: undefined
// explanation: an empty block with an implicit return
((name) => {})() 

// returns: 'Hi Jess'
// explanation: no block means implicit return
((name) => 'Hi ' + name)('Jess')

// returns: undefined
// explanation: explicit return required inside block, but is missing.
((name) => {'Hi ' + name})('Jess')

// returns: 'Hi Jess'
// explanation: explicit return in block exists
((name) => {return 'Hi ' + name})('Jess') 

// returns: undefined
// explanation: a block containing a single label. No explicit return.
// more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label
((name) => {id: name})('Jess') 

// returns: {id: 'Jess'}
// explanation: implicit return of expression ( ) which evaluates to an object
((name) => ({id: name}))('Jess') 

// returns: {id: 'Jess'}
// explanation: explicit return inside block returns object
((name) => {return {id: name}})('Jess') 

Ответ 2

Я понимаю это правило большого пальца...

Для функций, которые эффективно трансформируются (однострочные манипуляции с аргументами), return неявно.

Кандидаты:

// square-root 
value => Math.sqrt(value)

// sum
(a,b) => a+b

Для других операций (более одного строчки, которым требуется блок, return должен быть явным

Ответ 3

Там другой случай.

При написании функционального компонента в React вы можете использовать круглые скобки для переноса неявно возвращенного JSX.

const FunctionalComponent = () => (
  <div>
    <OtherComponent />
  </div>
);

Ответ 4

Функции Arrow позволяют вам иметь неявный возврат: значения возвращаются без использования ключевого слова return.

Он работает, когда в теле функции есть оператор on-line:

const myFunction = () => 'test'

console.log(myFunction()) //'test'

Ответ 5

Вот еще один случай, который доставил мне некоторые неприятности.

// the "tricky" way
const wrap = (foo) => (bar) => {
  if (foo === 'foo') return foo + ' ' + bar;
  return 'nofoo ' + bar;
}

Здесь мы определяем функцию, возвращающую анонимную функцию. Сложный бит состоит в том, что тело функции для внешней функции (часть, начинающаяся с (bar) =>...) визуально выглядит как "блок", но это не так. Так как это не так, неявное возвращение вступает в силу.

Вот как будет выполняться wrap:

// use wrap() to create a function withfoo()
const withfoo = wrap('foo');
// returns: foo bar
console.log(withfoo('bar'));

// use wrap() to create a function withoutfoo()
const withoutfoo = wrap('bar');
// returns: nofoo bar
console.log(withoutfoo('bar'));

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

Здесь семантический эквивалент первого блока кода, просто заставляющий тело wrap() делать явный возврат. Это определение дает те же результаты, что и выше. Это где точки соединяются. Сравните первый блок кода выше с приведенным ниже, и выясните, что сама функция стрелки обрабатывается как выражение, а не как блок, и имеет подразумеваемый возврат.

// the explicit return way
const wrap = (foo) => {
  return (bar) => {
    if (foo === 'foo') return foo + ' ' + bar;
    return 'nofoo ' + bar;
  }
}

Полностью безуплотная версия обтекания будет выглядеть следующим образом, которая, хотя и не такая компактная, как версия с жирной стрелкой вверх, кажется намного проще для понимания.

// the "no arrow functions" way
const wrap = function(foo) {
  return function(bar) {
    if (foo === 'foo') return foo + ' ' + bar;
    return 'nofoo ' + bar;
  };
};

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