Як використовувати ES6 Fat Arrow для .filter () масиву об’єктів


139

Я намагаюся використовувати функцію стрілки 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; }
});

(8:37) SyntaxError: невідомо: Несподіваний маркер (8:37) | нехай дорослі = family.filter (person => if (person.age> 18) люди);
Генрі Чжу

Відповіді:


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 () якщо для об'єкта нічого не повертається, він вважається помилковим? Наприклад, у вашому прикладі ES5 повертаються лише справжні елементи.
Генрі Чжу

2
@HenryZhu: Так. Але мій приклад завжди повертає або, falseабо true, оскільки person.age > 18це завжди falseабо true.
Фелікс Клінг

Версія з "неблокованою", якщо мала повернутися person(звичайно, це не буде робити, як ви вказали ...). Якби ваша перша корекція насправді зробила це ( foo => { if (person.age > 18) return person }), ви отримаєте точний еквівалент тому, що ОП використовується в коді ES5. Хоча це заплутаний код, він НЕ працює, і БУДЕ вирішити проблему. return personбуде примусовим true, і жодне повернення не "повернеться" undefined, до якого буде примусово false.
Аміт

1
@Amit: Звичайно. Я думав, оскільки інша відповідь запропонувала це, я б не повинен був. Однак це може бентежити, тому я його оновив.
Фелікс Клінг

2
@ просто-боріс: Не впевнений, чого б тут досягти .filter. Ви маєте на увазі функції стрілок взагалі?
Фелікс Клінг

46

Ви не можете неявно повертатися з if, вам знадобляться брекети:

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

Однак це може бути спрощено:

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

Чудово, другий працює. Перший повертає порожній масив. Будь-які ідеї?
Генрі Чжу

1
@HenryZhu: Це працює чудово (напевно, щось інше не так з кодом чи транспілером). Але це все одно не правильний шлях.
Фелікс Клінг

1
Як би це було зроблено у випадку, якщо у вас є інше твердження? Я намагаюся побачити це за допомогою потрійного, але не можу виявити правильний синтаксис
Winnemucca

@stevek Точно так, як ви б з нормальною функцією, як у першому прикладі.
Кіт Сунде

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);
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.