Question

我想通过使用jquery匹配字段来更新数组中的属性。

objArray = [ { Id: 1, Val: 'A'}, { Id: 3, Val: 'B'}, { Id: 5, Val: 'C'} ];

在做了一些处理之后，我得到了这样的数组。

objnewArray = [ { Id: 1, Value: 'AA'}, { Id: 3, Value: 'BB'}, { Id: 5, Value: 'CC'} ];

现在我想将objArray Val字段更新为objnewArray的值字段，结果就像这样

 objArray = [ { Id: 1, Val: 'AA'}, { Id: 3, Val: 'BB'}, { Id: 5, Val: 'CC'} ];

除了循环两个数组，匹配Id和更新Val属性之外，还有其他方法吗？

Answer 1

您可以使用哈希表并首先循环目标，然后将新对象分配给旧对象。

var objArray = [{ Id: 1, Val: 'A' }, { Id: 3, Val: 'B' }, { Id: 5, Val: 'C' }],
    objnewArray = [{ Id: 1, Value: 'AA', extra: 42 }, { Id: 3, Value: 'BB' }, { Id: 5, Value: 'CC' }],
    hash = Object.create(null);

objArray.forEach(function (a) {
    hash[a.id] = a;
});

objnewArray.forEach(function (a) {
    Object.keys(a).forEach(function (k) {
        hash[a.id][k] = a[k];
    });
});

console.log(objnewArray);

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

ES6与Map

var objArray = [{ Id: 1, Val: 'A' }, { Id: 3, Val: 'B' }, { Id: 5, Val: 'C' }],
    objnewArray = [{ Id: 1, Value: 'AA', extra: 42 }, { Id: 3, Value: 'BB' }, { Id: 5, Value: 'CC' }],
    hash = new Map;

objArray.forEach(a => hash.set(a.id, a));
objnewArray.forEach(a => Object.keys(a).forEach(k => hash.get(a.id)[k] = a[k]));

console.log(objnewArray);

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

ES6与Array#find

var objArray = [{ Id: 1, Val: 'A' }, { Id: 3, Val: 'B' }, { Id: 5, Val: 'C' }],
    objnewArray = [{ Id: 1, Value: 'AA', extra: 42 }, { Id: 3, Value: 'BB' }, { Id: 5, Value: 'CC' }];

objnewArray.forEach(a =>
    Object.keys(a).forEach(k => objArray.find(b => a.id === b.id)[k] = a[k]));

console.log(objnewArray);

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

Answer 2

遍历数组，创建新密钥并正确分配其值，删除旧密钥。你完成了。

objnewArray = [ { Id: 1, Value: 'AA'}, { Id: 3, Value: 'BB'}, { Id: 5, Value: 'CC'} ];


var objArray = objnewArray.map(function(el){
   el.Val = el.Value; // Create new key Val
   delete el.Value; // Delete old key Value
   return el;
});

console.log(objArray);

Answer 3

您可以迭代objArray和$ .extend对象

Jquery -

＆＃13;

objArray = [ { Id: 1, Value: 'A'}, { Id: 3, Value: 'B'}, { Id: 5, Value: 'C'} ];
objnewArray = [ { Id: 1, Value: 'AA'}, { Id: 3, Value: 'BB'}, { Id: 5, Value: 'CC'} ];

objArrayById = [];

objArray.forEach(function(value){
  objArrayById[value.Id] = value;
});

objnewArray.forEach(function(value,index){
  objArrayById[value.Id] = $.extend(objArrayById[value.Id],value);
});

console.log(objArrayById);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

ES6

＆＃13;

objArray = [ { Id: 1, Value: 'A'}, { Id: 3, Value: 'B'}, { Id: 5, Value: 'C'} ];
objnewArray = [ { Id: 1, Value: 'AA'}, { Id: 3, Value: 'BB'}, { Id: 5, Value: 'CC'} ];

objArrayById = [];

objArray.forEach(function(value){
  objArrayById[value.Id] = value;
});

objnewArray.forEach(function(value){
  objArrayById[value.Id] = Object.assign(objArrayById[value.Id],value);
});

console.log(objArrayById);

＆＃13;

Answer 4

您可以将Array.prototype.reduce与hash table和Object.assign一起使用来创建浅层对象副本以获取所需的输出数组 - 请参阅下面的演示：

var objArray = [ { Id: 1, Val: 'A'}, { Id: 3, Val: 'B'}, { Id: 5, Val: 'C'} ];
var objnewArray = [ { Id: 1, Value: 'AA'}, { Id: 3, Value: 'BB'}, { Id: 5, Value: 'CC'}];
                   
var result = objArray.reduce(function(hash){
  
  //create hash table
  objnewArray.forEach(function(element){
     hash[element.Id]=element.Value;
  });
  
  // reduce to the required result
  return function(prev, curr){
    var element = Object.assign({}, curr); 
    element.Val = hash[curr.Id];
    prev.push(element);
    return prev;
  }
}(Object.create(null)),[]);

console.log(result);

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

Answer 5

这与@void回答非常相似迭代objArray，以便不更新objnewArray对象

var objnewArray = [ { Id: 1, Value: 'AA'}, { Id: 3, Value: 'BB'}, { Id: 5, Value: 'CC'} ];

var objArray = JSON.parse(JSON.stringify(objnewArray));

//console.log(objArray)
objArray = objArray.map(function(doc){
  doc.Val = doc.Value;
  delete doc.Value;
  return doc;
});

console.log(objArray)

来自另一个数组的数组中的jquery update属性

5 个答案: