javascript 映射两个嵌套数组并通过查找修改现有数组

Question

我有一个如下所示的 kids 对象：

const kids = {
    name: 'john',
    extra: {
        city: 'London',
        hobbies: [
            {
                id: 'football',
                team: 'ABC',
            },
            {
                id: 'basketball',
                team: 'DEF',
            },
        ],
    },
};

我有以下对象，其中包含每个项目的所有运动和额外信息。

const sports = [
    {
        name: 'volleyball',
        coach: 'tom',
    },
    {
        name: 'waterpolo',
        coach: 'jack',
    },
    {
        name: 'swimming',
        coach: 'kate',
    },
    {
        name: 'football',
        coach: 'sara',
    },
];

我想获取 hobbies 数组中所有 id 的列表，并遍历 sports 数组中的每个运动项目，然后找到，向该对象添加一个额外的字段 available 并给出 true 的值，因此结果将类似于：

const result = [
    {
        name: 'volleyball',
        coach: 'tom',
    },
    {
        name: 'waterpolo',
        coach: 'jack',
    },
    {
        name: 'swimming',
        coach: 'kate',
    },
    {
        name: 'football',
        coach: 'sara',
        available: true
    },
];

顺便说一句，这是我的尝试：

const result = kids.extra.hobbies.map(a => a.id);
for (var key in sports) {
    console.log(sports[key].name);
    const foundIndex = result.indexOf(sports[key].name);
    if ( foundIndex > -1) {
      sports[key].available = true;
    }
}
console.log(sports)

但这太长了...我正在寻找一种代码和健壮的逻辑。

Answer 1

这可以通过多种方式完成；然而，一个简单的方法是将问题分为两个步骤：

我们可以先使用Array.map()函数将孩子的爱好压平成一个数组：

const hobbies = kids.extra.hobbies.map(hobby => hobby.id);

然后，我们可以遍历运动数组并将 active 属性添加到新 hobbies 数组中存在的任何 object：

const result = sports.map(sport => {
  if (hobbies.indexOf(sport.name) !== -1) {
    sport.available = true;
  }

  return sport;
})

完整解决方案

const kids = {
  name: 'john',
  extra: {
    city: 'London',
    hobbies: [{
        id: 'football',
        team: 'ABC',
      },
      {
        id: 'basketball',
        team: 'DEF',
      },
    ],
  },
};

const sports = [{
    name: 'volleyball',
    coach: 'tom',
  },
  {
    name: 'waterpolo',
    coach: 'jack',
  },
  {
    name: 'swimming',
    coach: 'kate',
  },
  {
    name: 'football',
    coach: 'sara',
  },
];

const hobbies = kids.extra.hobbies.map(hobby => hobby.id);


const result = sports.map(sport => {
  if (hobbies.indexOf(sport.name) !== -1) {
    sport.available = true;
  }

  return sport;
})

console.log(result);

Answer 2

首先建立一个找到的运动的数组，然后map同时检查运动对象的名称是否在其中：

const kids = {name:'john',extra:{city:'London',hobbies:[{id:'football',team:'ABC',},{id:'basketball',team:'DEF',},],},}
const sports = [{name:'volleyball',coach:'tom',},{name:'waterpolo',coach:'jack',},{name:'swimming',coach:'kate',},{name:'football',coach:'sara',},];
const sportsInHobbies = kids.extra.hobbies.map(({ id }) => id);
const result = sports.map((sportObj) => {
  const available = sportsInHobbies.includes(sportObj.name);
  return available ? {...sportObj, available } : { ...sportObj };
});
console.log(result);

Answer 3

首先，我会将我的数据结构更改为对象。任何时候你都有一个具有唯一 ID 的列表，对象会让你的生活比数组更容易。考虑到这一点，如果您必须使用数组，您可以执行以下操作：

const hobbies = kids.extra.hobbies
sports.forEach(s => s.available = hobbies.some(h => h.id === s.name))

请注意，这会改变原始运动对象（更改为新的地图），并且还会添加 false/true 而不仅仅是 true。

javascript 映射两个嵌套数组并通过查找修改现有数组

javascript map two nested arrays and modify the existing by lookups

javascript

arrays

json

mapreduce

ecmascript-6