ES6 Fat Arrowを使用してオブジェクトの配列を.filter()する方法


139

.filter大人を返すためにES6の矢印機能を使用しようとしています(ジャックとジル)。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)SyntaxError:不明:予期しないトークン(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返す必要があります。truefalse

必要なのは

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

ES5の場合:

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

ああ、なんて素晴らしい説明でしょう。.filter()で、オブジェクトに対して何も返されない場合、falseと見なされますか?たとえば、ES5の例では、true要素のみが返されます。
Henry Zhu

2
@HenryZhu:はい。しかし、私の例では、常にどちらかを返しfalseたりtrueするので、person.age > 18常にどちらかですfalsetrue
Felix Kling

返されるはずだった場合に「ブロックされpersonていない」バージョン(もちろん、あなたが指摘したようにそれはしません...)。最初の修正で実際にそれが行われた場合(foo => { if (person.age > 18) return person })、ES5コードで使用されているOPとまったく同じ結果が得られます。これは混乱を招くコードですが、機能し、問題を解決します。return personは強制的にtrueになり、戻りは「戻り」ません。undefined強制はに強制されfalseます。
2015

1
@アミット:もちろん。他の答えがそれを示唆しているので、私はそうする必要はないと思いました。しかし、これは混乱を招く可能性があるため、更新しました。
Felix Kling 2015

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

すごい、2つ目は動作します。最初のものは空の配列を返します。何か案は?
Henry Zhu

1
@HenryZhu:正常に動作します(おそらく、コードまたはトランスパイラーに何か他の問題があります)。しかし、それはとにかく正しい方法ではありません。
Felix Kling

1
elseステートメントがある場合、これはどのように行われますか?私はこれを三項で見ようとしていますが、正しい構文を特定できないようです
Winnemucca

@stevek最初の例のような通常の関数とまったく同じです。
キットSunde 2017年

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.