javascript-合并、合并、转换2个不同的对象数组

我不知道如何变换和组合两个对象数组

我有两个对象数组：

const selectedCourse = [
    {
      "courseType": [5],
      "id": 26,
      "title": "Apple Tart with Apricot Glaze",
  },
  {
    "courseType": [3],
    "id": 16,
    "title": "Classic Caesar Salad",
},
{
  "courseType": [1,2],
  "id": 10,
  "title": "Lobster Bisque",
},
{
  "courseType": [3],
  "id": 16,
  "title": "Classic Caesar Salad",
},
]

const courseTypes = [
{name: "Hors d'oeuvres", id: 0},
 {name: "Soup", id: 1},
 {name: "Fish", id: 2},
 {name: "Salad", id: 3},
 {name: "Main course", id: 4},
 {name: "Dessert", id: 5}
]

第一个JSON中的courseType属性是一个数字数组，对应于第二个JSON中的courseType索引和属性id

这种情况下的结果应该是：

const result = [
  {
    courseType: 1,
    courseName: "Soup",
    courses: [
      {
        "courseType": [1,2],
        "id": 10,
        "title": "Lobster Bisque",
      }      
    ]
  },
  {
    courseType: 3,
    courseName: "Salad",
    courses: [
      {
        "courseType": [1,2],
        "id": 10,
        "title": "Lobster Bisque",
      }      
    ]
  },
  {
    courseType: 3,
    courseName: "Fish",
    courses: [
      {
        "courseType": [3],
        "id": 16,
        "title": "Classic Caesar Salad",
      },
      {
        "courseType": [3],
        "id": 16,
      },      
    ]
  },
  {
    courseType: 5,
    courseName: "Main course",
    courses: [
      {
        "courseType": [5],
        "id": 26,
        "title": "Apple Tart with Apricot Glaze",
      }
    ]
  }
]

---

预期结果必须通过按courseType属性过滤来组合这两个数组。

您可以使用

map

和

filter

如下：

const selectedCourse=[{“courseType”：[5]，“id”：26，“标题”：“杏釉苹果馅饼”，}，{“courseType”：[3]，“id”：16，“经典凯撒沙拉”，}，{“courseType”：[1,2]，“id”：10，“标题”：“龙虾浓汤”，}，{“courseType”：[3]，“id”：16，“标题”：“经典凯撒沙拉”，}，]
const courseTypes=[{name:“开胃菜”，id:0}，{name:“汤”，id:1}，{name:“鱼”，id:2}，{name:“沙拉”，id:3}，{name:“主菜”，id:4}，{name:“甜点”，id:5}]；
const result=courseType.map（courseType=>({
courseType:courseType.id，
courseName:courseType.name，
课程：selectedCourse.filter（课程=>course.courseType.includes（courseType.id））
})).filter（extended=>extended.courses.length）；
log（JSON.stringify（result，null，2））假设您希望所有项目都带有
selectedCourse
，您可以使用
地图
收集所有课程，然后从找到的值中生成一个新数组

这个解决方案也包括鱼


const
selectedCourse=[{courseType:[5]，id:26，标题：“杏釉苹果馅饼”}，{courseType:[3]，id:16，标题：“经典凯撒沙拉”}，{courseType:[1,2]，id:10，标题：“龙虾浓汤”}，{courseType:[3]，id:16，标题：“经典凯撒沙拉”}，
courseTypes=[{name:“开胃菜”，id:0}，{name:“汤”，id:1}，{name:“鱼”，id:2}，{name:“沙拉”，id:3}，{name:“主菜”，id:4}，{name:“甜点”，id:5}，]，
map=selectedCourse.reduce（（m，o）=>o.courseType.reduce（（n，id）=>n.set（id，[…（n.get（id）| |[]），o]），m），新map），
结果=courseTypes.reduce(
（r，{name:courseName，id:courseType}）=>（map.get（courseType）| |[]）.reduce（（s，courses）=>s.concat（{courseType，courseName，courseName}），r），
[]
);
控制台日志（结果）
。作为控制台包装{max height:100%！important；top:0；}
而“trincot”代码对于chrome和Mozila来说效果不错，但在IE edge和IE 10及以下版本中不起作用。您需要将其转换为纯javascript。下面是在所有浏览器中都可以使用的代码

if (!Array.prototype.includes) {
   Object.defineProperty(Array.prototype, 'includes', {
   value: function(searchElement, fromIndex) {

  if (this == null) {
    throw new TypeError('"this" is null or not defined');
  }

  // 1. Let O be ? ToObject(this value).
  var o = Object(this);

  // 2. Let len be ? ToLength(? Get(O, "length")).
  var len = o.length >>> 0;

  // 3. If len is 0, return false.
  if (len === 0) {
    return false;
  }

  // 4. Let n be ? ToInteger(fromIndex).
  //    (If fromIndex is undefined, this step produces the value 0.)
  var n = fromIndex | 0;

  // 5. If n ≥ 0, then
  //  a. Let k be n.
  // 6. Else n < 0,
  //  a. Let k be len + n.
  //  b. If k < 0, let k be 0.
  var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

  function sameValueZero(x, y) {
    return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
  }

  // 7. Repeat, while k < len
  while (k < len) {
    // a. Let elementK be the result of ? Get(O, ! ToString(k)).
    // b. If SameValueZero(searchElement, elementK) is true, return true.
    if (sameValueZero(o[k], searchElement)) {
      return true;
    }
    // c. Increase k by 1. 
    k++;
  }

  // 8. Return false
  return false;
    }
  });
}
var selectedCourse = [{ "courseType": [5], "id": 26, "title": "Apple Tart with Apricot Glaze" }, { "courseType": [3], "id": 16, "title": "Classic Caesar Salad" }, { "courseType": [1, 2], "id": 10, "title": "Lobster Bisque" }, { "courseType": [3], "id": 16, "title": "Classic Caesar Salad" }];
var courseTypes = [{ name: "Hors d'oeuvres", id: 0 }, { name: "Soup", id: 1 }, { name: "Fish", id: 2 }, { name: "Salad", id: 3 }, { name: "Main course", id: 4 }, { name: "Dessert", id: 5 }];
var result = courseTypes.map(function (courseType) {
return {
    courseType: courseType.id,
    courseName: courseType.name,
    courses: selectedCourse.filter(function (course) {
        return course.courseType.includes(courseType.id);
    })
  };
}).filter(function (extended) {
   return extended.courses.length;
});

 console.log(JSON.stringify(result, null, 2));

if（！Array.prototype.includes）{
Object.defineProperty（Array.prototype，'includes'{
值：函数（searchElement，fromIndex）{
if（this==null）{
抛出新的TypeError（“'this'为null或未定义”）；
}
//1.设O为？ToObject（该值）。
var o=对象（此）；
//2.设len为？ToLength（？Get（O，“length”））。
var len=o.length>>>0；
//3.如果len为0，则返回false。
如果（len==0）{
返回false；
}
//4.设n为？ToInteger（fromIndex）。
//（如果未定义fromIndex，此步骤将生成值0。）
var n=fromIndex | 0；
//5.如果n≥ 0，那么
//让k为n。
//6.否则n<0，
//让k是len+n。
//b.如果k<0，则k为0。
var k=Math.max（n>=0？n:len-Math.abs（n），0）；
函数sameValueZero（x，y）{
返回x==y | |（x的类型=='number'&y的类型=='number'&isNaN（x）&isNaN（y））；
}
//7.当k
在“result”中的第二个对象上，当我阅读第一段时，“courseType”属性等于2，我认为“太好了！终于有人不调用JavaScript对象JSON了”。第二段输入的太糟糕了……您的预期输出为
courseType:3，courseName:“Fish”
我想这是一个输入错误，因为Fish在您的输入中有一个id 2？这是一个很好的解决方案，但我需要在结果中只显示包含课程的courseType，因此如果长度为0，则不应显示。正如您在我的示例中所看到的：）在您发表评论之前，您看到我发布的更新了吗？我还添加了一个解释。你说的“上述代码”是什么意思？请注意，答案是按用户设置排序的，所以说“以上”没有多大意义。最好在答案下以评论的形式发表评论；-）您似乎建议Edge不支持
包含
，但它支持。注：“IE边缘”不是一件事。要么是IE，要么是Edge。答案总是很好：）