JavaScript exploration: for Loop (forLoops)

In a for loop, you can obtain the values of arrays or arrays similar to objects, such as arguments and

In a for loop, you can obtain the values of arrays or arrays similar to objects, such as arguments and HTMLCollection objects. The general cycle is as follows:

// The second best loop for (var I = 0; I <myarray. length; I ++) {// use myarray [I] To Do Something}

The disadvantage of this type of loop is that the length of the array needs to be obtained at each loop. This reduces your code, especially when myarray is not an array but an HTMLCollection object.

HTMLCollections refers to the object returned by the DOM method, for example:

document.getElementsByName()document.getElementsByClassName()document.getElementsByTagName()

There are other HTMLCollections, which were introduced before the DOM standard and are still in use. Include:

Document. images: All image elements on the page document. links: All a tag elements document. forms: All forms document. forms [0]. elements: all fields in the first form on the page

The trouble with collections is that they query Basic Documents (HTML pages) in real time ). This means that every time you access the length of any set, you need to query the DOM in real time, and DOM operations are generally expensive.

This is why when you get the value cyclically, the length of the cached array (or set) is better, as shown in the following code:

For (var I = 0, max = myarray. length; I <max; I ++) {// What To Do With myarray [I}

In this way, you only retrieve the length value once in this loop.

In all browsers, the length of the cache HTMLCollections is faster when the content is obtained cyclically, between 2 times (Safari3) and 190 times (IE7. // This data looks very old for reference only

Note that when you explicitly want to modify the set in the loop (for example, adding more DOM elements), you may prefer length update instead of constants.

With the single var form, you can extract variables from the loop, as shown below:

Function logoff () {var I = 0, max, myarray = []; //... for (I = 0, max = myarray. length; I <max; I ++) {// use myarray [I] To Do Something }}

This form has the benefit of consistency because you stick to the single var form. The disadvantage is that it is difficult to copy and paste the entire loop when refactoring the code. For example, if you copy a loop from a function to another function, You have to determine that you can introduce I and max to a new function (if it is useless here, it is very likely that you will delete them from the original function ).

To adjust the loop, replace I ++ with one of the following expressions.

i = i + 1i += 1

JSLint prompts you to do this because ++ and -- promote "excessive trickiness )". If you ignore it directly, the plusplus option of JSLint will be false (default ).

There are two other forms of change, which are slightly improved because:

• One Variable missing (no max)
• Counting down to 0 is usually faster, because comparing with 0 is more efficient than comparing with the array length or something other than 0.

// The first form of change: var I, myarray = []; for (I = myarray. length; I --;) {// use myarray [I] To Do Something} // second use the while loop: var myarray = [], I = myarray. length; while (I --) {// use myarray [I] To Do Something}

These minor improvements are only reflected in performance, and JSLint will complain about using I.

Additional reading

The topic list of this article is as follows:

1. How should we understand the working principle of the JavaScript engine?
2. JavaScript exploration: the importance of writing maintainable code
3. JavaScript exploration: exercise caution when using global variables
4. JavaScript exploration: var pre-parsing and side effects
5. JavaScript exploration: for Loop (for Loops)
6. JavaScript exploration: for-in loop (for-in Loops)
7. Exploring JavaScript: Prototypes is too powerful
8. JavaScript: eval () is the devil"
9. JavaScript exploration: Using parseInt () for Numerical Conversion
10. Exploring JavaScript: Basic coding specifications
11. JavaScript exploration: function declaration and function expression
12. JavaScript exploration: Name function expressions
13. JavaScript: function name in the debugger
14. JavaScript: JScript Bug
15. JavaScript exploration: Memory Management of JScript
16. Exploring JavaScript: SpiderMonkey's quirks
17. JavaScript exploration: an alternative solution to naming function expressions
18. JavaScript exploration: Object
19. JavaScript exploration: Prototype chain
20. JavaScript exploration: Constructor
21. JavaScript probing: executable context Stack
22. Execution context 1: Variable object and activity object
23. Execution context 2: Scope chain Scope Chains
24. Execution context 3: Closure Closures
25. Execution context 4: This pointer
26. Exploring JavaScript: Powerful prototype and prototype chain
27. JavaScript Functions 1: function declaration
28. JavaScript function 2: function expressions
29. JavaScript function 3: function expressions in a group
30. JavaScript function 4: function Constructor
31. JavaScript variable object 1: VO Declaration
32. JavaScript variable object 2: VO in different execution contexts
33. JavaScript variable object 3: two stages of execution Context
34. JavaScript variable object IV: Variables
35. Property of the JavaScript variable object __parent _
36. JavaScript scope chain 1: Scope chain Definition
37. JavaScript scope chain 2: function Lifecycle
38. JavaScript scope chain 3: Scope chain features
39. JavaScript closure 1: Introduction to closures
40. JavaScript closure 2: Implementation of closure
41. JavaScript closure 3: Closure usage

This article is available at http://www.nowamagic.net/librarys/veda/detail/1624.