Удалите запятую, если это последний элемент в объекте

#javascript #reactjs

Вопрос:

Я пытаюсь удалить запятую в элементе, если это последний элемент объекта.

  Object.entries(product.name).map(
            ([key, value]) => {
            return value ? <span>{`${key}, `}</span> : value amp;amp; key === key.length - 1 ? <span>{key}</span> : null;
            })

Таким образом, в принципе, если значение key равно true , оно вернет запятую рядом с ключом, и если оно не последнее, если оно последнее, оно должно возвращать только ключ без запятой.

Как я могу добиться этого здесь?

1. if (value) { return ... } else { if (value amp;amp; key === key.length - 1) { ... } else { return null } } — else { if (...) ... } Часть никогда не будет выполнена, потому что в противном value случае она должна была бы быть ложной и правдивой одновременно o.O

2. Есть ли причина, по которой это преобразуется в троичный оператор внутри троичного оператора?

3. тернарный оператор затруднил чтение вашего кода. Что вы хотите вернуть, если value это ложное значение? Если вы ничего не возвращаете, результирующий массив будет содержать значение undefined с этим индексом.

4. Должен , ли быть в ... ? В противном случае просто возьмите ключи и .join() их с  помощью и добавьте a  в начале и an  в конце

Ответ №1:

Лучшим подходом было бы отфильтровать true значения из product.name объекта, а затем просто join массив с запятой ,

  const products = Object.keys(product.name).filter((key)=>product.name[key]);
 const commaSeperatedProducts = products.join(",")

Ответ №2:

Вы можете проверить индекс. Если индекс равен arr.length - 1 , это последний элемент в массиве.

 Object.entries(product.name).map(([key, value], index, arr) => {
  if (!value) return;
  return index === arr.length - 1 ? (
    <span>{key}</span>
  ) : (
    <span>{`${key}, `}</span>
  );
});

Ответ №3:

Неясно, как выглядит продукт структуры данных, поэтому я сделал предположение и включил его в предоставленный мной ответ. Однако, если это предположение неверно, обновите меня.

Кроме того, для каждого диапазона, который вы сопоставляете, требуется уникальный идентификатор (ключ), чтобы они использовались эффективно.

 import React from "react";
import ReactDOM from "react-dom";

const product = {
  name: {
    hat: "UID-001",
    shoes: "UID-002",
    jacket: "UID-003",
    jeans: "UID-004"
  }
};

const MapExample = () =>
  Object.entries(product.name).map(([key, _], idx, arr) =>
    idx === arr.length - 1 ? <span key={key}>{`${key}`}</span> : <span key={key}>{`${key},`}</span>
  );

ReactDOM.render(<MapExample />, document.getElementById("root"));

Ответ №4:

key === key.length - 1 ? это условие неверно. key.length -1 не возвращает последний ключ. Используйте Object.keys(ObjName).length -1 , чтобы получить номер последнего ключа, а затем используйте Object.keys(ObjName)[keyNumber] , чтобы получить последний ключ.

 var lastKeyNum = Object.keys(product.name).length -1
Object.entries(product.name).map(
    ([key, value]) => {
    return value ? key === Object.keys(product.name)[lastKeyNum] ? <span>{key}</span>  : <span>{`${key}, `}</span>  : null
})

1. Пожалуйста, не публикуйте только код в качестве ответа, но также предоставьте объяснение, что делает ваш код и как он решает проблему вопроса. Ответы с объяснением обычно более полезны и более качественны и с большей вероятностью привлекут одобрение.

Ответ №5:

удалите «,» из возврата в карте и добавьте соединение, чтобы вернуть его с запятой. у меня нет вашей структуры данных, но что-то подобное должно выполнить эту работу:

 Object.entries(product.name).map(
   ([key, value]) => {
       return value ? <span>{`${key}`}</span> : value amp;amp; key === key.length - 1 ? <span>{key}</span> : null;
    }).join(", ")