在构造函数中遍历对象内部的对象？答案

【问题标题】：Iterate through object inside an object within constructor function?在构造函数中遍历对象内部的对象？
【发布时间】：2018-04-04 15:22:27
【问题描述】：

在构造函数中，我试图创建一个对象。

在对象中，我已经对某些数组使用了 map 函数。

当我试图遍历一个对象时出现了挑战，因为我不能在对象上使用 map 函数。我也尝试在这个对象中使用for in 函数，但它出现了，在对象创建中使用for in 是无效的JS。

我的目标是遍历 individualData 对象（就像数组的法线贴图函数一样）。

我尝试在地图功能中移动data: data.individualData。这对我的预期结果不起作用。

这是我的代码：

labelsArray = ['Breakfast', 'Lunch', 'Dinner'];

data = {
  miniLabelsArray: ['Egg', 'Soup', 'Steak'],
  type: ['Vegetarian', 'Vegan', 'Normal'],
  individualData: [{
    John: ['1', '2', '3'],
    Paul: ['10', '20', '30'],
    Kate: ['100', '200', '300']
  }]
};

function CreateData(data, someNewObj) {
  
  this.someNewObj = {
    labels: labelsArray,
    datasets: 
      data.miniLabelsArray.map((miniLabelsArray, i) => ({
        miniLabel: data.miniLabelsArray[i],
        type: data.type[i],
        })),
        data: data.individualData
    };
  };

var testing = new CreateData(data);

console.log('testing', testing.someNewObj);

https://codepen.io/anon/pen/qoMdoe?editors=1111

预期结果：

 ...
  "datasets": [
    {
      "miniLabel": "Egg",
      "type": "Vegetarian",
      "data": ["1", "2", "3"]       // DIFFERENCE HERE
    },
    {
      "miniLabel": "Soup",
      "type": "Vegan",
      "data": ["10", "20", "30"]       // DIFFERENCE HERE
    },
    {
      "miniLabel": "Steak",
      "type": "Normal",
      "data" :["100", "200", "300"]       // DIFFERENCE HERE
    }
  ...

谢谢

【问题讨论】：

你有没有为你的循环尝试过 for...of？ developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@Doug 我在对象本身（内部）中尝试过，但它不是有效的 JS？
一个简单的方法是在你的.map()函数中移动data: ...，然后说data: individualData[0][Object.keys(individualData[0])[i]]。超级尴尬，而且在object.keys()中不能总是保证属性顺序，但它会起作用。
@mhodges 如果无法保证订单，有没有其他方法可以保证订单？我猜想在对象之外作为 for in 函数来做可能是一种选择？
@lovemyjob 这取决于您的用例。如果知道 [1, 2, 3] 专门是“John”的数据，那么您可以有一个单独的名称数组，如下所示：data.names = ["John", "Paul", "Kate"] 并且您的个人数据将是 [["1", "2", "3"], ["10", "20", "30"], ...] 然后您可以访问 data.individualData[i] 并且您有保证订单。如果您需要与之关联的名称，可以添加name: data.names[i]。

标签： javascript arrays loops object constructor

【解决方案1】：

我将你的方法更新为 This。

datasets: data.miniLabelsArray.map((value, index)=>({
  miniLabel: value,
  type: data.type[index],
  data: data.individualData[0][keys[index]]
}))

这里重要的是var keys = Object.keys(data.individualData[0])

和data: data.individualData[0][keys[index]]

labelsArray = ['Breakfast', 'Lunch', 'Dinner'];

data = {
  miniLabelsArray: ['Egg', 'Soup', 'Steak'],
  type: ['Vegetarian', 'Vegan', 'Normal'],
  individualData: [{
    John: ['1', '2', '3'],
    Paul: ['10', '20', '30'],
    Kate: ['100', '200', '300']
  }]
};

function CreateData(data, someNewObj) {
  //get keys from [individualData] property
  var keys = Object.keys(data.individualData[0])
  this.someNewObj = {
    labels: labelsArray,
    // here we map every [miniLabelsArray] value and get the [type] and [individualData] depending on the index that we are.
    datasets: data.miniLabelsArray.map((value, index)=>({
      miniLabel: value,
      type: data.type[index],
      // here we get the real key of [data.individualData] using the key we took at the beginning like this : keys[index], and with that key we get the value in [data.individualData[0]]
      data: data.individualData[0][keys[index]]
    }))
      
    };
  };

var testing = new CreateData(data);

console.log('testing', testing.someNewObj);

【讨论】：

嗨，请解释一下，为什么这样有效？
我在代码中添加了一些解释。我做的和你做的一样，只是我添加了data: data.individualData[0][keys[index]] 和var keys = Object.keys(data.individualData[0]) 以便能够获得individualData 数组的真正键

【解决方案2】：

您应该能够创建一个仅包含如下数字的individualdata 数组：

let individualdata = [];
for (let d in data.individualData) { 
    individualdata.push(data.individualData[d]);
}

把它放在你的CreateData()函数的顶部，用data: individualdata替换data: data.individualData

【讨论】：

individualData 是一个数组，您在这里所做的只是将整个对象推入一个新数组 - 这没有帮助。应该是for (let d in data.individualData[0]) { ... }