Question

我有以下2个数组：

    arr1 = [
            {
                "key1": "Value1"
            },
            {
                "key2": "Value2"
            },
            {
                "key3": "Test3"
            },
            {
                "key4": "Test4"
            },
            {
                "key5": "Test5"
            },
            {
                "key6": "Test6"
            },
            {
                "key7": "Test7"
            }
        ]

第二个数组是

    arr2 = [
            {
                "key3": "Value3-changed"
            },
            {
                "key6": "Value6-changed"
            }

        ]

现在，一旦我加入2个数组，结果将是

   resultArr = [
        {
            "key1": "Value1"
        },
        {
            "key2": "Value2"
        },
        {
            "key3": "Value3-changed"
        },
        {
            "key4": "Test4"
        },
        {
            "key5": "Test5"
        },
        {
            "key6": "Value6-changed"
        },
        {
            "key7": "Test7"
        }
    ]

我看到了Lodash union of arrays of objects的解决方案。但至于我的情况，键是不同的。有没有解决这个问题的指针？我试图使用lodash _.unionBy然后_.uniqWith但没有得到所需的结果。

谢谢，安迪

Answer 1

不需要lodash。首先将两个数组缩减为单个对象，其中的键稍后会覆盖以前设置的任何值：

const obj = [...arr1, ...arr2].reduce((acc,cur) => Object.assign(acc, cur), {});
// {key1: value1, ...}

编辑，甚至更简单：

const obj = Object.assign({}, ...arr1, ...arr2);

然后将键映射回对象数组：

const resultArray = Object.keys(obj)
   .sort() // if alphanumeric order of keys matters to you
   .map(key => { const o={}; o[key]=obj[key]; return o;});

Answer 2

你可以不用像这样的lodash这样做：

（推送新对象，或更新现有对象。

＆＃13;

let arr1 = [
    {
        "key1": "Value1"
    },
    {
        "key2": "Value2"
    },
    {
        "key3": "Test3"
    },
    {
        "key4": "Test4"
    },
    {
        "key5": "Test5"
    },
    {
        "key6": "Test6"
    },
    {
        "key7": "Test7"
    },
]

let arr2 = [
    {
        "key3": "Value3-changed"
    },
    {
        "key6": "Value6-changed"
    },
    {
        "key10": "Value10-new"
    },
]

for (let obj of arr2) {
    let keyName = Object.keys(obj)[0];
    let existingObject = arr1.find(x => Object.keys(x)[0] === keyName );
    
    if (existingObject) {
        // object with same key exists. So we update it.
        existingObject[keyName] = obj[keyName];
    } else {
        // key was not found, this is a new object, let's add it.
        arr1.push(obj);
    }
}

console.log(arr1)

＆＃13;

当然，这可能是一种更优雅的方式。

Answer 3

如果您有权访问map(chunk(toPairs(assign(...arr1, ...arr2))), fromPairs)点差运营商：

map(chunk(toPairs(spread(assign)(concat(arr1, arr2)))), fromPairs)

否则：

_.mixin({
  'assignPairsChunkAndMapObjects' : function(arr1, arr2) {
    return _.map(_.chunk(_.toPairs(_.assign(...arr1, ...arr2))), _.fromPairs);
  },
  'assignPairsChunkAndMapObjectsChained' : function(arr1, arr2) {
    return _.chain(_.assign(...arr1, ...arr2)).toPairs().chunk().map(_.fromPairs).value();
  }
});

哪个是丑陋的，但能胜任。

Lodash插件

<a href="{{ url('videos') }}">
    <h6 class="borbottom text-uppercase"><i class="fab fa-youtube"></i> Serke TV</h6>
</a>

{% for p in page.find('/videos').children if p != page %}
  <h3>{{ p.title }}</h3>
{% endfor %}

Answer 4

使用原生javascript，您可以使用for ..in＆amp;地图功能

＆＃13;

var arr1 = [{
    "key1": "Value1"
  },
  {
    "key2": "Value2"
  },
  {
    "key3": "Test3"
  },
  {
    "key4": "Test4"
  },
  {
    "key5": "Test5"
  },
  {
    "key6": "Test6"
  },
  {
    "key7": "Test7"
  }
]
var arr2 = [{
    "key3": "Value3-changed"
  },
  {
    "key6": "Value6-changed"
  }

];
// get object keys from both
var getArr2Keys = arr2.map(function(items) {
  for (let keys in items) {
    return keys;
  }
});

var getArr1Keys = arr1.map(function(items) {
  for (let keys in items) {
    return keys;
  }
});


// iterate over the newly created object and check if the key matched
getArr2Keys.forEach(function(itemArr2, index) {
  var x = getArr1Keys.findIndex(function(itemArr1) {
    return itemArr2 === itemArr1;
  })
  // replace the key value of arr1 with value from arr2
  arr1[x][itemArr2] = arr2[index][itemArr2]

})

console.log(arr1)

＆＃13;

Answer 5

您可以创建一个mixin来迭代第一个数组并将其与第二个数组合并。

_.mixin({
  'mergeObjectList' : function(arr1, arr2) {
    return _.map(arr1, function(obj) {
      Object.keys(obj).forEach(key => {
        var found = _.find(arr2, x => Object.keys(x).indexOf(key) > -1);
        if (found != null) {
          return _.merge(obj, found);
        }
      });
      return obj;
    });
  }
});

var arr1 = [
  { "key1": "Value1" },
  { "key2": "Value2" },
  { "key3": "Test3" },
  { "key4": "Test4" },
  { "key5": "Test5" },
  { "key6": "Test6" },
  { "key7": "Test7" }
];

var arr2 = [
  { "key3": "Value3-changed" },
  { "key6": "Value6-changed" }
];

var arr3 = _.mergeObjectList(arr1, arr2);

document.body.innerHTML = JSON.stringify(arr3, null, 4);

body { font-family: monospace; white-space: pre; }

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

Answer 6

您还可以使用map和find数组方法。

在ES5中

var arr1 = [{
    "key1": "Value1"
  }, {
    "key2": "Value2"
  }, {
    "key3": "Test3"
  }, {
    "key4": "Test4"
  }, {
    "key5": "Test5"
  }, {
    "key6": "Test6"
  }, {
    "key7": "Test7"
  }],

  arr2 = [{
    "key3": "Value3-changed"
  }, {
    "key6": "Value6-changed"
  }],

  key = '';

var result = arr1.map(function(item) {
  key = Object.keys(item)[0];
  return arr2.find(function(v) {
    return v[key]
  }) || item;
});

console.log(result);

在ES6中

const arr1 = [{
    "key1": "Value1"
  }, {
    "key2": "Value2"
  }, {
    "key3": "Test3"
  }, {
    "key4": "Test4"
  }, {
    "key5": "Test5"
  }, {
    "key6": "Test6"
  }, {
    "key7": "Test7"
  }],

  arr2 = [{
      "key3": "Value3-changed"
    }, {
      "key6": "Value6-changed"
    }

  ];

let result = arr1.map(item => {
  let key = Object.keys(item)[0];
  return arr2.find(v => v[key]) || item;
});

console.log(result);

使用lodash

6 个答案:

Lodash插件