更新javascript / jquery中的对象数组，其中字段是特定值

Question

我有一个如下所示的对象数组：

var finishes = [
    {label:'Raw Steel'},
    {label:'Antique Pewter'},
    {label:'Barn Red'},
    {label:'Brushed Stainless Steel'},
    {label:'Brushed Steel'},
    {label:'Copper Patina'},
    {label:'Dark Bronze'},
    {label:'Distressed White'},
    {label:'Flat Black'},
    {label:'Green Patina'},
    {label:'Oil Rubbed Bronze'},
    {label:'White'},
    {label:'Warehouse Bronze'},
    {label:'Weathered Rust'},
];

var wheelFinishes = finishes;

如您所见，我设置了另一个对象数组，该数组将具有一些不同的属性，然后是“种子”对象数组。

所以我想做的是：

UPDATE wheelFinishes WHERE label="Barn Red" SET exclusion="Metal Values"

所以 wheelFinishes 的值最终会是：

var wheelFinishes = [
    {label:'Raw Steel'},
    {label:'Antique Pewter'},
    {label:'Barn Red', exclusion:'Metal Values'},
    {label:'Brushed Stainless Steel'},
    {label:'Brushed Steel'},
    {label:'Copper Patina'},
    {label:'Dark Bronze'},
    {label:'Distressed White'},
    {label:'Flat Black'},
    {label:'Green Patina'},
    {label:'Oil Rubbed Bronze'},
    {label:'White'},
    {label:'Warehouse Bronze'},
    {label:'Weathered Rust'},
];

我不确定在 javascript 中更新对象数组的实际语法。

我知道 underscorejs 可能有一些功能可以让这类事情变得更容易，所以如果可能的话，我愿意接受 underscorejs 中的解决方案？

Answer 1

使用Array.prototype.map 将是一种（多种）可能的解决方案：

var wheelFinishes = [
    {label:'Raw Steel'},
    {label:'Antique Pewter'},
    {label:'Barn Red'},
    {label:'Brushed Stainless Steel'},
    {label:'Brushed Steel'},
    {label:'Copper Patina'},
    {label:'Dark Bronze'},
    {label:'Distressed White'},
    {label:'Flat Black'},
    {label:'Green Patina'},
    {label:'Oil Rubbed Bronze'},
    {label:'White'},
    {label:'Warehouse Bronze'},
    {label:'Weathered Rust'},
];

//extend all objects having a specific label
updatedFinishes = wheelFinishes.map(function(obj) {
  if(obj.label === 'Barn Red') {
    obj.exclusion = 'Metal Values';
  }
  return obj;
});
  
//test
updatedFinishes.forEach(function(obj) {
  console.log(obj);
})

Answer 2

遍历数组，并附加一个属性。

使用函数update。我接受一组标签元素需要修改。在每组标签下，还有另一组要附加。

var finishes = [{
  label: 'Raw Steel'
}, {
  label: 'Antique Pewter'
}, {
  label: 'Barn Red'
}, {
  label: 'Brushed Stainless Steel'
}, {
  label: 'Brushed Steel'
}, {
  label: 'Copper Patina'
}, {
  label: 'Dark Bronze'
}, {
  label: 'Distressed White'
}, {
  label: 'Flat Black'
}, {
  label: 'Green Patina'
}, {
  label: 'Oil Rubbed Bronze'
}, {
  label: 'White'
}, {
  label: 'Warehouse Bronze'
}, {
  label: 'Weathered Rust'
}, ];

function update(arr) {
  var i, len, len2, len3, elem, j, k, key, value;
  for (i = 0, len = arr.length; i < len; i += 1) {
    elem = arr[i];
    for (j = 0, len2 = finishes.length; j < len2; j += 1) {
      if (finishes[j].label === elem.label) {
        for (k = 0, len3 = elem.set.length; k < len3; k += 1) {
          key = elem.set[k].key;
          value = elem.set[k].value;
          finishes[j][key] = value;
        }
      }
    }
  }
  return finishes;
}

console.log(update([{
  label: 'Barn Red',
  set: [{
    key: 'exclusion1',
    value: 'Metal Values1'
  }, {
    key: 'exclusion2',
    value: 'Metal Values2'
  }]
}]));

Answer 3

使其与您的概念兼容

UPDATE wheelFinishes WHERE label="Barn Red" SET exclude="Metal 价值观”

为了使其尽可能松耦合/独立，这里有一个函数可以帮助你：

    var finishes = [
    {label:'Raw Steel'},
    {label:'Antique Pewter'},
    {label:'Barn Red'},
    {label:'Brushed Stainless Steel'},
    {label:'Brushed Steel'},
    {label:'Copper Patina'},
    {label:'Dark Bronze'},
    {label:'Distressed White'},
    {label:'Flat Black'},
    {label:'Green Patina'},
    {label:'Oil Rubbed Bronze'},
    {label:'White'},
    {label:'Warehouse Bronze'},
    {label:'Weathered Rust'},
    ];

    var wheelFinishes = finishes;

    function update(table, searchItem, setValue) {
        function search(table) {
            if(table.label == searchItem) {
                table.exclusion = setValue;
            }
        }

        table.find(search);
    }

    update(wheelFinishes, 'Barn Red', 'Metal Values');

    console.log(wheelFinishes[2]);

结果：Object {label: "Barn Red", exclusion: "Metal Values"}

Answer 4

请注意，与 map() 不同，这仅适用于数组中带有 {label: 'Barn Red'} 的第一项。

正如@RobertRocha 所建议的：

var wheelFinishes = finishes.slice();
wheelFinishes.find(function (finish) {
  return finish.label === 'Barn Red';
}).exclusion = 'Metal Values';

这个copies 使用slice 的数组，然后finds 使用.label === 'Barn Red' 的项目。

---

在 ES6 中：

const wheelFinishes = finishes.slice();
wheelFinishes
  .find(finish => finish.label === 'Barn Red')
  .exclusion = 'Metal Values';

Answer 5

你可以使用例如一个普通的forEach：

var finishes = [
    {label:'Raw Steel'},
    {label:'Antique Pewter'},
    {label:'Barn Red'},
    {label:'Brushed Stainless Steel'},
    {label:'Brushed Steel'},
    {label:'Copper Patina'},
    {label:'Dark Bronze'},
    {label:'Distressed White'},
    {label:'Flat Black'},
    {label:'Green Patina'},
    {label:'Oil Rubbed Bronze'},
    {label:'White'},
    {label:'Warehouse Bronze'},
    {label:'Weathered Rust'},
];
  
finishes.forEach(function(f) {
  if(f.label === 'Barn Red') {
    f.exclusion = 'Metal Values';
  }  
});
  
console.log(finishes);