Cara menggunakan ES6 Fat Arrow untuk .filter () array objek

142

Saya mencoba menggunakan fungsi panah ES6 dengan .filteruntuk mengembalikan orang dewasa (Jack & Jill). Tampaknya saya tidak dapat menggunakan pernyataan if.

Apa yang perlu saya ketahui untuk melakukan ini di ES6?

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

Contoh ES5 saya yang berfungsi:

let adults2 = family.filter(function (person) {
  if (person.age > 18) { return person; }
});
javascript ecmascript-6 higher-order-functions Henry Zhu
sumber
(8:37) SyntaxError: tidak diketahui: Token tak terduga (8:37) | biarkan orang dewasa = family.filter (person => if (person.age> 18) orang);
Henry Zhu

Jawaban:

239

Tampaknya saya tidak dapat menggunakan pernyataan if.

Panah fungsi baik memungkinkan untuk menggunakan ekspresi atau suatu blok sebagai tubuh mereka. Melewati ekspresi

foo => bar

setara dengan blok berikut

foo => { return bar; }

Namun, 

if (person.age > 18) person

bukanlah ekspresi, ifadalah pernyataan. Oleh karena itu, Anda harus menggunakan blok, jika Anda ingin menggunakan iffungsi panah:

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

Sementara itu secara teknis memecahkan masalah, ini adalah penggunaan yang membingungkan .filter, karena ini menunjukkan bahwa Anda harus mengembalikan nilai yang harus dimuat dalam larik keluaran. Namun, callback yang diteruskan ke .filterharus mengembalikan Boolean , yaitu trueatau false, yang menunjukkan apakah elemen harus disertakan dalam larik baru atau tidak.

Jadi yang Anda butuhkan hanyalah

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

Di ES5:

family.filter(function (person) {
  return person.age > 18;
});
Felix Kling
sumber
Ah, penjelasan yang bagus sekali. Dalam .filter () jika tidak ada yang dikembalikan untuk sebuah objek, diasumsikan sebagai salah? Misalnya, dalam contoh ES5 Anda, hanya elemen sebenarnya yang dikembalikan.
Henry Zhu
2
@HenZhu: Ya. Tetapi contoh saya selalu mengembalikan salah satu falseatau true, karena person.age > 18selalu salah satu falseatau true.
Felix Kling
Versi dengan "tidak diblokir" jika seharusnya kembali person(tentu saja tidak seperti yang Anda tunjuk ...). Seandainya koreksi pertama Anda benar-benar melakukan itu ( foo => { if (person.age > 18) return person }), Anda akan mendapatkan persamaan yang tepat dari apa yang digunakan OP dalam kode ES5. Meskipun itu adalah kode yang membingungkan, itu TIDAK berhasil, dan AKAN menyelesaikan masalah. return personakan memaksa true, dan tidak ada jalan kembali yang akan "kembali" undefined, yang akan dipaksa false.
Amit
1
@Amit: Tentu. Saya pikir karena jawaban lain menyarankannya, saya tidak perlu melakukannya. Namun, ini mungkin membingungkan, jadi saya memperbaruinya.
Felix Kling
2
@ just-boris: Tidak yakin dengan apa ini akan dicapai di sini .filter. Apakah maksud Anda fungsi panah secara umum?
Felix Kling
46

Anda tidak dapat secara implisit kembali dengan if, Anda akan membutuhkan kawat gigi:

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

Ini dapat disederhanakan:

let adults = family.filter(person => person.age > 18);
Kit Sunde
sumber
Luar biasa, yang kedua berhasil. Yang pertama mengembalikan larik kosong. Ada ide?
Henry Zhu
1
@HenryZhu: Ini berfungsi dengan baik (mungkin ada yang salah dengan kode atau transpiler Anda). Tapi itu bukanlah cara yang benar.
Felix Kling
1
Bagaimana ini akan dilakukan jika Anda memiliki pernyataan lain? Saya mencoba untuk melihat ini dengan terner tetapi tidak dapat mengidentifikasi sintaks yang benar
Winnemucca
@stevek Persis seperti yang Anda lakukan dengan fungsi normal seperti pada contoh pertama.
Kit Sunde
1

Inilah solusi saya bagi mereka yang menggunakan hook; Jika Anda mencantumkan item di kisi Anda dan ingin menghapus item yang dipilih, Anda dapat menggunakan solusi ini.

var list = data.filter(form => form.id !== selectedRowDataId);
setData(list);
Sabri Meviş
sumber
0

Sesederhana yang bisa Anda gunakan 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)
Luaskan cuplikan

Mo.
sumber