Блог

Главная - Вопросы по программированию - Массив — Каков наилучший способ проверить, существует ли значение в одном из элементов массива (React / JS)

Массив — Каков наилучший способ проверить, существует ли значение в одном из элементов массива (React / JS)

#javascript #arrays #reactjs

#javascript #массивы #reactjs

Вопрос:

Итак, это пример массива данных, который я получу обратно из серверной части. Существует несколько вариантов использования, как показано ниже, и я хочу настроить таргетинг на основе значений подписки в массиве.

Пример: 1

 const orgList = [
    { id: "1", orgName: "Organization 1", subscription: "free" },
    { id: "2", orgName: "Organization 2", subscription: "business" },
];

В примере 1 — когда array возвращается с этой комбинацией — будет некоторый стиль и текст для целевого элемента, subscription: free чтобы обновить его подписку

Пример 2:

 const orgList = [
    { id: "1", orgName: "Organization 1a", subscription: "pro" },
    { id: "2", orgName: "Organization 2a", subscription: "business" },
];

Пример 3:

 const orgList = [
    { id: "1", orgName: "Organization 1b", subscription: "free" },
];

В примере 3 — когда массив возвращается только с одним элементом — будет некоторый стиль и текст, предназначенный для элемента, скажем, для обновления его подписки

На данный момент я просто использую map для просмотра массива, который я получаю обратно следующим образом: {orgList.map((org) => (...do something here)} но с этим я немного ограничен, поскольку я не думаю, что это лучший способ справиться с 3 вариантами использования / примерами выше.

Другая идея — тоже сделать что-то подобное перед отображением, но это:

const freeSubAndBusinessSub = org.some(org => org.subscription === 'free' amp;amp; org.subscription === "business")

но, похоже, не работает, поскольку он возвращается false , а затем я застрял и не уверен, как действовать дальше..

Итак, мой вопрос в том, как лучше всего подойти к такому массиву, чтобы определить, что делать с элементами на основе их значений?

Комментарии:

1. Я думаю, что Array.map это лучший способ сделать то, что вы хотите. Во время сопоставления у вас может быть некоторая логика для добавления стиля для разных типов подписки. Что заставило вас думать, что это ограничивает вас?

2. Я не понял, в чем проблема с использованием функции map? разве ваша проблема не в проверке типа подписки? вы можете просто перебрать массив и проверить тип подписки (используя if statment или switch ), и после этого вы решаете, что делать в каждом конкретном случае. я что-то упускаю?

3. org.subscription === 'free' amp;amp; org.subscription === "business" — как org.subscription когда-либо будут оба 'free' и 'business' одновременно? Не уверен, к чему вы стремитесь, но, возможно, вы хотите сделать org.filter((o) => o.subscription === 'free' || o.subscription === 'business').map((o) => ...)

4. Я думаю, я недостаточно хорошо объясняю выше .. без чрезмерного усложнения .. я предполагаю, что будет вариант использования, когда массив вернется, [ {subscription: pro}, {subscription: business}] и если это так, это означает, что у пользователя есть две верхние подписки под его учетной записью, и, следовательно, не происходит увеличения продаж, поэтому стиль, который нацелен на pro , не будет применятьсяздесь. Но если arr возвращается только с этим [ {subscription: pro}] , я хочу что-то сделать, чтобы предложить пользователю обновить его до business. Думаю, я просто хочу найти более простой способ обработки различных вариантов использования, например.

5. Короче говоря, я думаю, я хочу иметь возможность сначала отфильтровать массив, зная, какие типы подписок есть в массиве, а затем выполнить map

Ответ №1:

Вы упоминаете, что использование .map() ограничено, но вы не расширяете его. Логически то, что звучит так, как будто вы хотите, — это отдельный список для каждого типа, с которым нужно действовать. Вы можете выполнить это с помощью .filter() or .reduce() , однако в данном случае .map() это ваш друг.

 // Example 1
const free = orgList.filter(org => org.subscription === 'free');
const business = orgList.filter(org => org.subscription === 'business');
free.map(org => /* do free stuff */);
business.map(org => /* do business stuff */);
  
 // Example 2
const subscriptions = orgList.reduce((all, cur) => {
  if (!all.hasOwnProperty(cur.subscription)) {
    all[cur.subscription] = [];
  }
  all[cur.subscription].push(cur);
  return all;
}, {});
subscriptions['free'].map(org => /* do free stuff */);
subscriptions['business'].map(org => /* do business stuff */);
  
 // Example 3
orgList.map(org => {
  switch(org.subscription) {
    case 'free':
      /* do free stuff */
    break;
    case 'business':
      /* do business stuff */
    break;
  }
})

Вы заметите, что во всех примерах вам все равно нужно сопоставлять отдельные организации для выполнения ваших действий. Кроме того, в первых двух примерах вы будете касаться каждого элемента более одного раза, что может быть невероятно неэффективным. С помощью единого .map() решения вы касаетесь каждого элемента списка только один раз. Если вы чувствуете, что ваши do free stuff действия становятся громоздкими, вы можете разделить их на отдельные функции.