Получить все пары объектов в один массив (Javascript)

#javascript #arrays #reactjs #object #jsx

#javascript #массивы #reactjs #объект #jsx

Вопрос:

У меня есть такой массив :

 const arr = [{name: "some", category: "Cat1"}, {name: "else", category: "Cat2"}, {name: "stuff", category: "Cat2"}]

Я хочу создать новый массив, который имеет только категорию без таких пар :

 const newArr =[Cat1, Cat2]

а затем сопоставьте его, чтобы отобразить в моем элементе JSX. Я много чего перепробовал, но ничего не помогло, спасибо за вашу помощь.

Ответ №1:

Использование set object подхода — лучший подход. Как уже упоминалось здесь, я собираюсь показать другие подходы.

Использование объекта:

Вы могли бы использовать Array.prototype.forEach() метод with Nullish coalescing operator (??) для выполнения своей работы.

 const arr = [
  { name: 'some', category: 'Cat1' },
  { name: 'else', category: 'Cat2' },
  { name: 'stuff', category: 'Cat2' },
];
const ret = {};
arr.forEach((x) => {
  ret[x.category] = ret[x.category] ?? x.category;
});
console.log(Object.values(ret));

Использование объекта Map:

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

 const arr = [
  { name: 'some', category: 'Cat1' },
  { name: 'else', category: 'Cat2' },
  { name: 'stuff', category: 'Cat2' },
];
const map = new Map();
const ret = [];
arr.forEach((x) => {
  if (!map.has(x.category)) {
    map.set(x.category, true);
    ret.push(x.category);
  }
});
console.log(ret);

Использование массива:

Array.prototype.includes() метод проверяет, содержит ли массив указанный элемент или нет, и возвращает true или false на основе этого.

 const arr = [
  { name: 'some', category: 'Cat1' },
  { name: 'else', category: 'Cat2' },
  { name: 'stuff', category: 'Cat2' },
];
const ret = [];
arr.forEach((x) => {
  if (!ret.includes(x.category)) ret.push(x.category);
});
console.log(ret);

Используя метод Reduce:

Array.prototype.reduce() метод запускает заданную функцию для каждой итерации и уменьшает массив до одного значения.

 const arr = [
  { name: 'some', category: 'Cat1' },
  { name: 'else', category: 'Cat2' },
  { name: 'stuff', category: 'Cat2' },
];

const ret = Object.values(
  arr.reduce((prev, c) => {
    const p = prev;
    const key = c.category;
    if (!p[key]) p[key] = c.category;
    return p;
  }, {})
);
console.log(ret);

Ответ №2:

Попробуйте это

 const arr = [
  {name: "some", category: "Cat1"}, 
  {name: "else", category: "Cat2"}, 
  {name: "stuff", category: "Cat2"}
]

const result = arr.map(a=> a.category);
console.log([...new Set(result)]);

Ответ №3:

Вы ищете что-то вроде этого:

 const arr = [{name: "some", category: "Cat1"}, {name: "else", category: "Cat2"}, {name: "stuff", category: "Cat2"}];

console.log([...new Set(arr.map(x => x.category))]);