如何将一个对象数组的一个属性的值赋给另一个对象数组的类似命名属性？ - 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
        }];

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

  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

解释

通过这种方法，它使用了更多的现代方法，makign使用map和find等功能，而且我个人发现这个实现几乎就像它可能的那样简单。

如果你不熟悉的“箭头功能”的语法，你可以在网上找到大量的文档，比如这个 。 但正如您所看到的，这种方法的优点在于它干净，简洁和简单。

这个实现有点类似于@holydragon提供的答案，但是当你使用forEach函数时，你允许副作用发生，至少在这个实现中，通过使用map ，这应该减少一边的机会代码中的效果。

此外，我还使用了destructuring assignment ，以进一步减少此代码段中副作用的几率。

更新

我使用destructuring assignment实现了我的解决方案，不是因为它是“现代的”或类似的东西。 这是因为没有创建对象（或多个）副本，修改时checked属性中的对象arr3 ，在checked中发现的内部对象的属性arr1也将得到更新。

这是副作用的一个例子，如果您想深入研究函数式编程，相关概念以及使用JavaScript的函数式编程，我强烈建议您阅读Eric的一些内容。 就个人而言，我是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); 

Answer 2

您可以将Array.prototype.map（）与Array.prototype.find（）结合使用。 使用arr1.map(...)可以维护数组1的顺序，使用arr2.find(...)您将获得arr2的checked属性值。

 const 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}]; const 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}]; const arr3 = arr1.map(c1 => ({ id: c1.id, city: c1.city, checked: arr2.find(c2 => c1.city === c2.city).checked })); console.log(arr3); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 3

您可以拍摄Map并合并相同的城市。

 var array1 = [{ city: 'London', checked: false }, { city: 'NYC', checked: false }, { city: 'Paris', checked: false }, { city: 'Madrid', checked: false }], array2 = [{ city: 'Madrid', checked: true }, { city: 'Paris', checked: false }, { city: 'NYC', checked: true }, { city: 'London', checked: false }], result = Array.from([...array1, ...array2] .reduce((m, o) => m.set(o.city, o), new Map) .values() ); console.log(result) 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

如果需要，您只能将想要的属性分配给地图。

 var array1 = [{ id: 1, city: 'London', checked: false }, { id: 2, city: 'NYC', checked: false }, { id: 3, city: 'Paris', checked: false }, { id: 4, city: 'Madrid', checked: false }], array2 = [{ id: 1, city: 'Madrid', checked: true }, { id: 2, city: 'Paris', checked: false }, { id: 3, city: 'NYC', checked: true }, { id: 4, city: 'London', checked: false }], result = Array.from([...array1, ...array2] .reduce((m, o) => m.set( o.city, Object.assign(m.get(o.city) || o, { checked: o.checked }) ), new Map) .values() ); console.log(result) 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 4

（更新）步骤：

1. 通过arr1迭代。
2. 获取arr2中的对象，其中city属性与两个数组匹配。
3. 根据arr2匹配的对象更新arr1的checked属性。

 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 } ]; arr1.forEach(a1 => { a1.checked = arr2.filter(a2 => a2.city === a1.city)[0].checked }) console.log(arr1) 

Answer 5

1.通过第一个数组迭代

2.通过第二个数组迭代

3.当arr1 = = 2的城市时

4. 在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 } ]; arr1.forEach(function(entry1) { arr2.forEach(function(entry2) { if (entry1.city == entry2.city) { entry1.checked = entry2.checked; } }) }); console.log(arr1); 

Answer 6

使用键值对作为城市名称创建一个对象，并从数组2中选中值。

var array2Obj = {};
for (var i = 0; i < arr2.length; i++) {
    array2Obj[arr2[i].city] = arr2[i].checked;
}

现在循环数组1并将对象的城市值（数组2的已检查值）分配给数组1检查的值。

for (var i = 0; i < arr1.length; i++) {
    arr1[i].checked = array2Obj[arr1[i].city];
}

Answer 7

使用map和forEach

 var arr1 = [{ city: 'London', 'checked': false, id: 1 }, { city: 'NYC', 'checked': false, id: 2 }, { city: 'Paris', 'checked': false, id: 3 }, { city: 'Madrid', 'checked': false, id: 4 } ]; var arr2 = [{ city: 'Madrid', 'checked': true }, { city: 'Paris', 'checked': false }, { city: 'NYC', 'checked': true }, { city: 'London', 'checked': false } ]; var arr3 = arr1.map(e => { arr2.forEach(x => x.city == e.city ? e.checked = x.checked : false) return e; }) console.log(arr3)