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

Posted 2023-03-22

【中文标题】如何为javascript数组中的每个对象动态添加属性

【英文标题】：How to add properties dynamically to each object in an javascript array

【发布时间】：2015-03-01 05:41:50

【问题描述】：

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

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

到：

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

我怎样才能做到这一点

【问题讨论】：

我没有在你的小提琴中看到一个循环。

取对象写anObject.checkbox = false? “前置”对于命名属性并没有多大意义。

为什么属性的顺序对您很重要？

Kim，属性的顺序确实很重要，因为我想在前面添加一个可动手操作的复选框列。

@user61629 对象的属性没有顺序。

【参考方案1】：

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*/
  ]
);

更多信息请参见the manual。

【讨论】：

尼特，公平地说，虽然 ajax 从服务器端传输的 javascript 对象没有对其 properties 属性的顺序，但这仅由接受数组的 columns 属性设置（有序） Handsontable 中的对象？

@user61629 是的，这是正确的。列的顺序由columns 配置定义。如果未在此处设置，则顺序可能是任意的。

【参考方案2】：

这是在您的小提琴中使用 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 循环中的逻辑可以做任何事情（例如，使用汽车模型来确定分配对象的动态值、汽车年份等）。

【讨论】：

谢谢，这确实回答了唯一问题是对象中的顺序（或缺少顺序）的问题。请看我上面的注释。