[javascript] ES6 Fat Arrow를 사용하여 객체 배열을 .filter ()하는 방법

Program / 글쓴이

ES6 화살표 기능을 사용 .filter하여 성인 (Jack & Jill)을 반환 하려고합니다 . 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);

답변