Bir dizi nesneyi .filter () yapmak için ES6 Fat Arrow nasıl kullanılır

139

.filterYetişkinler (Jack & Jill) dönmek için ES6 ok işlevini kullanmaya çalışıyorum . Görünüşe göre if ifadesini kullanamıyorum.

Bunu ES6'da yapmak için neleri bilmem gerekir?

var family = [{"name":"Jack",  "age": 26},
              {"name":"Jill",  "age": 22},
              {"name":"James", "age": 5 },
              {"name":"Jenny", "age": 2 }];

let adults = family.filter(person => if (person.age > 18) person); // throws error

(8:37) SyntaxError: unknown: Unexpected token (8:37)
|let adults = family.filter(person => if (person.age > 18) person);

Çalışan ES5 örneğim:

let adults2 = family.filter(function (person) {
  if (person.age > 18) { return person; }
});

javascript ecmascript-6 higher-order-functions

— Henry Zhu
kaynak

(8:37) Sözdizimi Hata: bilinmiyor: Beklenmeyen simge (8:37) | yetişkinlere izin ver = family.filter (person => if (person.age> 18) kişi);

— Henry Zhu

236

Görünüşe göre if ifadesini kullanamıyorum.

İşlevleri ok ya da bir kullanımı için izin ekspresyonunu veya bir blok vücut olarak. İfadeyi iletme

foo => bar

aşağıdaki bloğa eşdeğerdir

foo => { return bar; }

Ancak,

if (person.age > 18) person

bir ifade değil if, bir ifadedir. Bu nedenle if, bir ok işlevinde kullanmak istiyorsanız bir blok kullanmanız gerekir:

foo => {  if (person.age > 18) return person; }

Bu teknik olarak sorunu çözerken, bu kafa karıştırıcı bir kullanımdır .filter, çünkü çıktı dizisinde bulunması gereken değeri döndürmeniz gerektiğini gösterir. Bununla birlikte, geri iletilen .filterbir dönmelidir Boole , ie trueveya falseeleman yeni diziye dahil veya değil, gerekip gerekmediğini gösteren.

Tek ihtiyacınız olan şey

family.filter(person => person.age > 18);

ES5'te:

family.filter(function (person) {
  return person.age > 18;
});

— Felix Kling
kaynak

Ah, ne güzel bir açıklama. .Filter () öğesinde bir nesne için hiçbir şey döndürülmezse, false olarak kabul edilir? Örneğin, ES5 örneğinizde yalnızca gerçek öğeler döndürülür.

— Henry Zhu

2

@HenryZhu: Evet. Ama benim örneğim her zaman ya falseda döndürür true, çünkü person.age > 18her zaman ya ya falseda olur true.

— Felix Kling

"Bloke edilmemiş" sürümün dönmesi gerekiyordu person(elbette işaret ettiğiniz gibi yapmaz ...). İlk düzeltmeniz gerçekten bunu yapsaydı ( foo => { if (person.age > 18) return person }), OP'nin ES5 kodunda kullandığı şeyin tam eşdeğerini elde edersiniz. Bu kafa karıştırıcı bir kod olsa da, çalışır ve sorunu çözecektir. return personiçin zorlamak olacak trueve geri dönüşü olmayan "dönüş" olacak undefined, zorlanamadığında hangi false.

— Amit

1

@Amit: Tabii. Düşündüm çünkü diğer cevap bunu önerdi, zorunda kalmayacağım. Ancak, bu kafa karıştırıcı olabilir, bu yüzden güncelledim.

— Felix Kling

2

@ just-boris: Bunun burada neyi başaracağından emin değilim .filter. Genelde ok işlevleri mi demek istediniz?

— Felix Kling

46

Örtülü olarak bir ile geri dönemezsiniz if, parantezlere ihtiyacınız vardır:

let adults = family.filter(person => { if (person.age > 18) return person} );

Yine de basitleştirilebilir:

let adults = family.filter(person => person.age > 18);

— Kit Sunde
kaynak

Harika, ikincisi çalışıyor. İlki boş bir dizi döndürür. Herhangi bir fikir?

— Henry Zhu

1

@HenryZhu: Sadece iyi çalışıyor (muhtemelen kodunuz veya transpiler ile ilgili başka bir şey yanlış). Ama bu zaten doğru yol değil.

— Felix Kling

1

Başka bir ifadeniz olması durumunda bu nasıl yapılır? Bunu bir üçlü ile görmeye çalışıyorum ama doğru sözdizimini tanımlayamıyor gibiyim

— Winnemucca

@stevek Aynen ilk örnekteki gibi normal bir fonksiyonla yaptığınız gibi.

— Kit Sunde

0

Kullanabildiğiniz kadar basit const adults = family.filter(({ age }) => age > 18 );

const family =[{"name":"Jack",  "age": 26},
              {"name":"Jill",  "age": 22},
              {"name":"James", "age": 5 },
              {"name":"Jenny", "age": 2 }];

const adults = family.filter(({ age }) => age > 18 );

console.log(adults)

Snippet'i genişlet

— Mo
kaynak

0

İşte kullananlar için benim çözümüm hook; Izgaradaki öğeleri listeliyorsanız ve seçilen öğeyi kaldırmak istiyorsanız, bu çözümü kullanabilirsiniz.

var list = data.filter(form => form.id !== selectedRowDataId);
setData(list);

— Sabri Meviş
kaynak