Удалить дубликат определенного значения объекта в массиве reactjs

У меня есть массив объектов, который имеет такое значение

[
    {
        username: 'Goku',
        hero: 'superman',
        power: 'laser',
        isMasked: false
    },
    {
        username: 'Gohan',
        hero: 'batman',
        power: 'brain',
        isMasked: true
    },
    {
        username: 'Goten',
        hero: 'cyclops',
        power: 'laser',
        isMasked: true
    },
    {
        username: 'picollo',
        hero: 'superman',
        power: 'streangth',
        isMasked: false
    },
    {
        username: 'bulma',
        hero: 'batman',
        power: 'rich',
        isMasked: true
    },
    {
        username: 'brolly',
        hero: 'jin',
        power: 'laser',
        isMasked: false
    }
]

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

[
    {
        username: 'Goku',
        hero: 'superman',
        power: 'laser',
        isMasked: false
    },
    {
        username: 'Gohan',
        hero: 'batman',
        power: 'brain',
        isMasked: true
    },
    {
        username: 'Goten',
        hero: 'cyclops',
        power: 'laser',
        isMasked: true
    },
    {
        username: 'brolly',
        hero: 'jin',
        power: 'laser',
        isMasked: false
    }
]

Как видите, пользователи с тем же героем, что и у другого, удаляются, а массив содержит только объекты с уникальными героями, я использую reactjs в качестве JavaScript-фреймворка, как мне это сделать?

Возможный дубликат Удалить повторяющиеся значения из массива JS

— 13.03.2019 05:21

javascript arrays reactjs object

13.03.2019 05:02

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

303

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вы можете сделать это, используя Array.prototype.reduce() и Array.prototype.find(), выполнив следующие действия:

Примените reduce() к arr и установите ac изначально на [].
Внутри reduce() проверьте, есть ли у ac объект, hero которого равен текущему объекту.
Если да, то вернитесь ac.
Если нет, то верните ac вместе с новым товаром.

var arr = [ { username: 'Goku', hero: 'superman', power: 'laser', isMasked: false }, { username: 'Gohan', hero: 'batman', power: 'brain', isMasked: true }, { username: 'Goten', hero: 'cyclops', power: 'laser', isMasked: true }, { username: 'picollo', hero: 'superman', power: 'streangth', isMasked: false }, { username: 'bulma', hero: 'batman', power: 'rich', isMasked: true }, { username: 'brolly', hero: 'jin', power: 'laser', isMasked: false } ];

let res = arr.reduce((ac,a) => ac.find(x=> x.hero === a.hero) ? [...ac] : [...ac,a],[]);
console.info(res);

13.03.2019 05:09

Вы можете сделать это с помощью Array#reduce. Поместите объект в новый массив, если значение героя не существует.

var arr = [ { username: 'Goku', hero: 'superman', power: 'laser', isMasked: false }, { username: 'Gohan', hero: 'batman', power: 'brain', isMasked: true }, { username: 'Goten', hero: 'cyclops', power: 'laser', isMasked: true }, { username: 'picollo', hero: 'superman', power: 'streangth', isMasked: false }, { username: 'bulma', hero: 'batman', power: 'rich', isMasked: true }, { username: 'brolly', hero: 'jin', power: 'laser', isMasked: false } ];

var res = arr.reduce((a, b) => a.map(i => i.hero).indexOf(b.hero) > -1 ? [...a]:[...a,b], []);
console.info(res)

13.03.2019 05:11

Вы можете использовать эту функцию ниже, так как она работает для меня.

function removeDuplicateByKey(arr,key) {
  let uniqueObj = {};
  let filterArr = arr.filter(obj => {
    if (!uniqueObj[obj[key]]) {
      uniqueObj[obj[key]] = 1;
      return obj;
    }
  });
  return filterArr;
}

вы можете назвать это развлечение как removeDuplicateByKey(array,'hero')

13.03.2019 08:10

Ответ принят как подходящий

Вот решение с использованием уменьшать и найти.

const removeDuplicateByKey = (arr, key) => {
  return arr.reduce((acc, val) => {
    //Found duplicate value
    if (acc.find(el => el[key] === val[key])) {
      return [...acc];
    }
    return [...acc, val];
  }, []);
};

Я также создал демо проверить это.

13.03.2019 09:36