通过将对象数组与数组进行比较来创建新数组

Question

我有一个 gameData 列表和使用过的运动员。我需要创建一个新数组，该数组仅包含 gameData 中的 Athlete，而该数组不在 usedAthletes 中。老实说，在过去一天左右的时间里，我已经到处查看，尝试了 lodash 和各种东西。任何建议都会很棒。如果有 ES6 方法可以工作，知道这一点也很酷:)

const gameData = [
        {Athlete: "Peyton Manning", Img: "url"},
        {Athlete: "Tony Hawk", Img: "url"},
        {Athlete: "Tom Brady", Img: "url"},
        {Athlete: "Usain Bolt", Img: "url"},
        {Athlete: "Kevin Durant", Img: "url"},
        {Athlete: "Cristiano Ronaldo", Img: "url"},
        {Athlete: "Michael Phelps", Img: "url"},
        {Athlete: "Conor McGregor", Img: "url"},
        {Athlete: "Phil Mickelson", Img: "url"},
        {Athlete: "Stephen Curry", Img: "url"},
        {Athlete: "Rory McIlroy", Img: "url"},
        {Athlete: "Mike Trout", Img: "url"},
        {Athlete: "Danica Patrick", Img: "url"},
        {Athlete: "Drew Brees", Img: "url"},
        {Athlete: "Carmelo Anthony", Img: "url"},
        {Athlete: "Ryan Lochte", Img: "url"},
        {Athlete: "Eli Manning", Img: "url"},
        {Athlete: "Chris Paul", Img: "url"}
]

const usedAthletes = ["Peyton Manning", "Tony Hawk", "Tom Brady"];

gameData.forEach( x => {
  const gameDataNamesOnly = x.Athlete;
  newAnswerlist = [];
  usedAthletes.forEach( item => {
    if(gameDataNamesOnly != item){
        //I was trying to push to newAnswerList here but could get access to gameDataNamesOnly correctly or something.
    }
  })
  console.log(newAnswerlist)
})

Answer 1

使用过滤器后跟地图，

const newAnswerlist = gameData
.filter(data => usedAthletes.indexOf(data.Athlete) !== -1)
.map(data => data.Athlete);

如果您也想要 img 信息，请仅使用过滤器，

const newAnswerlist = gameData
.filter(data => usedAthletes.indexOf(data.Athlete) !== -1);

Answer 2

您可以将Array#filter 与Array#includes 一起使用，并排除usedAthletes。

您的解决方案不起作用，因为您在每次迭代中初始化结果数组。

const
    gameData = [{ Athlete: "Peyton Manning", Img: "url" }, { Athlete: "Tony Hawk", Img: "url" }, { Athlete: "Tom Brady", Img: "url" }, { Athlete: "Usain Bolt", Img: "url" }, { Athlete: "Kevin Durant", Img: "url" }, { Athlete: "Cristiano Ronaldo", Img: "url" }, { Athlete: "Michael Phelps", Img: "url" }, { Athlete: "Conor McGregor", Img: "url" }, { Athlete: "Phil Mickelson", Img: "url" }, { Athlete: "Stephen Curry", Img: "url" }, { Athlete: "Rory McIlroy", Img: "url" }, { Athlete: "Mike Trout", Img: "url" }, { Athlete: "Danica Patrick", Img: "url" }, { Athlete: "Drew Brees", Img: "url" }, { Athlete: "Carmelo Anthony", Img: "url" }, { Athlete: "Ryan Lochte", Img: "url" }, { Athlete: "Eli Manning", Img: "url" }, { Athlete: "Chris Paul", Img: "url" }],
    usedAthletes = ["Peyton Manning", "Tony Hawk", "Tom Brady"],
    result = gameData.filter(o => !usedAthletes.includes(o.Athlete));
      
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

const gameData = [
        {Athlete: "Peyton Manning", Img: "url"},
        {Athlete: "Tony Hawk", Img: "url"},
        {Athlete: "Tom Brady", Img: "url"},
        {Athlete: "Usain Bolt", Img: "url"},
        {Athlete: "Kevin Durant", Img: "url"},
        {Athlete: "Cristiano Ronaldo", Img: "url"},
        {Athlete: "Michael Phelps", Img: "url"},
        {Athlete: "Conor McGregor", Img: "url"},
        {Athlete: "Phil Mickelson", Img: "url"},
        {Athlete: "Stephen Curry", Img: "url"},
        {Athlete: "Rory McIlroy", Img: "url"},
        {Athlete: "Mike Trout", Img: "url"},
        {Athlete: "Danica Patrick", Img: "url"},
        {Athlete: "Drew Brees", Img: "url"},
        {Athlete: "Carmelo Anthony", Img: "url"},
        {Athlete: "Ryan Lochte", Img: "url"},
        {Athlete: "Eli Manning", Img: "url"},
        {Athlete: "Chris Paul", Img: "url"}
];

const usedAthletes = ["Peyton Manning", "Tony Hawk", "Tom Brady"];


var value = gameData.map((data) => {if(!usedAthletes.includes(data.Athlete)){return data;}}).filter((data) => data);

console.log(value);

Answer 4

试试这个：

const gameData = [
        {Athlete: "Peyton Manning", Img: "url"},
        {Athlete: "Tony Hawk", Img: "url"},
        {Athlete: "Tom Brady", Img: "url"},
        {Athlete: "Usain Bolt", Img: "url"},
        {Athlete: "Kevin Durant", Img: "url"},
        {Athlete: "Cristiano Ronaldo", Img: "url"},
        {Athlete: "Michael Phelps", Img: "url"},
        {Athlete: "Conor McGregor", Img: "url"},
        {Athlete: "Phil Mickelson", Img: "url"},
        {Athlete: "Stephen Curry", Img: "url"},
        {Athlete: "Rory McIlroy", Img: "url"},
        {Athlete: "Mike Trout", Img: "url"},
        {Athlete: "Danica Patrick", Img: "url"},
        {Athlete: "Drew Brees", Img: "url"},
        {Athlete: "Carmelo Anthony", Img: "url"},
        {Athlete: "Ryan Lochte", Img: "url"},
        {Athlete: "Eli Manning", Img: "url"},
        {Athlete: "Chris Paul", Img: "url"}
]

const usedAthletes = ["Peyton Manning", "Tony Hawk", "Tom Brady"];
const newAnswerlist = [];

gameData.forEach( data => {
  if (usedAthletes.indexOf(data.Athlete) == -1) {
    newAnswerlist.push(data.Athlete);
  }
});

newAnswerlist 应该包含你想要的数组。

Answer 5

Lodash 的 _.differenceWith() 使用比较器创建了一个数组值数组，该数组不包含在其他给定数组中：

const gameData = [{"Athlete":"Peyton Manning","Img":"url"},{"Athlete":"Tony Hawk","Img":"url"},{"Athlete":"Tom Brady","Img":"url"},{"Athlete":"Usain Bolt","Img":"url"},{"Athlete":"Kevin Durant","Img":"url"},{"Athlete":"Cristiano Ronaldo","Img":"url"},{"Athlete":"Michael Phelps","Img":"url"},{"Athlete":"Conor McGregor","Img":"url"},{"Athlete":"Phil Mickelson","Img":"url"},{"Athlete":"Stephen Curry","Img":"url"},{"Athlete":"Rory McIlroy","Img":"url"},{"Athlete":"Mike Trout","Img":"url"},{"Athlete":"Danica Patrick","Img":"url"},{"Athlete":"Drew Brees","Img":"url"},{"Athlete":"Carmelo Anthony","Img":"url"},{"Athlete":"Ryan Lochte","Img":"url"},{"Athlete":"Eli Manning","Img":"url"},{"Athlete":"Chris Paul","Img":"url"}];

const usedAthletes = ["Peyton Manning", "Tony Hawk", "Tom Brady"];

const result = _.differenceWith(gameData, usedAthletes, ({ Athlete }, othVal) => Athlete === othVal);

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

如果您只需要运动员姓名，可以使用_.difference() 更简单的解决方案：

const gameData = [{"Athlete":"Peyton Manning","Img":"url"},{"Athlete":"Tony Hawk","Img":"url"},{"Athlete":"Tom Brady","Img":"url"},{"Athlete":"Usain Bolt","Img":"url"},{"Athlete":"Kevin Durant","Img":"url"},{"Athlete":"Cristiano Ronaldo","Img":"url"},{"Athlete":"Michael Phelps","Img":"url"},{"Athlete":"Conor McGregor","Img":"url"},{"Athlete":"Phil Mickelson","Img":"url"},{"Athlete":"Stephen Curry","Img":"url"},{"Athlete":"Rory McIlroy","Img":"url"},{"Athlete":"Mike Trout","Img":"url"},{"Athlete":"Danica Patrick","Img":"url"},{"Athlete":"Drew Brees","Img":"url"},{"Athlete":"Carmelo Anthony","Img":"url"},{"Athlete":"Ryan Lochte","Img":"url"},{"Athlete":"Eli Manning","Img":"url"},{"Athlete":"Chris Paul","Img":"url"}];

const usedAthletes = ["Peyton Manning", "Tony Hawk", "Tom Brady"];

const result = _(gameData)
  .map('Athlete')
  .difference(usedAthletes)
  .value();

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>