Javascript 将深度参数添加到console.log以进行递归

我正在试着调试一个递归函数，如果我能跟踪深度，那就太好了。我试图编写一个版本的console.log，该版本采用了一个深度参数，并在日志前面添加了相应数量的空格，但它并不完全正常工作。最大的问题是，当运行Chrome调试器时，jquery对象的显示方式不同。理想情况下，dlog函数与console.log完全相同，只是预加了n个空格，其中n=depth*2

<!-- nested divs -->
<style>
  .node {margin-left:20px}
</style>

<div class = 'container'>
  <div class='node'><span class='text'>1</span>
    <div class='node'><span class='text'>2</span>
      <div class='node'><span class='text'>3</span>
      </div>
    </div>
  </div>
</div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
<script>

// Log with depth
function dlog() {
  var depth = arguments[arguments.length - 1]
  var real_args = []
  for(var i = 0; i < arguments.length - 1; i++)
    real_args.push(arguments[i])
  var ds = ''
  for(var i = 0; i < depth; i++) ds += '  '
  console.log(ds, real_args)
}

// Just walk through the node tree, logging as we go.
function walk_node(node, depth) {
  dlog('walking node: ', node, depth)
  console.log('walking node: ', node)
  var child = node.children('.node').first()
  if(child.length > 0)  walk_node(child, depth + 1)
}

walk_node($('.container'), 0)
</script>

.node{左边距：20px}
1.
2.
3.
//深度测井
函数dlog（）{
变量深度=参数[arguments.length-1]
var real_args=[]
for（var i=0；i0）行走节点（child，深度+1）
}
walk_节点（$（'.container'），0）

我认为问题在于for循环将节点分成多个部分。如果您不需要灵活地向dlog（）发送数量可变的参数，那么将dlog（）更改为此应该可以解决您的问题：

// Log with depth
function dlog() {
  var depth = arguments[2]
  var label = arguments[0];
  var real_args = arguments[1]
  var ds = ''
  for(var i = 0; i < depth; i++) ds += '  '
  console.log(label+ds, real_args)
}

//记录深度
函数dlog（）{
变量深度=参数[2]
变量标签=参数[0]；
var real_args=参数[1]
变量ds=''
对于（变量i=0；i

---

显然，这段代码还有改进的余地（比如前面提到的发送可变数量参数的功能，或者至少进行一些错误检查，以确保发送的参数数量正确，并且参数类型正确）。但是，如果您只是尝试进行一些快速而肮脏的调试，并且希望输出与另一个console.log（）调用中的输出相同，那么应该这样做…

我认为问题在于您的for循环将节点分成多个部分。如果您不需要灵活地向dlog（）发送数量可变的参数，那么将dlog（）更改为此应该可以解决您的问题：

// Log with depth
function dlog() {
  var depth = arguments[2]
  var label = arguments[0];
  var real_args = arguments[1]
  var ds = ''
  for(var i = 0; i < depth; i++) ds += '  '
  console.log(label+ds, real_args)
}

//记录深度
函数dlog（）{
变量深度=参数[2]
变量标签=参数[0]；
var real_args=参数[1]
变量ds=''
对于（变量i=0；i

---

显然，这段代码还有改进的余地（比如前面提到的发送可变数量参数的功能，或者至少进行一些错误检查，以确保发送的参数数量正确，并且参数类型正确）。但是，如果您只是尝试进行一些快速而肮脏的调试，并且希望输出与另一个console.log（）调用中的输出相同，这应该可以做到…

我在Java和C中实现了非常类似的功能，通过向日志函数传递前缀字符串，并在每个递归级别向前缀字符串添加空格。每次打印时构造前缀字符串可能比循环更有效

所以你可能会有更好的运气，比如：

// Log with depth
function dlog() {
  var depth = arguments[arguments.length - 1];
  var real_args = [];
  real_args.push(prefix);
  for(var i = 0; i < arguments.length - 1; i++)
    real_args.push(arguments[i]);
  console.log.apply(console, real_args);
}

// Just walk through the node tree, logging as we go.
function walk_node(node, prefix) {
  if (! prefix) {
    prefix = '';
  }
  dlog('walking node: ', node, prefix);
  console.log('walking node: ', node);
  var child = node.children('.node').first();
  if(child.length > 0)  walk_node(child, prefix + ' ');
}

//记录深度
函数dlog（）{
var depth=arguments[arguments.length-1]；
var real_args=[]；
实参数推送（前缀）；
for（var i=0；i0）walk_节点（child，前缀+“”）；
}

我在Java和C中实现了非常类似的功能，方法是将前缀字符串传递给日志函数，并在每个递归级别的前缀字符串中添加空格。每次打印时构造前缀字符串可能比循环更有效

所以你可能会有更好的运气，比如：

// Log with depth
function dlog() {
  var depth = arguments[arguments.length - 1];
  var real_args = [];
  real_args.push(prefix);
  for(var i = 0; i < arguments.length - 1; i++)
    real_args.push(arguments[i]);
  console.log.apply(console, real_args);
}

// Just walk through the node tree, logging as we go.
function walk_node(node, prefix) {
  if (! prefix) {
    prefix = '';
  }
  dlog('walking node: ', node, prefix);
  console.log('walking node: ', node);
  var child = node.children('.node').first();
  if(child.length > 0)  walk_node(child, prefix + ' ');
}

//记录深度
函数dlog（）{
var depth=arguments[arguments.length-1]；
var real_args=[]；
实参数推送（前缀）；
for（var i=0；i0）walk_节点（child，前缀+“”）；
}

+1表示足够近。但仍在等待一个完美的答案。我不明白为什么推到数组会导致问题…+1足够近。但仍在等待一个完美的答案。我不明白为什么推到数组会导致问题…“console.log.apply（console.log，real_args）”上的“uncaughttypeerror:非法调用”；“@Jesse Aldridge-console.log.apply（console，real_args）呢？如图所示：是的，这很有效，谢谢。事实上，再看一遍您的代码，似乎没有必要使用dlog。最好只做console.log（前缀，…）。感谢您的帮助。@Jesse Aldridge“console.log.apply（console.log，real_args）；”上的“Uncaught TypeError:非法调用”；“console.log.apply（console，real_args）呢？如图所示：是的，这很有效，谢谢。事实上，再看一遍您的代码，似乎没有必要使用dlog。最好只做console.log（前缀，…）。谢谢你的帮助。