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


139

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

(8:37) 구문 오류 : 알 수 없음 : 예상치 못한 토큰 (8:37) | 성인 = family.filter (person => if (person.age> 18) people);
Henry Zhu

답변:


236

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

아, 정말 좋은 설명입니다. .filter ()에서 객체에 대해 아무것도 반환되지 않으면 false로 간주됩니다. 예를 들어 ES5 예제에서는 실제 요소 만 반환됩니다.
Henry Zhu

2
@HenryZhu : 예. 하지만 내 예는 항상 하나 반환 false또는 true때문에, person.age > 18항상 중 하나입니다 false또는 true.
Felix Kling

"차단되지 않은"버전이 반환되어야한다면 person(물론 당신이 지적한대로 그렇게하지는 않습니다.) 실제로 첫 번째 수정 작업을 수행 한 경우 ( foo => { if (person.age > 18) return person }) ES5 코드에서 사용한 OP와 정확히 동일합니다. 혼란스러운 코드이지만 작동하지만 문제를 해결할 것입니다. return person에 강요 될 것이며 true, 어떤 귀환도 "복귀"되지 않을 것이며 undefined, 이는에 강요 될 것이다 false.
Amit

1
@Amit : 물론입니다. 나는 다른 대답이 그것을 제안했기 때문에 생각할 필요가 없었습니다. 그러나 이것은 혼란 스러울 수 있으므로 업데이트했습니다.
Felix Kling

2
@ just-boris : 이것이 무엇을 얻을 수 있는지 잘 모르겠습니다 .filter. 일반적으로 화살표 기능을 의미합니까?
Felix Kling

46

으로 암시 적으로 반환 할 수 없으므로 if중괄호가 필요합니다.

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

그래도 간단하게 할 수 있습니다.

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

굉장한, 두 번째는 작동합니다. 첫 번째는 빈 배열을 반환합니다. 어떤 아이디어?
Henry Zhu

1
@HenryZhu : 잘 작동합니다 (아마도 코드 나 트랜스 파일러에 다른 것이있을 수 있습니다). 그러나 그것은 어쨌든 올바른 방법이 아닙니다.
Felix Kling

1
else 문이있는 경우 어떻게해야합니까? 나는 이것을 삼항으로 보려고 노력하고 있지만 올바른 구문을 식별 할 수없는 것 같습니다
Winnemucca

@stevek 첫 번째 예제에서와 같이 정상적인 기능을하는 것과 똑같습니다.
Kit Sunde

0

당신이 사용할 수있는만큼 간단 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)


0

다음은 사용하는 사람들을위한 솔루션입니다 hook. 격자에 항목을 나열하고 선택한 항목을 제거하려는 경우이 솔루션을 사용할 수 있습니다.

var list = data.filter(form => form.id !== selectedRowDataId);
setData(list);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.