使用 foreach 将对象推送到数组答案

【问题标题】：Pushing an object to array using foreach使用 foreach 将对象推送到数组
【发布时间】：2020-09-03 18:47:58
【问题描述】：

let inputValues = [];    
for (let i = 0; i < inputs.length; i++) {
    let inputValue = inputs[i].value;
    inputValues.push(inputValue)
}    
let newCar = {
    Model: inputValues[0],
    Brand: inputValues[1],
    Date: inputValues[2],
    Horsepower: inputValues[3],
    Transmission: inputValues[4],
    Class: inputValues[5]
}
newData.push(newCar)

有人可以帮我使用 foreach 循环将 newCar 对象推送到 newData 数组。输入是我的输入。我需要将输入值添加到我的对象键中。并将对象推送到数组中。我需要以一种我没有像这样声明 newCar 对象的方式来做到这一点。

【问题讨论】：

在您的 HTML 中包含一个 sn-p 以避免混淆您使用的是 div 还是输入。

标签： javascript arrays object foreach

【解决方案1】：

不需要循环或者newCar变量，你可以直接把对象放到push()的调用中

newData.push({
    Model: inputs[0].value,
    Brand: inputs[1].value,
    Date: inputs[2].value,
    Horsepower: inputs[3].value,
    Transmission: inputs[4].value,
    Class: inputs[5].value
});

但无论哪种方式，它都应该是一样的。

【讨论】：

【解决方案2】：

如果我们假设您的标签数量与您的输入数量相同。然后我们可以在一个循环中完成所有这些工作，如示例代码 sn-p 示例所示。随意运行它，看看它是如何工作的。

话虽如此，最好自己添加带有标签的 div，这样您就可以从 div 中收集数据，而不必处理固定索引，这在添加更多标签时可能会成为问题。

<div data-label="Model">Toyota</div>

假设输入是如上定义的 div 数组，您将能够执行以下操作

let newData = [];    
inputs.forEach((input) => newData.push({
   [input.attr('data-label')]: input.text()
}))

但你可以通过使用地图来进一步缩短它

let newDate = inputs.map((input) => ({
   [input.attr('data-label')]: input.text()
}))

// This method assumes that your divs will have the same number of labels
// We will assume input values are as such. But you can change it to be array of divs
let inputs = [{ value: 'Corolla' }, { value: 'Toyota' }, { value: '2014' }, { value: 'coolHorsies' }, { value: 'coolTransmission' }, { value: 'coolClass' }]
let labels = ['Model', 'Brand', 'Date', 'Horsepower', 'Transmission', 'Class'];

let newData = [];    
inputs.forEach((input, idx) => newData.push({
   [labels[idx]]: input.value,
}))  

console.log(newData)

【讨论】：