javascript - 如何将一个对象数组的一个属性的值分配给另一个对象数组的类似命名的属性？ - Javascript

Question

这是我的代码

我有 2 个对象数组 - arr1 和 arr2

  var arr1 = [{
        id: 1,
        city: 'London',
        'checked': false
        },
        {
        id: 2,
        city: 'NYC',
        'checked': false
        },
        {
        id: 3,
        city: 'Paris',
        'checked': false
        },
        {
        id: 4,
        city: 'Madrid',
        'checked': false
        }];


 var arr2 = [{
        id: 1,
        city: 'Madrid',
        'checked': true
        },
        {
        id: 2,
        city: 'Paris',
        'checked': false
        },
        {
        id: 3,
        city: 'NYC',
        'checked': true
        },
        {
        id: 4,
        city: 'London',
        'checked': false
        }];

使用这 2 个对象数组，我想创建一个 arr3 变量/对象数组(arr3 将保留 arr1 的顺序 - 首先是伦敦，然后是纽约，第三个是巴黎，最后是马德里。我只想检查arr2 对象并将该字段(checked 属性)值放入 arr1 并创建 arr3。顺序不应更改，只是 arr1 的 checked 将从 arr2 的 checked 获取其值。

  var arr3 = [{
        id: 1,
        city: 'London',
        'checked': false
        },
        {
        id: 2,
        city: 'NYC',
        'checked': true
        },
        {
        id: 3,
        city: 'Paris',
        'checked': false
        },
        {
        id: 4,
        city: 'Madrid',
        'checked': true
        }];

我也可以选择不使用 arr3，然后我可以直接在 arr1 中进行更改。这也是另一种方式。任何技术都适合我。

已更新 - arr3 中 id 属性的顺序应与 arr1 中的顺序相同

Answer 1

解释

通过这种方法，它使用了更多的现代方法，使用了诸如 map 之类的函数。和 find ，而且我个人发现这个实现非常简单。

如果您不熟悉“箭头函数”语法，可以在线找到大量文档，例如 this .但正如您所见，这种方法的美妙之处在于它干净、简洁和简单。

这个实现有点类似于@holydragon 提供的答案，但是当你使用 forEach 函数时，你允许副作用发生，至少对于这个实现，通过使用map，这应该可以减少代码中出现副作用的可能性。

此外，我还使用了 destructuring assignment只是为了进一步减少此代码段中出现副作用的可能性。

更新

我已经使用解构赋值 实现了我的解决方案，并不是因为它“现代”或类似的愚蠢行为。这是因为在不创建对象副本的情况下，当修改 arr3 中对象的 checked 属性时， checked 中的属性在 arr1 中找到的对象也会得到更新。

这是一个副作用的例子，如果你想更深入地研究函数式编程、相关概念以及使用 JavaScript 的特定函数式编程，我强烈建议你阅读一些 Eric's内容。我个人是 Eric 发布的内容的粉丝，当我尝试将函数式编程概念应用于 JavaScript 时，我发现他的内容很有用。

var arr1 = [{id:1,city:"London",checked:!1},{id:2,city:"NYC",checked:!1},{id:3,city:"Paris",checked:!1},{id:4,city:"Madrid",checked:!1}];
var arr2 = [{id:1,city:"Madrid",checked:!0},{id:2,city:"Paris",checked:!1},{id:3,city:"NYC",checked:!0},{id:4,city:"London",checked:!1}];


var arr3 = arr1.map(({...o}) => {
  o.checked = arr2.find(x => x.city === o.city).checked;
  return o;
});
console.log(arr3);

// If you want a one line solution... 
var arr4 = arr1.map(({...o}) => Object.assign(o, {checked : arr2.find(x => x.city === o.city).checked}));
console.log(arr4);