Question

我有这个javascript对象：

var arr1 = [{id:'124',name:'qqq'}, 
           {id:'589',name:'www'}, 
           {id:'45',name:'eee'},
           {id:'567',name:'rrr'}]

var arr2 = [{id:'124',name:'ttt'}, 
           {id:'45',name:'yyy'}

我需要用arr2中具有相同id的项目替换arr1中的对象。

这是我如何实现理想的结果：

arr1.map(obj => arr2.find(o => o.id === obj.id) || obj);

结果如下：

var arr1 = [{id:'124',name:'ttt'}, 
           {id:'589',name:'em'}, 
           {id:'45',name:'yyy'},
           {id:'567',name:'eme'}];

但是这个解决方案存在的问题：

arr1.map(obj => arr2.find(o => o.id === obj.id) || obj);

不要在IE浏览器中工作。

如何在IE和Chrome浏览器中更改上面的行以获得所需的结果？

＆＃13;

var arr1 = [{
    id: '124',
    name: 'qqq'
}, {
    id: '589',
    name: 'www'
}, {
    id: '45',
    name: 'eee'
}, {
    id: '567',
    name: 'rrr'
}];

var arr2 = [{
    id: '124',
    name: 'ttt'
}, {
    id: '45',
    name: 'yyy'
}];

var res = arr1.map(obj => arr2.find(o => o.id === obj.id) || obj);

console.log(res);

＆＃13;

Answer 1

如果您想使用Array.prototype.find()，则需要对不支持它的浏览器使用推荐的polyfill。

请参阅MDN Array.protoype.find() polyfill

Answer 2

如果您不想使用polyfill，只需先减少ID然后映射。

var arr1 = [{id:'124',name:'qqq'}, 
           {id:'589',name:'www'}, 
           {id:'45',name:'eee'},
           {id:'567',name:'rrr'}]

var arr2 = [{id:'124',name:'ttt'}, 
           {id:'45',name:'yyy'}]

var byIds = arr2.reduce((acc, item) => {
    acc[item.id] = item;
    return acc;
}, {})

var replacedArr1 = arr1.map(item => byIds[item.id] || item);

Answer 3

您已将let myIndexVar: { [key: string]: number; } = {}; myIndexVar["key"] = 4; // key is string, value is number标记为此，为什么不使用lodash函数_ .find和_ .map而不是具有有限浏览器支持的本机函数。

lodash

说明显而易见，您还需要转换ES6样式箭头功能以及不支持旧浏览器的功能。

Answer 4

您可以迭代arr2并将对象构建为哈希表，然后迭代arr1以更改元素。

＆＃13;

var arr1 = [{ id: '124', name: 'qqq' }, { id: '589', name: 'www' }, { id: '45', name: 'eee' }, { id: '567', name: 'rrr' }],
    arr2 = [{ id: '124', name: 'ttt' }, { id: '45', name: 'yyy' }],
    hash = Object.create(null);

arr2.forEach(function (a) {
    this[a.id] = a;
}, hash);

arr1.forEach(function (a, i, aa) {
    if (this[a.id]) {
        aa[i] = this[a.id];
    }
}, hash);

console.log(arr1);

＆＃13;

或使用短路版本。

＆＃13;

var arr1 = [{ id: '124', name: 'qqq' }, { id: '589', name: 'www' }, { id: '45', name: 'eee' }, { id: '567', name: 'rrr' }],
    arr2 = [{ id: '124', name: 'ttt' }, { id: '45', name: 'yyy' }],
    hash = Object.create(null);

hash.count = arr2.length;

arr2.forEach(function (a) {
    this[a.id] = a;
}, hash);

arr1.some(function (a, i, aa) {
    if (this[a.id]) {
        aa[i] = this[a.id];
        return !--this.count;
    }
}, hash);

console.log(arr1);

＆＃13;

Answer 5

我要做的是使用for循环遍历第二个数组中的每个项目。然后遍历第一个数组以查看ID是否匹配。如果是，请将名称设置为第二个数组中的名称。

var arr1 = [{id:'124',name:'qqq'}, 
       {id:'589',name:'www'}, 
       {id:'45',name:'eee'},
       {id:'567',name:'rrr'}];

var arr2 = [{id:'124',name:'ttt'}, 
       {id:'45',name:'yyy'}];

for (var i = 0; i < arr2.length; i++) {
    for (var j = 0; j < arr1.length; j++) {
        if (arr2[i].id === arr1[j].id) {
            arr1[j].name = arr2[i].name;
        }
    }   
}

这是一个小提琴https://jsfiddle.net/k0grurx5/

Answer 6

请您考虑underscorejs，您会发现find，filter和map

等跨浏览器功能

 int lastIndex = 0 
 var result = _.map(arr1 , function(num){ 
      if (arr1.id == arr2[lastIndex].id){
         return arr2[lastIndex++];
      }
      return arr1;
 });

操纵对象数组中的对象

6 个答案: