时间戳

首页 > 解决方案 > 合并 2 个数组，更新值

javascript - 合并 2 个数组，更新值

问题描述

在我的减速器中，我从我的 API 中提取结果，我想将此数组与存储中的持久数据（如果存在）结合起来，数据中唯一需要覆盖的字段是bookMarked、totalScore和completed。如果它们不同，我如何比较数组并覆盖所需的属性？

做这个的最好方式是什么？

let arrayFromAPI= [
    {
        bookMarked: false,
        completed: false,
        totalScore: 50,
        current: 0,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 1
    },
    {
        bookMarked: false,
        completed: false,
        totalScore: 50,
        current: 0,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 2
    }
];

let arrayFromPersist = [
    {
        bookMarked: true,
        completed: false,
        totalScore: 50,
        completed: true,
        current: 0,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 1
    },
    {
        bookMarked: true,
        completed: false,
        totalScore: 50,
        completed: true,
        current: 0,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 2
    }
];

标签： javascript

解决方案

您可以使用过滤器并根据属性 ID 合并arrayFromAPI响应中的所有值，arrayFromPersist因为它必须在两个数组中相同才能替换新值arrayFromAPI

let arrayFromAPI= [
    {
        bookMarked: false,
        completed: false,
        totalScore: 500,
        current: 250,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 1
    },
    {
        bookMarked: false,
        completed: false,
        totalScore: 750,
        current: 870,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 2
    }
];

let arrayFromPersist = [
    {
        bookMarked: true,
        completed: false,
        totalScore: 50,
        completed: true,
        current: 0,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 1
    },
    {
        bookMarked: true,
        completed: false,
        totalScore: 50,
        completed: true,
        current: 0,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 2
    }
];

function merge(a, b, prop){
  var reduced = a.filter(function(aitem){
      return ! b.find(function(bitem){
          return aitem[prop] === bitem[prop];
      });
  });
  return reduced.concat(b);
}

console.log(merge(arrayFromPersist, arrayFromAPI, "id"))

推荐阅读