Depth first traversal (DFS) and breadth first traversal (BFS) in JavaScript

Depth first:

Depth first traversal DFS is similar to tree first traversal.
If the initial state is that all the vertices in the graph are not accessed, then starting from a vertex v, first access the vertex, and then search the traversal graph in depth first from each of its unaccepted adjacency points in turn, until all the vertices in the graph that have paths with V are accessed. If other vertices are not accessed at this time, select another one as the starting point, and repeat the above process until all vertices in the graph are accessed.

There are three ways of depth first traversal:

```// depth-first traversal
function interator(node) {
console.log(node);
if (node.children.length) {
for (var i = 0; i < node.children.length; i++) {
interator(node.children[i]);
}
}
}
```
```// Non recursive, the first node value passed in is the root element point in the DOM tree, that is, html
// Call: deep(document.documentElement)
function deep (node) {
var res = []; // Store visited nodes
if (node != null) {
var nodeList = []; // Store nodes to be accessed
nodeList.push(node);
while (nodeList.length > 0) {
var currentNode = nodeList.pop(); // Node currently being accessed
res.push(currentNode);
var childrens = currentNode.children;
for (var i = childrens.length - 1; i >= 0; i--) {
nodeList.push(childrens[i]);
}
}
}
return res;
}
```
```// Using recursion
var res = []; // Store nodes that have been accessed
function deep (node) {
if (node != null) { // This node exists
res.push(node);
// Use the children variable to store node.children, improve performance, and do not use node.children.length, so it is not necessary to get sub elements every time when the for loop is traversed
for (var i = 0,  childrens = node.children; i < childrens.length; i++) {
deep(childrens[i]);
}
}
return res;
}
```

Starting from a vertex v in the graph, after visiting V, access each adjacent point of V that has not been visited in turn, and then access their adjacent points in turn from these adjacent points, and make "the adjacent points of the first visited vertex are accessed before the adjacent points of the later visited vertex, until all the adjacent points of the visited vertex in the graph are accessed. If there are still vertices in the graph that have not been accessed at this time, you need to select another vertex that has not been accessed as the new starting point, and repeat the above process until all the vertices in the graph have been accessed.

There are three ways of breadth first traversal:

```// Breadth traversal
function interator(node) {

var arr = [];
arr.push(node);
while (arr.length > 0) {
node = arr.shift();
console.log(node);
if (node.children.length) {
for (var i = 0; i < node.children.length; i++) {
arr.push(node.children[i]);
}
}
}
}
```
```// recursion
var res = [];
function wide (node) {
if (res.indexOf(node) === -1) {
res.push(node); // Save to root node
}
var childrens = node.children;
for (var i = 0; i < childrens.length; i++) {
if (childrens[i] != null) {
res.push(childrens[i]); // Save all child elements of the current node
}
}
for (var j = 0; j < childrens.length; j++) {
wide(childrens[j]); // Recursion for each child element
}
return res;
}

```
```// non-recursive
function wide (node) {
var res = [];
var nodeList = []; // Store nodes to be accessed
nodeList.push(node);
while (nodeList.length > 0) {
var currentNode = nodeList.shift(0);
res.push(currentNode);
for (var i = 0, childrens = currentNode.children; i < childrens.length; i++) {
nodeList.push(childrens[i]);
}
}
return res;
}
```

Difference:

1. Depth first does not need to remember all nodes, so the occupied space is small, while breadth first needs to record all nodes first.

2. Depth first has backtracking operation (there is no way to go and you need to turn back), so it will take a little longer.

3. Stack is preferred for depth, i.e. first in first out.

4. Breadth first is in the form of queue, that is, first in, first out.

74 original articles published, 274 praised, 470000 visitors+

Posted on Sat, 14 Mar 2020 22:42:02 -0400 by Thatsmej