Es6 Ok İşlevlerinde "return" i ne zaman kullanmalıyım?

Yeni es6 ok işlevlerireturn bazı durumlarda örtük olduğunu söylüyor :

İfade aynı zamanda o işlevin örtük dönüş değeridir.

Hangi durumlarda returnes6 ok işlevleriyle kullanmam gerekir ?

Jackson buna benzer bir soruda kısmen cevap verdi :

Örtük dönüş, ancak yalnızca blok yoksa.

• Bu, bir astar birden çok satıra genişlediğinde ve programcı a eklemeyi unuttuğunda hatalara neden olur return.
• Örtük geri dönüş sözdizimsel olarak belirsizdir. (name) => {id: name}nesneyi döndürür {id: name}... değil mi? Yanlış. Geri döner undefined. Bu diş telleri açık bir bloktur. id:bir etikettir.

Ben buna bir blok tanımını eklerdim :

Sıfır veya daha fazla ifadeyi gruplandırmak için bir blok ifadesi (veya diğer dillerde bileşik ifadesi) kullanılır. Blok bir çift kıvırcık parantez ile sınırlandırılmıştır.

Örnekler :

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

Bu kural kuralını anlıyorum ...

Etkin bir şekilde dönüştürülen işlevler için (bağımsız değişkenlerin tek satırlık manipülasyonları), dönüş örtüktür.

Adaylar:

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

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

Diğer işlemler için (blok gerektiren birden fazla gömlek, dönüşün açık olması gerekir

Burada başka bir dava var.

React'ta işlevsel bir bileşen yazarken, dolaylı olarak döndürülen JSX'i sarmak için parantez kullanabilirsiniz.

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

İşte bana biraz sıkıntı veren başka bir dava.

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

Burada anonim bir işlev döndüren bir işlev tanımlarız. "Zor" bit, dış işlevin işlev gövdesinin ((bar) => ... ile başlayan bölüm) görsel olarak bir "blok" gibi görünmesidir, ancak değildir. Öyle olmadığından, örtük dönüş devreye girer.

Sarmanın nasıl yürütüleceği aşağıda açıklanmıştır:

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

Bunu çözdüğümden emin olmak için işlevlerin “çözülmesi” olduğunu anladım.

İlk kod bloğunun semantik eşdeğeri, sadece wrap () gövdesini açık bir dönüş yapıyor. Bu tanım yukarıdakiyle aynı sonuçları verir. Noktalar bu noktada birleşir. Yukarıdaki ilk kod bloğunu aşağıdaki kod bloğuyla karşılaştırın ve bir ok fonksiyonunun kendisine bir blok olarak değil, bir ifade olarak ele alındığı ve ima edilen dönüşe sahip olduğu açıktır .

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

Tamamen lisanssız sargının versiyonu, yağ oklu versiyon kadar kompakt olmasa da, anlaşılması çok daha kolay görünüyor.

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

Sonunda, kodumu okumak zorunda kalabilecek başkaları ve gelecekteki ben için, ilk bakışta görsel olarak anlaşılabilen ok olmayan versiyona gitmeyi tercih ederim, adil bir parça alan ok yerine düşünce (ve benim durumumda deney) grok.

Ok işlevleri örtük bir dönüş elde etmenizi sağlar: değerler returnanahtar kelimeyi kullanmadan döndürülür .

İşlev gövdesinde çevrimiçi bir deyim olduğunda çalışır:

const myFunction = () => 'test'

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

Başka bir örnek, bir nesneyi döndürme (sarma işlevi gövde parantezleri olarak kabul edilmesini önlemek için kıvırcık parantezleri parantez içine almayı unutmayın):

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

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