Home > Developer > JavaScript
For loop
A For loop is a tool that you will often use when you want to create a loop.
The following is the syntax for the FOR loop:
for (statement 1; Statement 2; Statement 3)
{
The code block that was executed
}
Statement 1 executes before the Loop (code block) starts
Statement 2 defines conditions for running loops (code blocks)
Statement 3 executes after the Loop (code block) has been executed
The basic structure is as follows:
| The code is as follows | Copy Code |
| for (initial condition; test condition; alter condition) { statements; } |
|
The parameters of the circular control code (that is, the parentheses) are as follows:
Initial Condition: Indicates the initial value of the cyclic variable;
test Condition: To control the end of the cycle of the conditional expression, the program every time the execution of the Loop Body statement (or statement block), to calculate whether the expression is true, if the result is true, then continue to run the next cycle; If the result is false, then jump out of the loop body.
alter condition: Refers to the way the cyclic variable is updated, and every time the program performs a loop, it needs to update the loop variable.
Use semicolons between the above cyclic control parameters; "To separate.
"Example 3-4" calculates the value of 1+2+3 ... +98+99+100:
| The code is as follows | Copy Code |
| <title> calculate the value of 1+2+3 ... +98+99+100 </title> <body> <script language= "JavaScript" type= "Text/javascript" > var total=0; for (var i=1; i<=100; i++) { Total+=i; } Alert (total); </script> </body> |
|
Next, we'll look down.
In the For loop, you can iterate over the values of an array or an array of similar objects, such as arguments and Htmlcollection objects. The usual cycle forms are as follows:
| The code is as follows | Copy Code |
The second best cycle |
|
The disadvantage of this form of circulation is that the length of the array is to be obtained each time the loop is cycled. This reduces your code, especially when MyArray is not an array, but a 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. Yes:
Document.images: All the picture elements on the page
Document.links: all a tag elements
Document.forms: All Forms
Document.forms[0].elements: All fields on the first form on the page
The trouble with collections is that they are querying basic documents (HTML pages) in real time. This means that every time you access the length of any collection, you have to query the DOM in real time, and DOM operations are generally expensive.
That's why when you loop through the values, the length of the cached Array (or collection) is a better form, as shown in the following code:
| The code is as follows | Copy Code |
for (var i = 0, max = Myarray.length i < max; i++) { |
|
In this way, you retrieve only one length value during this cycle.
In all browsers, the length of the cached htmlcollections is faster, twice times (SAFARI3) to 190 times times (IE7), when the content is recycled. This data looks very old, for reference only
Note that when you explicitly want to modify the collection in the loop (for example, by adding more DOM elements), you may prefer length updates to constants.
With the single var form, you can move the variable from the loop, as follows:
| The code is as follows | Copy Code |
function Looper () { |
|
This form has the advantage of consistency because you stick to the single var form. The problem is that it's difficult to copy and paste the entire loop when you refactor the code. For example, you copy a loop from one function to another, and you have to make sure that you can introduce I and max into a new function (if it doesn't work here, it's very likely that you'll have to delete them from the original function).
The last one that needs to be adjusted for loops is to replace i++ with one of the following expressions.
| The code is as follows | Copy Code |
i = i + 1 |
|
JSLint prompts you to do this because + + and –-promote "overly tricky (excessive trickiness)". If you ignore it directly, the jslint plusplus option will be false (default defaults).
There are two different forms of change that are slightly improved because:
• One less variable (no max)
• Down to 0, usually faster, because comparing to 0 is more efficient than an array of lengths or something other than 0.
The first form of change:
| The code is as follows | Copy Code |
var i, myarray = []; The second type uses a while loop: var myarray = [], |
|
These small improvements are only reflected in performance, and JSLint will complain about the use of i–-.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
