Examples of recursion and loop in JavaScript

For different types of problems that require repeated computation, the loop and recursive methods have their own advantages and provide a more intuitive and simple solution. The following describes the recursion and loop of JavaScript in detail, if you are interested, you can learn about the problems that require repeated computing for different types. The methods of loop and Recursion have their own advantages and can provide a more intuitive and simple solution, the following describes the recursion and loop of JavaScript in detail. If you are interested, you can understand it.

Recursion and loop

For different types of problems that require repeated computation, the methods of loop and Recursion have their own advantages and provide a more intuitive and simple solution. On the other hand, loops and recursive methods can convert each other. Code in any loop can be rewritten recursively to implement the same function, and vice versa. Without losing its universality, loop and Recursion can be summarized by the following pseudocode.

Pseudocode format description: The loop uses the while form; variables are not defined; values are assigned with: =; both conditional expressions and executed statements are written as functions, and related values are written in parentheses. For other syntaxes, try to be close to the Javascript specification.

The Code is as follows:

// Pseudo code of a loop // while form function loop (arguments) {// The initial result of the result: = initial_value; while (condition (variable, arguments )) {// loop condition. Only arguments is required, or Circular Variable // calculation result may be introduced for convenience. Parameters include previous results, current cyclic variables, and external variables result: = calculate (result, variable, extern_variables); // affects the external environment of the function, that is, modifying the external variable changeStatus (result, variable, extern_variables); // after the statement in the loop body is executed, modify the parameter or loop variable. Modify_arguments_variable (arguments, variable);} // return result ;}

We also provide pseudo code for recursive functions.

The Code is as follows:

// Pseudo code of a recursion function recursion (arguments) {// the following code is the structure part that controls repeated function calls. // Obtain the new parameter that calls this function again, which may be multiple sets of arguments values. // Corresponds to the condition (variable, arguments) and modify_arguments_variable (arguments, variable) in the loop ). New_arguments: = conditional_get_next (arguments); // call the function itself for each group of new parameters. Results: = recursion (new_arguments); // the following code is the function part that runs every call. // The result is calculated. Previous results, current cyclic variables, and external variables are involved. // Corresponds to result: = calculate (result, variable, extern_variables) in the loop ). Result: = calculate (arguments, extern_variables); result: = combine (result, results); // affects the external environment of the function, that is, modifying the external variable changeStatus (result, arguments, extern_variables); return result ;}

By comparing the two sections of code, we can see that the loop and Recursion have similar components. By changing the order and appropriate transformation, any loop can be implemented by recursion. When the program is simple, this conversion is easy to see. For example, the following simple aggregate sum function:

The Code is as follows:

//loop function sum(num){ var result=1; while (num>1){ result+=num; num--; } return result; }

Corresponding recursive form:
The Code is as follows:

//recursion function sum2(num){ if (num>1){ return num+sum(num-1); }else{ return 1; } }

On the contrary, most recursive Programs can be implemented directly by loops. The following is a function in the cyclic form of finding the maximum common approx.

The Code is as follows:

Function gcd2 (a, B) {var temp; if (
 
  
However, the conversion from recursion to loop is not so easy. The new parameter section in recursive pseudo-code that generates and calls this function again

New_arguments: = conditional_get_next (arguments );

It is more flexible than the corresponding part of the loop. Recursion can be divided into two types according to the number of new parameter groups (all parameters required by the function are a group. The first type is a fixed number of parameter groups. This recursion can be converted to a loop, for example, an example of the Fibonacci series and the maximum common number; the second type is that the number of parameter groups is uncertain-as in traversing a graph or tree, each vertex has any adjacent vertex-This recursion cannot be directly converted to a loop.

Because loops can only be repeated in one dimension, recursion can traverse two-dimensional structures. For example, in a tree, a node has both its subnodes and nodes of the same level. A simple one-dimensional loop cannot traverse in two directions.

However, if we remember some information about the node location through a certain data structure in the loop, the second type of recursion can also be implemented in a loop.

Let's use another example to practice the conclusions observed above. HTML5 defines a new method getElementsByClassName (names) for Document and Element to return all elements with the given class value. Some browsers including Firefox3 support this method. Next we will first use the recursive method to give a version with a weak function, and then rewrite it with a circular method.

  
The Code is as follows:
  
Var getElementsByClass ={}; // elem is an HTMLElement // name for a single class name // returns the array getElementsByClass containing all the class attributes under elem containing the given element. recursion1 = function (elem, name) {var list = []; function getElements (el) {if (el. className. split (''). indexOf (name)>-1) {list. push (el) ;}for (var I = 0, c = el. children; I
   
    
As mentioned above, in order to remember the node location information in a loop, we need a data structure that can implement the following methods.

Push (object) // write an object.

Objectpop () // read the recently written object and delete it from the data structure.

Objectget () // read the recently written object without changing the data structure.

The stack is such a post-import, first-out data structure. The Array object in Javascript supports the first two methods. We can add a third method to it.

Loop version:

    
The Code is as follows:
    
getElementsByClass.loop1 = function(elem, name){ //use a js array as the basis of a needed stack var stack = []; stack.get = function(){ return stack[stack.length - 1]; } var list = []; //the business logic part. put the eligible element to the list. function testElem(el){ if (el.className.split(' ').indexOf(name) > -1) { list.push(el); } } //check the root element testElem(elem); //initialize the stack stack.push({ pointer: elem, num: 0 }); var parent, num, el; while (true) { parent = stack.get(); el = parent.pointer.children[parent.num]; if (el) {//enter a deeper layer of the tree testElem(el); stack.push({ pointer: el, num: 0 }); } else {//return to the upper layer if (stack.pop().pointer === elem) { break; } else { stack.get().num += 1; } } } return list; }
    
To sum up. All loops can be implemented recursively; All recursion can be implemented cyclically. Which method is used is more convenient and intuitive based on the specific ideas and users' preferences.

Efficiency 

In terms of performance, recursion is no better than loop. In addition to the overhead of multiple function calls, recursion may lead to unnecessary Repeated Computation in some cases. Take the recursive program used to calculate the Fibonacci sequence as an example. When the nth item A (n) is obtained, each item is calculated repeatedly from the nth N-2. The smaller the number of items, the more repeated. If B (I) is the number of times that item I is calculated

B (I) = 1; I = n, n-1

B (I) = B (I + 1) + B (I + 2); I
     
In this way, B (I) forms an interesting inverse Fibonacci series. When A (n) is used:

B (I) = A (n + 1-i)

From another perspective, if C (I) is the number of addition times required for A (I ),

C (I) = 0; I = 0, 1

C (I) = 1 + C (I-1) + C (I-1); I> 1

So that D (I) = C (I) + 1 has

D (I) = 1; I = 0, 1

D (I) = D (I-1) + D (I-1)

Therefore, D (I) forms another Fibonacci series. Therefore, we can conclude that:

C (n) = A (n + 1)-1

While A (n) increases in Geometric Order, this excess repetition will become amazing when n is large. Corresponding procedures that adopt loops include:

B (n) = 1; n is an arbitrary value.

C (n) = 0; n = 0, 1

C (n) = n-1; n> 1

Therefore, when n is large, the previous circular program is much faster than the recursive program.

Like the loop in the previous section, this defect in recursion can also be compensated. We only need to remember the items that have been computed. When a large item is obtained, we can directly read the previous items. This technology is common in recursion and is called "memorization ).

The following is a recursive algorithm for finding the Fibonacci series using storage technology.

    
The Code is as follows:
    
//recursion with memorization function fibonacci4(n){ var memory = []; //used to store each calculated item function calc(n){ var result, p, q; if (n < 2) { memory[n] = n; return n; } else { p = memory[n - 1] ? memory[n - 1] : calc(n - 1); q = memory[n - 2] ? memory[n - 2] : calc(n - 2); result = p + q; memory[n] = result; return result; } } return calc(n); }
    
For more information about recursive and loop examples of JavaScript, see PHP!