循环遍历 JavaScript 中对象的属性？

Question

我有一组数据。您将如何使用 JavaScript 中的 for 循环遍历这些数据？

    var model = ({
        "DettolRadiance":
            {
                "Values": [{ "GRPsValue": 66, "MonthOfSale": "Jan" },
                  { "GRPsValue": 100, "MonthOfSale": "Feb" },
                  { "GRPsValue": 250, "MonthOfSale": "March" },
                  { "GRPsValue": 100, "MonthOfSale": "April" }],
                "Key": "DettolRadiance"
            },
        "DettolSkinCare":
            {
                 "Values": [{ "GRPsValue": 487, "MonthOfSale": "Jan" },
                        { "GRPsValue": 450, "MonthOfSale": "Feb" },
                        { "GRPsValue": 300, "MonthOfSale": "March" },
                        { "GRPsValue": 400, "MonthOfSale": "April" }],
                 "Key": "DettolSkinCare"
            },
        "DettolToiletSoaps":
                    {
                 "Values": [{ "GRPsValue": 64, "MonthOfSale": "Feb" },
                            { "GRPsValue": 0,  "MonthOfSale": "Jan" },
                            { "GRPsValue": 70, "MonthOfSale": "March" },
                            { "GRPsValue": 150, "MonthOfSale": "April" }],
                 "Key": "DettolToiletSoaps"
             }
    });

这是我尝试过的代码。

      var DataSet = [];

           for (var i = 0; i < model[0].DettolRadiance.Values.length; i++) {

            DataSet.push({ 'x': model[0].DettolRadiance.Values[i].MonthOfSale, 'y': model[0].DettolRadiance.Values[i].GRPsValue });

        }

            for (var i = 0; i < model[0].DettolSkinCare.Values.length; i++) {

            DataSet.push({ 'x': model[0].DettolSkinCare.Values[i].MonthOfSale, 'y': model[0].DettolSkinCare.Values[i].GRPsValue });
        }


             for (var i = 0; i < model[0].DettolToiletSoaps.Values.length; i++) {

            DataSet.push({ 'x': model[0].DettolToiletSoaps.Values[i].MonthOfSale, 'y': model[0].DettolToiletSoaps.Values[i].GRPsValue });
        }

但我只能检索值。我想根据 3 个键检索值。这些是 DettolRadiance、DettolSkinCare、DettolToiletSoaps。所以每个键应该有 4 个各自的值。我想我需要添加另一个 for 循环。但是我没有得到确切的语法。任何人都可以帮忙..

Answer 1

我认为你的代码应该是

  var model = ({
        "DettolRadiance":
            {
                "Values": [{ "GRPsValue": 66, "MonthOfSale": "Jan" },
                  { "GRPsValue": 100, "MonthOfSale": "Feb" },
                  { "GRPsValue": 250, "MonthOfSale": "March" },
                  { "GRPsValue": 100, "MonthOfSale": "April" }],
                "Key": "DettolRadiance"
            },
        "DettolSkinCare":
            {
                 "Values": [{ "GRPsValue": 487, "MonthOfSale": "Jan" },
                        { "GRPsValue": 450, "MonthOfSale": "Feb" },
                        { "GRPsValue": 300, "MonthOfSale": "March" },
                        { "GRPsValue": 400, "MonthOfSale": "April" }],
                 "Key": "DettolSkinCare"
            },
        "DettolToiletSoaps":
                    {
                 "Values": [{ "GRPsValue": 64, "MonthOfSale": "Feb" },
                            { "GRPsValue": 0,  "MonthOfSale": "Jan" },
                            { "GRPsValue": 70, "MonthOfSale": "March" },
                            { "GRPsValue": 150, "MonthOfSale": "April" }],
                 "Key": "DettolToiletSoaps"
             }
    });

var DataSet = [];

           for (var i = 0; i < model.DettolRadiance.Values.length; i++) {
            DataSet.push({ 'x': model.DettolRadiance.Values[i].MonthOfSale, 'y': model.DettolRadiance.Values[i].GRPsValue });

        }

            for (var i = 0; i < model.DettolSkinCare.Values.length; i++) {

            DataSet.push({ 'x': model.DettolSkinCare.Values[i].MonthOfSale, 'y': model.DettolSkinCare.Values[i].GRPsValue });
        }


             for (var i = 0; i < model.DettolToiletSoaps.Values.length; i++) {

            DataSet.push({ 'x': model.DettolToiletSoaps.Values[i].MonthOfSale, 'y': model.DettolToiletSoaps.Values[i].GRPsValue });
        }

Answer 2

我编写了两个函数，允许您遍历数组/对象或对象和数组的组合（如您的）的每个单独成员。

首先，我编写了一个函数来迭代array/object 的每个成员。但是这个函数也使用另一个函数来检查对象是object object还是object array，因为我们应该对这两种类型稍微使用不同的技术。

function _recursive(obj, callback)
{
  var len;
  var objectKeys;
  var i  = 0;
  if(isArrayOrObject(obj) === 'array') 
  {
     len = obj.length; 
     iterator = i;
  }
  else if(isArrayOrObject(obj) === 'object') 
  {
     len = Object.keys(obj).length;

     objectKeys = Object.keys(obj);
  }

   for(i = 0; i < len; i++)
   {
       var currentElement;

       if(isArrayOrObject(obj) === 'array') 
       {
         currentElement = obj[i];
       }
       else if(isArrayOrObject(obj) === 'object') 
       {
         currentElement = obj[objectKeys[i]];
       }

       callback(currentElement);

       if(isArrayOrObject(currentElement) !== false)
       {         
             _recursive(currentElement, function(element){
                    callback(element);
              }); 
           }
       }
    }

此函数检查对象的类型，如果两者都不为真，则返回假。

function isArrayOrObject(inp)
{ 
  if(typeof inp !== 'object') return false;  
  if( Object.prototype.toString.call( inp ) === '[object Array]' ) 
    {
        return "array";
    } 
    else 
    {
      return "object"; 
    }

}

这就是我们所说的。我们将回调传递给我们的函数，以应用于数组的每个单独成员。

_recursive(model, function(element){

    if(typeof element !== 'object')
    {
        console.log(element); 
    }
});

这会遍历对象到最深的根。

Answer 3

您可以使用for..in 循环访问对象属性。

for (var prop in obj) {
  if( obj.hasOwnProperty( prop ) ) {
    console.log("o." + prop + " = " + obj[prop]);
  } 
}

hasOwnProperty 确保它是“真实的”财产，并且如果有人一直在与 Object.prototype 开玩笑，我们不会被绊倒。

要获得包含收集到的每个产品的MonthOfSale 和GRPsValue 的数组，您可以使用for..in 和Values 上的内部循环。

function proccessData(data){
    var result = [];

    for (var prop in data) {
        if( data.hasOwnProperty( prop ) ) {
            (function(product){
                var val, i, len = product.Values.length;
                for (i = 0; i < len; i++){
                    val = product.Values[i];
                    result.push({
                        x: val['MonthOfSale'],
                        y: val['GRPsValue']
                    });
                }
            }(data[prop]));
        }
    }

    return result;
}

jsFiddle http://jsfiddle.net/maxcal/9uoqm6f8/3/

PS：（添加）

当使用文字符号创建对象时，不要将其包裹在括号中：

var model = {}; // good
var model = ({}); // bad, is there something missing here?

虽然结果相同，但令人困惑，因为看起来您可能打算将文字传递给函数。

编辑。这将与您接受的答案相同。

var data_set = [];

for (var prop in model) {
  if( model.hasOwnProperty( prop ) ) {
     data_set.push({ values: model[prop].Values, key: model[prop].Key })
  } 
}