Khi nào tôi nên sử dụng `return` trong es6 Arrow Function?

Các hàm mũi tên es6 mới nói returnẩn trong một số trường hợp:

Biểu thức cũng là giá trị trả về ngầm định của hàm đó.

Trong trường hợp nào tôi cần sử dụng returnvới các hàm mũi tên es6?

Jackson đã trả lời một phần điều này trong một câu hỏi tương tự:

Hoàn trả lại, nhưng chỉ khi không có khối.

• Điều này sẽ dẫn đến lỗi khi một lớp lót mở rộng ra nhiều dòng và lập trình viên quên thêm return.
• Hoàn trả tiềm ẩn là cú pháp mơ hồ. (name) => {id: name}trả về đối tượng {id: name}... đúng không? Sai lầm. Nó trở lại undefined. Những cái niềng răng là một khối rõ ràng. id:là một nhãn hiệu

Tôi sẽ thêm vào định nghĩa của một khối :

Một câu lệnh khối (hoặc câu lệnh ghép trong các ngôn ngữ khác) được sử dụng để nhóm 0 hoặc nhiều câu lệnh. Khối được phân định bởi một cặp dấu ngoặc nhọn.

Ví dụ :

// 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') 

Tôi hiểu quy tắc này ...

Đối với các hàm được chuyển đổi hiệu quả (thao tác một dòng của các đối số), trả về là ẩn.

Thí sinh là:

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

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

Đối với các hoạt động khác (nhiều hơn một lớp yêu cầu một khối, trả về phải rõ ràng

Có một trường hợp khác ở đây.

Khi viết một thành phần chức năng trong React, bạn có thể sử dụng dấu ngoặc đơn để bao bọc hoàn toàn JSX.

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

Các hàm mũi tên cho phép bạn có một trả về ngầm định: các giá trị được trả về mà không phải sử dụng returntừ khóa.

Nó hoạt động khi có một câu lệnh trực tuyến trong thân hàm:

const myFunction = () => 'test'

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

Một ví dụ khác, trả về một đối tượng (nhớ bọc dấu ngoặc nhọn trong ngoặc đơn để tránh đối tượng được coi là dấu ngoặc cơ thể của hàm gói):

const myFunction = () => ({value: 'test'})

console.log(myFunction()) //{value: 'test'}

Đây là một trường hợp khác cho tôi một số rắc rối.

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

Ở đây chúng ta định nghĩa một hàm trả về một hàm ẩn danh. Bit "khó hiểu" là phần thân của hàm ngoài (phần bắt đầu bằng (bar) => ...) trông giống như một "khối", nhưng thực tế không phải vậy. Vì nó không phải, trở lại ngầm đá vào.

Đây là cách quấn sẽ thực thi:

// 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'));

Cách tôi giải nén điều này để đảm bảo rằng tôi hiểu nó là "giải mã" các chức năng.

Đây là tương đương ngữ nghĩa của khối mã đầu tiên, chỉ đơn giản là làm cho phần thân của quấn () thực hiện trả về rõ ràng. Định nghĩa này tạo ra kết quả tương tự như trên. Đây là nơi các chấm kết nối. So sánh khối mã đầu tiên ở trên với khối bên dưới và rõ ràng rằng một hàm mũi tên được coi là một biểu thức, không phải là một khối và có trả về hàm ý .

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

Phiên bản bọc hoàn toàn chưa được chỉnh sửa sẽ như thế này, trong khi không nhỏ gọn như phiên bản mũi tên béo, có vẻ dễ hiểu hơn rất nhiều.

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

Cuối cùng, đối với những người khác có thể phải đọc mã của tôi và trong tương lai, tôi nghĩ rằng tôi thích đi phiên bản mũi tên không thể hiểu được ngay từ cái nhìn đầu tiên, thay vì mũi tên cần một chút công bằng nghĩ (và trong trường hợp thử nghiệm của tôi) để mò mẫm.