如何动态地向 javascript 数组中的每个对象添加属性

How to add properties dynamically to each object in an javascript array

本文关键字：对象 属性 添加 数组 javascript 何动态 动态      更新时间：2023-09-26

我正在尝试遍历对象数组以为每个对象预置属性和值。表的顺序很重要，因为我尝试使用可动手视图作为客户端来检索服务器端 mysql 表的内容。我希望手动视图具有与表相同的列顺序，但我想插入一个复选框列作为第一列以允许记录选择。我有一个执行循环的小提琴 http://jsfiddle.net/kc11/juo1e4at/#base，但我不确定如何预置每个对象的属性值对。数组取消移位似乎适用于数组。我想要一个对象的结果，从：

Object { car="Audi A4 Avant", year=2011, available=true, more...}

自：

Object { checkbox=false, car="Audi A4 Avant", year=2011, available=true, more...}

我怎样才能做到这一点

Javascript对象中属性的顺序无关紧要，它们不是严格排序的。
鉴于

var cars = [
  {car: "Mercedes A 160", year: 2006, available: true, comesInBlack: 'yes'},
  {car: "Citroen C4 Coupe", year: 2008, available: false, comesInBlack: 'yes'},
  {car: "Audi A4 Avant", year: 2011, available: true, comesInBlack: 'no'},
  {car: "Opel Astra", year: 2004, available: false, comesInBlack: 'yes'},
  {car: "BMW 320i Coupe", year: 2011, available: false, comesInBlack: 'no'}
];

如果您没有准备好从后端发送的属性，或者由于其他原因（较小的有效负载大小等）想要在前端执行此操作，则可以简单地执行以下操作。

for (i in cars) {
  cars[i].checkbox = false;
}

现在，回到Handsontable列顺序的问题（这实际上是问题的主要问题），您可以定义如下：

var hot = new Handsontable(container,{
  data: cars,
  /* Other config */
  columns: [
    {data: "checkbox", type: 'checkbox'},
    {data: "car", type: 'text'}
    /*Other columns*/
  ]
});

有关详细信息，请参阅手册。

下面是在小提琴中使用getCarData函数的示例。它允许您通过将此功能包装在一个简单的类（称为 PrependableObject ）中来将键附加到对象。

PrependableObject = function(obj){
    this.obj = obj;
}
PrependableObject.prototype.prepend = function(key, val){
    var newObj  = new Object(),
        oldKeys = Object.keys(this.obj);
    newObj[key] = val;
    for (var i=0; i< oldKeys.length; i++){
        newObj[oldKeys[i]] = this.obj[oldKeys[i]];
    }
    return newObj;
}
function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2006, available: true, comesInBlack: 'yes'},
      {car: "Citroen C4 Coupe", year: 2008, available: false, comesInBlack: 'yes'},
      {car: "Audi A4 Avant", year: 2011, available: true, comesInBlack: 'no'},
      {car: "Opel Astra", year: 2004, available: false, comesInBlack: 'yes'},
      {car: "BMW 320i Coupe", year: 2011, available: false, comesInBlack: 'no'}
    ];
 }
var carData = getCarData();
carData.forEach(function(obj, index){
    var obj = new PrependableObject(obj),
        newObj = obj.prepend('check', false);
    carData[index] = newObj;
});
// To prove the keys are in the correct order
var car1 = carData[0];
Object.keys(car1).forEach(function(key, i){
    console.log(key + ' = ' + car1[key]);
});

更新的小提琴：

http://jsfiddle.net/juo1e4at/4/

当然，forEach循环中的逻辑可以做任何事情（例如，使用汽车模型来确定要分配对象的动态值、汽车年份等）。

相关文章：