遞回遍歷樹的作業很奇怪（JavaScript）-有解無憂

我已經開始深入研究 Tree 的主題。而且我發現了奇怪的（對我來說）行為。

class tree_node {
  constructor(n_array) {
    this.n_array = n_array;
    this.descendants = [];
    this.child();
  }
  child() {
    if (this.n_array.length !=1){
      let m = Math.floor(this.n_array.length / 2);
      let l = this.n_array.slice(0,m);
      let r = this.n_array.slice(m);
      const left = new tree_node(l);
      const right = new tree_node(r);
      this.descendants.push(left, right);
    }
    else return 0
  }
}

所以，在這里我創建了一個節點結構，它獲取一個整數陣列，并將其分成兩半，直到葉子不再包含陣列的一個元素。

let n_array = [1,3,2,5];
root_node = new tree_node(n_array);

現在我想遍歷樹并提醒每個節點的“n_array”。我以為它應該是這樣的

function show_tree(root_node){
  if (root_node.descendants.lenght != 0){
    root_node.descendants.forEach(element => {
      return show_tree(element);
    });
  }
  else {
    alert(root_node.n_array)
    return 0;
  } 
}

但它不起作用。如果我使用 Web 瀏覽器控制臺，那么root.descendants.length會給我長度。但在我的遞回中，它沒有。每次都是未定義的

我從代碼中刪減了越來越多的內容，最后，我得到了這個。

function show_tree(root_node){
  alert(root_node.n_array)
  root_node.descendants.forEach(element => {
    return show_tree(element);
  });  
}

作業解決方案有效，但我不明白為什么。我希望它會遇到錯誤，因為在樹的末尾root_node.descendants將是undefined。

更糟糕的是 - 我不明白為什么在每次呼叫root_node.descendants !=0時這個遞回停止并且不會進入無限回圈......請幫助我理解

為什么我的第一個版本的show_tree不起作用
為什么最后一個有效。

uj5u.com熱心網友回復：

您已經有效地構建了一個看起來像這樣的樹結構：

    [1, 3, 2, 5]
      /       \
  [1, 3]     [2, 5]
   /   \      /   \
  [1]  [3]   [2]   [5] 
   |    |     |     |
  [ ]  [ ]   [ ]   [ ]

在您的第一個功能中，您有一些問題。直接的問題是您正在使用.lenght而不是.length. 關于你的函式，接下來要注意的是它何時執行它alert()的 s。在您的情況下，您僅alert()在節點具有空陣列作為其descendants屬性時執行。在上面的樹形圖中，您會注意到只有最后一個節點[1]、[3]、[2]和是這種情況[5]，因此會發出警報。您遍歷的所有其他節點確實具有非空后代，因此不會向螢屏發出警報/記錄：

顯示代碼片段

class tree_node {
  constructor(n_array) {
    this.n_array = n_array;
    this.descendants = [];
    this.child();
  }
  child() {
    if (this.n_array.length !=1){
      let m = Math.floor(this.n_array.length / 2);
      let l = this.n_array.slice(0,m);
      let r = this.n_array.slice(m);
      const left = new tree_node(l);
      const right = new tree_node(r);
      this.descendants.push(left, right);
    }
  }
}

let n_array = [1,3,2,5];
root_node = new tree_node(n_array); 

function show_tree(root_node){
  if (root_node.descendants.length != 0){
    root_node.descendants.forEach(element => {
      show_tree(element);
    });
  }
  else {
    console.log(root_node.n_array); // replaced with console.log (as this is a more preferred way of logging data)
  } 
}

show_tree(root_node);
// Logs:
// [1]
// [3]
// [2]
// [5]

與您的第一個函式不同，您的第二個函式會提醒它訪問的每個節點，而不僅僅是那些沒有后代的節點。那是因為 youralert()是函式的第一行，所以它總是會show_tree()為呼叫函式的每個節點運行警報。

我希望它會遇到錯誤，因為在樹的末尾 root_node.descendants 將是未定義的

如果您查看您的tree_node類，您會注意到您創建的每個節點都有一個descendants屬性，該屬性被分配給您的建構式中的一個空陣列。因此，當您遍歷/回圈您的樹并進行進一步的遞回呼叫時，您傳遞給show_tree()函式的每個節點都將具有一個descendants屬性 - 有時descendants節點的將是一個空陣列。結果，當您使用時不會發生錯誤：

root_node.descendants.forEach(..)

因為呼叫.forEach()空陣列 ( []) 是有效的。這導致你的另一個問題......：

我不明白為什么這個遞回停止并且沒有進入無限回圈

當您遍歷樹中的節點時，您最終會到達葉節點（沒有后代的節點（.descendants是一個空陣列））。發生這種情況時，您的.forEach()回圈將不會在其“回呼”中運行代碼，因此不會進行進一步的遞回呼叫show_tree()。相反，函式回傳給它的呼叫者，它可以開始“解開”遞回呼叫或繼續回圈其他兄弟節點。

uj5u.com熱心網友回復：

我相信您的問題的答案是：

這行有錯別字root_node.descendants.lenght != 0，我們可以改成 root_node.descendants.length != 0
root_node.descendants不會undefined，它將是 [] 或空陣列，因此 forEach 根本不會運行，這可能是所需的行為。

我已經稍微修改了你的方法，包括一個 v1 和 v2 后綴來區分它們，并添加了一個深度引數，所以我們可以記錄節點深度。此外，我們將只使用 console.log()，而不是使用 alert()。

我認為現在運行每個作品，v1 方法將只記錄葉節點，而 v2 方法將記錄所有節點。

class tree_node {
  constructor(n_array) {
    this.n_array = n_array;
    this.descendants = [];
    this.child();
  }
  child() {
    if (this.n_array.length !=1){
      let m = Math.floor(this.n_array.length / 2);
      let l = this.n_array.slice(0,m);
      let r = this.n_array.slice(m);
      const left = new tree_node(l);
      const right = new tree_node(r);
      this.descendants.push(left, right);
    }
    else return 0
  }
}

function show_tree_v1(root_node, depth = 0) {
  if (root_node.descendants.length != 0){
    root_node.descendants.forEach(element => {
      return show_tree_v1(element, depth   1);
    });
  } else {
    console.log('show_tree_v1: [', root_node.n_array.join(","), '] , depth:', depth)
    return 0;
  } 
}

function show_tree_v2(root_node, depth = 0){
  console.log('show_tree_v2: n_array: [', root_node.n_array.join(","), '], depth:', depth)
  root_node.descendants.forEach(element => {
    return show_tree_v2(element, depth   1);
  });  
}

let n_array = [1,3,2,5];
root_node = new tree_node(n_array);

console.log('Show tree (v1):')
show_tree_v1(root_node)

console.log('Show tree (v2):')
show_tree_v2(root_node)

.as-console-wrapper { max-height: 100% !important; top: 0; }

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/417794.html

標籤：

上一篇：JS中的遞回函式

下一篇：Dart：我可以在滿足條件后結束遞回嗎