|
|
Code Blocks
Let's start by clarifying what a block of code is, as blocks are used extensively when constructing conditions and loops.
A block of code consists of zero or more expressions enclosed in curly brackets.
{
var a = 1;
var b = 3;
}
You can nest blocks within each other indefinitely:
{
var a = 1;
var b = 3;
var c, d;
{
c = a + b;
{
d = a - b;
}
}
}
Best Practice Tips
Use end-of-line semicolons. Although the semicolon is optional when you have one expression per line, it's good to develop the habit of using them. For best readability, the individual expressions inside a block should be placed one per line and separated by semi-colons.
Indent any code placed within curly brackets. Some people use one tab indentation, some use four spaces, and some use two spaces. It really doesn't matter, as long as you're consistent. In the example above the outer block is indented with two spaces, the code in the first nested block is indented with four spaces and the innermost block is indented with six spaces.
Use curly brackets. When a block consists of only one expression, the curly brackets are optional, but for readability and maintainability, you should get into the habit of always using them, even when they're optional.
Ready to jump into loops and ifs? Note that the examples in the following sections require you to switch to the multi-line Firebug console.
if Conditions
Here's a simple example of an if condition:
var result = '';
if (a > 2) {
result = 'a is greater than 2';
}
The parts of the if condition are:
The if statement
A condition in parentheses—"is a greater than 2?"
Code block to be executed if the condition is satisfied
The condition (the part in parentheses) always returns a boolean value and
may contain:
A logical operation: !, && or ||
A comparison, such as ===, !=, >, and so on
Any value or variable that can be converted to a boolean
A combination of the above
There can also be an optional else part of the if condition. The else statement is followed by a block of code to be executed if the condition was evaluated to false.
if (a > 2) {
result = 'a is greater than 2';
} else {
result = 'a is NOT greater than 2';
}
In between the if and the else, there can also be an unlimited number of else if conditions. Here's an example:
if (a > 2 || a < -2) {
result = 'a is not between -2 and 2';
} else if (a === 0 && b === 0) {
result = 'both a and b are zeros';
} else if (a === b) {
result = 'a and b are equal';
} else {
result = 'I give up';
}
You can also nest conditions by putting new conditions within any of the blocks.
if (a === 1) {
if (b === 2) {
result = 'a is 1 and b is 2';
} else {
result = 'a is 1 but b is not 2';
}
} else {
result = 'a is not 1, no idea about b';
}
Checking if a Variable Exists
It's often useful to check whether a variable exists. The laziest way to do this is simply putting the variable in the condition part of the if , for example if (somevar) {...} , but this is not necessarily the best method. Let's take a look at an example that tests whether a variable called somevar exists, and if so, sets the result variable to yes :
>>> var result = '';
>>> if (somevar){result = 'yes';}
somevar is not defined
>>> result;
""
This code obviously works, because at the end result was not "yes". But firstly, the code generated a warning: somevar is not defined and as a JavaScript whiz you don't want your code to do anything like that. Secondly, just because if (somevar) returned false doesn't mean that somevar is not defined. It could be that somevar is defined and initialized but contains a falsy value, like false or 0.
A better way to check if a variable is defined is to use typeof.
>>> if (typeof somevar !== "undefined" {result = 'yes';}
>>> result;
""
typeof will always return a string and you can compare this string with "undefined". Note that the variable somevar may have been declared but not assigned a value yet and you'll still get the same result. So when testing with typeof like this, you're really testing whether the variable has any value (other than the value undefined).
>>> var somevar;
>>> if (typeof somevar !== "undefined"{result = 'yes';}
>>> result;
""
>>> somevar = undefined;
>>> if (typeof somevar !== "undefined"{result = 'yes';}
>>> result;
""
If a variable is defined and initialized with any value other than undefined, its type returned by typeof is no longer "undefined".
>>> somevar = 123;
>>> if (typeof somevar !== "undefined"{result = 'yes';}
>>> result;
"yes"
Alternative if Syntax
When you have a very simple condition you can consider using an alternative if syntax. Take a look at this:
var a = 1;
var result = '';
if (a === 1) {
result = "a is one";
} else {
result = "a is not one";
}
The if condition can be expressed simply as:
var result = (a === 1) ? "a is one" : "a is not one";
You should only use this syntax for very simple conditions. Be careful not to abuse it, as it can easily make your code unreadable.
The ? is called ternary operator.
Switch
If you find yourself using an if condition and having too many else if parts, you could consider changing the if to a switch.
var a = '1';
var result = '';
switch (a) {
case 1:
result = 'Number 1';
break;
case '1':
result = 'String 1';
break;
default:
result = 'I don\'t know';
break;
}
result;
The result of executing this will be "String 1". Let's see what the parts of a switch are:
The switch statement.
Some expression in parentheses. The expression most often contains a variable, but can be anything that returns a value.
A number of caseblocks enclosed in curly brackets.
Each case statement is followed by an expression. The result of the expression is compared to the expression placed after the switch statement. If the result of the comparison is true, the code that follows the colon after
the case is executed.
There is an optional break statement to signal the end of the case block. If this break statement is reached, we're all done with the switch. Otherwise, if the break is missing, we enter the next case block, which should be avoided.
There's an optional default statement, which is followed by a block of code that is executed if none of the previous cases evaluated to true.
In other words, the step-by-step procedure for executing a switch statement is as follows:
Evaluate the switch expression found in parentheses, remember it.
Move to the first case, compare its value with the one from step 1.
If the comparison in step 2 returns true, execute the code in the case block.
After the case block is executed, if there's a break statement at the end of it, exit the switch.
If there's no break or step 2 returned false, move on to the next case block.
Repeat steps 2 to 5.
If we're still here (we didn't exit in step 4), execute the code following the default statement.
Best Practice Tips
Indent the case line, and then further indent the code that
follows it.
Don't forget to break .
Sometimes you may want to omit the break intentionally, but that's rare. It's called a fall-through and should always be documented because it may look like an accidental omission. On the other hand, sometimes you may want to omit the whole code block following a case and have two cases sharing the same code. This is fine, but doesn't change the rule that if there's code that follows a case statement, this code should end with a break . In terms of indentation, aligning the break with the case or with the code inside the case is a personal preference; again, being consistent is what matters.
Use the default case. This will help you make sure you have a meaningful result after the switch, even if none of the cases matched the value being switched.
Loops
if-else and switch statements allow your code to take different paths, as if you're at a crossroads and decide which way to go depending on a condition. Loops, on the other hand, allow your code to take a few roundabouts before merging back into the main road. How many repetitions? That depends on the result of evaluating a condition before (or after) each iteration.
Let's say you are (your program execution is) traveling from A to B. At some point, you reach a place where you evaluate a condition C. The result of evaluating C tells you if you should go into a loop L. You make one iteration. Then you evaluate the condition once again to see if another iteration is needed. Eventually, you move on your way to B.
An infiniteloop is when the condition is always true and your code gets stuck in the loop "forever". This is, of course, is a logical error and you should look out for such scenarios.
In JavaScript, there are four types of loops:
while loops
do-while loops
for loops
for-in loops
While Loops
while loops are the simplest type of loop. They look like this:
var i = 0;
while (i < 10) {
i++;
}
The while statement is followed by a condition in parentheses and a code block in curly brackets. As long as the condition evaluates to true, the code block is executed over and over again.
Do-while loops
do-while loops are a slight variation of the while loops. An example:
var i = 0;
do {
i++;
} while (i < 10)
Here, the do statement is followed by a code block and a condition after the block. This means that the code block will always be executed, at least once, before the condition is evaluated.
If you initialize i to 11 instead of 0 in the last two examples, the code block in the first example (the while loop) will not be executed and i will still be 11 at the end, while in the second ( do-while loop), the code block will be executed once and i will become 12.
For Loops
f or is the most widely used type of loop and you should make sure you're comfortable with this one. It requires a just little bit more in terms of syntax.
In addition to the condition C and the code block L, you have the following:
Initialization—some code that is executed before you even enter the loop (marked with 0 in the diagram)
Increment—some code that is executed after every iteration (marked with ++ in the diagram)
The most widely used pattern of using a for loop is:
In the initialization part you define a variable, most often called i, like this: var i = 0;
In the condition part you compare i to a boundary value, like i < 100
In the increment part, you increase i by 1, like i++
Here's an example:
var punishment = '';
for (var i = 0; i < 100; i++) {
punishment += 'I will never do this again, ';
}
All three parts (initialization, condition, increment) can contain multiple expressions separated by commas. You can rewrite the example and define the variable punishment inside the initialization part of the loop.
for (var i = 0, punishment = ''; i < 100; i++) {
punishment += 'I will never do this again, ';
}
Can you move the body of the loop inside the increment part? Yes, you can, especially as it's a one-liner. This will give you a loop that looks a little awkward, as it has no body:
for (var i = 0, punishment = '';
i < 100;
i++, punishment += 'I will never do this again, ')
{
// nothing here
}
These three parts are actually all optional. Here's another way of rewriting the same example:
var i = 0, punishment = '';
for (; {
punishment += 'I will never do this again, ';
if (++i == 100) {
break;
}
}
Although the last rewrite works exactly the same way as the original, it is longer and harder to read. It's also possible to achieve the same result by using a while loop. But for loops make the code tighter and more robust, because the mere syntax of the for loop makes you think about the three parts (initialization, condition, increment) and thus, helps you reconfirm your logic and avoid situations such as being stuck in an infinite loop.
for loops can be nested within each other. Here's an example of a loop that is nested inside another loop and assembles a string containing 10 rows and 10 columns of asterisks. Think of i being the row and j being the column of an "image".
var res = '\n';
for(var i = 0; i < 10; i++) {
for(var j = 0; j < 10; j++) {
res += '* ';
}
res+= '\n';
}
The result is a string like:
"
* * * * * * * * * *
* * * * * * * * * *
* * * * * * * * * *
* * * * * * * * * *
* * * * * * * * * *
* * * * * * * * * *
* * * * * * * * * *
* * * * * * * * * *
* * * * * * * * * *
* * * * * * * * * *
"
Here's another example that uses nested loops and a modulus operation in order to draw a little snowflake-like result.
var res = '\n', i, j;
for(i = 1; i <= 7; i++) {
for(j = 1; j <= 15; j++) {
res += (i * j) % 8 ? ' ' : '*';
}
res+= '\n';
}
"
*
* * *
*
* * * * * * *
*
* * *
*
"
For-in Loops
The for-in loop is used to iterate over the elements of an array (or an object, as we'll see later). This is its only use; it cannot be used as a general-purpose repetition mechanism that replaces for or while. Let's see an example of using a for-in to loop through the elements of an array. But bear in mind that this is for informational purposes only, as for-in is mostly suitable for objects, and the regular for loop should be used for arrays.
In this example, we'll iterate over all of the elements of an array and print out the index (the key) and the value of each element:
var a = ['a', 'b', 'c', 'x', 'y', 'z'];
var result = '\n';
for (var i in a) {
result += 'index: ' + i + ', value: ' + a + '\n';
}
The result is:
"
index: 0, value: a
index: 1, value: b
index: 2, value: c
index: 3, value: x
index: 4, value: y
index: 5, value: z
"
Comments
One last thing for this chapter: comments. Inside your JavaScript code you can put comments. These are ignored by the JavaScript engine and don't have any effect on how the program works. But they can be invaluable when you revisit your code after a few months, or transfer the code to someone else for maintenance.
Two types of comments are allowed:
Single line comments—start with // and end at the end of the line
Multi-line comments—start with /* and end with */ on the same line or any subsequent line. Note that any code in between the comment start and the comment end will be ignored.
Some examples:
// beginning of line
var a = 1; // anywhere on the line
/* multi-line comment on a single line */
/*
comment
that spans
several lines
*/
There are even utilities, such as JSDoc, that can parse your code and extract meaningful documentation based on your comments. |
|
楼主: Sky-Tiger
IP卡
狗仔卡
楼主
显身卡