วิธีใช้ ES6 Fat Arrow เพื่อ. filter () อาร์เรย์ของวัตถุ

ฉันกำลังพยายามใช้ฟังก์ชั่นลูกศร ES6 .filterเพื่อส่งคืนผู้ใหญ่ (แจ็ค & จิล) ดูเหมือนว่าฉันไม่สามารถใช้คำสั่ง if

ฉันต้องรู้อะไรบ้างเพื่อที่จะทำสิ่งนี้ใน 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);

ตัวอย่าง ES5 ที่ทำงานของฉัน:

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

ดูเหมือนว่าฉันไม่สามารถใช้คำสั่ง if

ลูกศรฟังก์ชั่นทั้งอนุญาตให้มีการใช้การแสดงออก หรือบล็อกเป็นร่างกายของพวกเขา ผ่านการแสดงออก

foo => bar

เทียบเท่ากับบล็อกต่อไปนี้

foo => { return bar; }

อย่างไรก็ตาม

if (person.age > 18) person

ไม่ใช่การแสดงออกifเป็นคำสั่ง ดังนั้นคุณจะต้องใช้บล็อกถ้าคุณต้องการใช้ifในฟังก์ชั่นลูกศร:

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

ในขณะที่ในทางเทคนิคแก้ปัญหานี้การใช้งานที่สับสน.filterเพราะมันแสดงให้เห็นว่าคุณต้องส่งกลับค่าที่ควรจะมีอยู่ในอาร์เรย์เอาท์พุท อย่างไรก็ตามการเรียกกลับที่ส่งไปยัง.filterควรส่งคืนบูลีนเช่นtrueหรือfalseระบุว่าองค์ประกอบควรจะรวมอยู่ในอาร์เรย์ใหม่หรือไม่

ดังนั้นสิ่งที่คุณต้องการคือ

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

ใน ES5:

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

คุณไม่สามารถส่งคืนโดยนัยได้ifคุณต้องมีเครื่องมือจัดฟัน:

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

สามารถทำให้ง่ายขึ้นแม้ว่า:

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

ง่ายเหมือนที่คุณสามารถใช้ 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)

นี่คือวิธีการแก้ปัญหาของฉันสำหรับผู้ที่ใช้hook; หากคุณกำลังแสดงรายการในตารางและต้องการลบรายการที่เลือกคุณสามารถใช้วิธีนี้

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