使用 for 循环使用 class 方法进行更新 - 不起作用

Question

我正在尝试使用“节点”class 构造函数创建一个对象数组。每个节点都应该有一个包含相邻节点的数组。当我使用for循环遍历每个节点添加邻居时，它触发了class方法，但是节点对象更新失败。

这是我正在做的 contrived/simplified 版本：

export default class Node {
    neighbours: Node[];
    addNeighbours: (thisNode: Node) => void;
    constructor() {
        this.neighbours = [];
        this.addNeighbours = function (thisNode: Node) {
            thisNode.neighbours = []
            this.neighbours.push(thisNode)
            console.log(this.neighbours.length); // returns 1. So this is being triggered and appears to be working.
        }
    }
}

// Create an array to represent the 2D grid.
export function createArrayOfNodes(): Node[][] {
    let returnGrid: Node[][] = [
        [new Node(), new Node(), new Node()],
        [new Node(), new Node(), new Node()],
        [new Node(), new Node(), new Node()],
    ]

    // add neighbours to each Node
    for (let i = 0; i < returnGrid.length; i++) {
        for (let j = 0; j < returnGrid.length; j++) {
            const newJ = j + 1 === returnGrid.length ? 0 : j + 1
            returnGrid[i][j].addNeighbours(returnGrid[i][newJ]); // This fails to add a neighbour
            // returnGrid[i][j].addNeighbours(new Node()); // This adds a neighbour OK
        }
    }
    // returnGrid[0][0].addNeighbours(returnGrid[0][1]); // This adds a neighbour OK

    return returnGrid;
}

console.log(createArrayOfNodes) // Returns an array of Nodes, but they don't have any Nodes in their neighbour properties.

根据注释掉的代码，如果 neighbours 属性在 for 循环之外，我可以更新它。如果我在 for 循环中，我可以在创建新节点时更新 neighbours 属性，但如果我尝试从 returnGrid 添加节点则不能。谁能解释一下吗？

Answer 1

每次调用 addNeighbours 方法时，都会重新分配传递的 Node 的 neighbours 数组。这将有效地重置通过 Node 的 neighbours 数组。

删除 thisNode.neighbours = [] 行。

class Node {
  neighbours = [];

  addNeighbours(thisNode) {
    this.neighbours.push(thisNode)
  }
}

// Create an array to represent the 2D grid.
function createArrayOfNodes() {
  let returnGrid = [
    [new Node(), new Node(), new Node()],
    [new Node(), new Node(), new Node()],
    [new Node(), new Node(), new Node()],
  ]

  // add neighbours to each Node
  for (let i = 0; i < returnGrid.length; i++) {
    for (let j = 0; j < returnGrid.length; j++) {
      const newJ = j + 1 === returnGrid.length ? 0 : j + 1
      returnGrid[i][j].addNeighbours(returnGrid[i][newJ]);
    }
  }

  return returnGrid;
}

console.log(createArrayOfNodes());

旁注：我注意到您是如何在 Node class 上声明属性和方法的。您可以在 class 范围内分配每个实例应继承的属性和方法，而不是 constructor.

constructor 可用于在实例化 classes 时断言逻辑和处理参数。

export default class Node {
  neighbours: Node[] = [];

  addNeighbours(thisNode: Node): void {
    this.neighbours.push(thisNode)
  }
}

Answer 2

似乎以下行使您的代码无法运行。注释掉一切正常。

thisNode.neighbours = [];

节点应如下所示

export default class Node {
  neighbours: Node[];
  addNeighbours: (thisNode: Node) => void;
  constructor() {
    this.neighbours = [];
    this.addNeighbours = function (thisNode: Node) {
      this.neighbours.push(thisNode);
    };
  }
}

实际上，您可以在构造函数之外定义 addNeighbours。

export default class Node {
  neighbours: Node[];

  constructor() {
    this.neighbours = [];
  }

  addNeighbours = function (thisNode: Node) {
    this.neighbours.push(thisNode);
  };
}

工作示例，

使用 for 循环使用 class 方法进行更新 - 不起作用

Using a for loop to update with a class method - not working

javascript

loops

class

typescript