javascript - 迭代对象时检查对象与数组

Question

如果数组是对象类型，那么为什么下面的递归函数无法输出嵌套数组？

预期输出和实际输出如下所示。

// dummy encode function
function encode(value) {
    return value + " (this value was encoded!)"
}

var arr = {
    "title1": {
        "item1": "one",
        "item2": "two"
    },
    "title2": "three",
    "title3": "four",
    "title4": {
        "item1": [{
            "arrayItem": "First array item"
        }, {
            "arrayItem": "Second array item"
        }]
    },
    "title5": {
        "item1": {
            "subItem1": "five",
            "subItem2": "six"
        }
    }
};

function encodeValues(arr) {
    var keys = Object.keys(arr);
    for (var i = 0; i < keys.length; i++) {
        if (!!arr[keys[i]] && typeof arr[keys[i]] === "object") encodeValues(arr[keys[i]]);

        else arr[keys[i]] = encode(arr[keys[i]]);
    }
    return arr;
}

var encodedValues = encodeValues(arr);

console.log(encodedValues)

预期输出:

{
    title1: {
        item1: 'one (this value was encoded!)',
        item2: 'two (this value was encoded!)'
    },
    title2: 'three (this value was encoded!)',
    title3: 'four (this value was encoded!)',
    title4: {
        item1: [{
            arrayItem: First array item(this value was encoded!)
        }, {
            arrayItem: Second array item(this value was encoded!)
        }]
    },
    title5: {
        item1: {
            subItem1: 'five (this value was encoded!)',
            subItem2: 'six (this value was encoded!)'
        }
    }
}

实际输出:

{
    title1: {
        item1: 'one (this value was encoded!)',
        item2: 'two (this value was encoded!)'
    },
    title2: 'three (this value was encoded!)',
    title3: 'four (this value was encoded!)',
    title4: {
        item1: [
            [Object],
            [Object]
        ]
    },
    title5: {
        item1: {
            subItem1: 'five (this value was encoded!)',
            subItem2: 'six (this value was encoded!)'
        }
    }
}

解决方案是否类似于以下内容，即检查 if 语句中的数组实例？:

if (!!arr[keys[i]] && arr[keys[i]] instanceof Array)
    encodeValues(arr[keys[i]]);
else if (!!arr[keys[i]] && typeof arr[keys[i]] === "object")
    encodeValues(arr[keys[i]]);
else
    arr[keys[i]] = encode(arr[keys[i]]);

谢谢

Answer 1

我认为您的代码完全符合您的要求，但您只是没有以您期望的格式进行日志记录。

尝试 console.log(JSON.stringify(encodedValues, null, 2)); 这样您就可以看到嵌套对象的内部。

完整代码(修正了相当多的缩进)，包括输出:

// dummy encode function
function encode(value) {
  return value + " (this value was encoded!)"
}

var arr = {
  "title1": {
    "item1": "one",
    "item2": "two"
  }, 
  "title2": "three",
  "title3": "four",
  "title4": {
    "item1": [
      {
        "arrayItem": "First array item"
      },
      {
        "arrayItem": "Second array item"
      }
    ]
  },
  "title5": {
    "item1": {
      "subItem1": "five",
      "subItem2": "six"
    }
  }
};

function encodeValues(arr) {
  var keys = Object.keys(arr);
  for (var i = 0; i < keys.length; i++) {
    if (!!arr[keys[i]] && typeof arr[keys[i]] === "object") {
      encodeValues(arr[keys[i]]);
    } else {
      arr[keys[i]] = encode(arr[keys[i]]);
    }
  }
  return arr;
}

var encodedValues = encodeValues(arr);

console.log(JSON.stringify(encodedValues, null, 2));

// Output:
// {
//   "title1": {
//     "item1": "one (this value was encoded!)",
//     "item2": "two (this value was encoded!)"
//   },
//   "title2": "three (this value was encoded!)",
//   "title3": "four (this value was encoded!)",
//   "title4": {
//     "item1": [
//       {
//         "arrayItem": "First array item (this value was encoded!)"
//       },
//       {
//         "arrayItem": "Second array item (this value was encoded!)"
//       }
//     ]
//   },
//   "title5": {
//     "item1": {
//       "subItem1": "five (this value was encoded!)",
//       "subItem2": "six (this value was encoded!)"
//     }
//   }
// }