The three main components of Java Script are: ECMAScript (grammar), DOM (Document Object Model), BOM (Browser Object Model).
operator (operator)
1 Classification of operators.
Operators, also known as operators, are symbols used to implement functions such as assignment, comparison, and arithmetic operations.
Here we learn the following commonly used operators:
- arithmetic operator
- increment and decrement operators
- comparison operator
- Logical Operators
- assignment operator
2 Arithmetic operators.
As the name suggests, it is about calculations such as addition, subtraction, multiplication, and division. In js, it is the arithmetic operation of variables or values.
It should be noted that there is a problem with floating point numbers in js:
var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100); // 结果不是 7， 而是：7.000000000000001
Floating-point numbers are imprecise, so do not perform comparisons between floating-point numbers.
There are two more nouns to introduce:
Expression: It is a combination of numbers, operators, variables, etc. that can be obtained by meaningful arrangement of values.
Return value: It is the final result of the expression.
3 Increment and decrement operators.
If you need to continuously add or subtract a number variable, you can use increment (++) and decrement (–).
In JavaScript, increment ( ++ ) and decrement ( - - ) can be placed before or after variables. When placed in front of a variable, we can call it a pre-increment (decrement) operator, and when it is placed after a variable, we can call it a post-increment (decrement) operator.
Pre-increment operator (similar to decrement):
++num pre-increment, that is, self-increment by 1, similar to num = num + 1, but ++num is easier to write.
The formula of use: first self-increment, and then return the value.
var num = 10;
alert(++num + 10); // 21
这里先让num+1，然后在和10相加，所以结果21
Post-increment operator (similar to decrement):
num++ post-increment, that is, self-increment by 1, similar to num = num + 1, but num++ is easier to write.
The usage formula: first return to the original value, and then add it.
var num = 10;
alert(10 + num++); // 20
这里是先让10和num相加，然后在让num+1,虽然弹出20,但是num=11.
4 Comparison operator.
A comparison operator (relational operator) is an operator used when comparing two data. After the comparison operation, a Boolean value (true/false) will be returned as the result of the comparison operation.
It is important to note that the = sign compares:
console.log(18 == '18'); true
console.log(18 === '18'); false
5 Logical operators.
Logical operators are operators used to perform Boolean operations, and their return values are also Boolean values. It is often used to judge multiple conditions in later development.
Logical AND &&:
return true only if both sides are true, otherwise return false, and both sides must be satisfied at the same time.
Logical or ||:
If both sides are false, return false, otherwise return true, and only one side is satisfied.
Logical NOT! :
It is negation, which is used to take the opposite value of a Boolean value.
var isOk = !true;
console.log(isOk); // false
Short-circuit operation (logic interruption):
But when both sides are judged by specific values, when the expression value on the left side of the logic element parent can determine the result, the value of the expression on the right side will not continue to be calculated; when it is a logical
AND operation:
Syntax: expression1 && expression2
returns expression2 if the first expression evaluates to true.
console.log( 123 && 456 ); // 456
console.log( 0 && 456 ); // 0
console.log( 123 && 456&& 789 ); // 789
When it is a logical OR operation:
Syntax: expression1 || expression2
- Returns expression1 if the first expression evaluates to true
- Returns expression 2 if the first expression evaluates to false
console.log( 123 || 456 ); // 123
console.log( 0 || 456 ); // 456
console.log( 123 || 456 || 789 ); // 123
6 Assignment operator.
An operator used to assign data to a variable.
This is easy to understand, that is, assignment and addition operation at the same time.
var age = 10;
age += 5; // 相当于 age = age + 5;
age -= 5; // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;
7 Operator priority.
Just like addition, subtraction, multiplication and division, there is priority, and different operators also have priority.
Add another point:
- Logical non-priority in unary operators is high
- Logical AND has higher precedence than logical OR
process control
1 The concept of flow control.
During the execution of a program, the execution sequence of each code has a direct impact on the result of the program. Many times we have to control the execution order of the code to achieve the functions we want to complete.
In fact, the simple understanding is that we have to give conditions to judge whether the symbol meets the conditions we gave, and let the program follow our conditions.
There are three main structures in process control: sequential structure, branch structure, and loop structure
2 Sequence flow control.
3 Branch flow control.
js provides us with two kinds of branch structure statements: if statement and switch statement.
if statement structure:
if statement:
// 条件成立执行代码，否则什么也不做
if (条件表达式) {
// 条件成立执行的代码语句
}
When the conditional expression is met, the program inside the brackets will be executed.
if else statement (double branch statement):
// 条件成立 执行 if 里面代码，否则执行else 里面的代码
if (条件表达式) {
// [如果] 条件成立执行的代码
} else {
// [否则] 执行的代码
}
This is to execute the program in the first bracket if the condition is met, and execute the program in the bracket after else if it is not satisfied.
if else if statement (multi-branch statement):
// 适合于检查多重条件。
if (条件表达式1) {
语句1；
} else if (条件表达式2) {
语句2；
} else if (条件表达式3) {
语句3；
....
} else {
// 上述条件都不成立执行此处代码
}
This is used when we have many conditions corresponding to different results. Each conditional expression will be judged in turn, and whoever is satisfied will execute the program in the brackets, and if it is not satisfied, execute the program in else.
Switch statement structure:
switch( 表达式 ){
case value1:
// 表达式 等于 value1 时要执行的代码
break;
case value2:
// 表达式 等于 value2 时要执行的代码
break;
default:
// 表达式 不等于任何一个 value 时要执行的代码
}
-
The parentheses behind the keyword switch can be expressions or values, usually a variable
-
The keyword case , followed by an expression or value of an option, followed by a colon
-
The value of the switch expression will be compared with the value of the case in the structure
-
If there is a matching congruence (===), the code block associated with the case will be executed, and will stop when a break is encountered, and the execution of the entire switch statement code will end
-
If the values of all cases do not match the value of the expression, execute the code in default
Note: When executing the statement in the case, if there is no break, the statement in the next case will continue to be executed.
Let's take a brief look at the difference between the switch statement and the if else if statement:
- In general, the two statements can replace each other
- The switch...case statement usually deals with the case where the case is a relatively certain value, while the if...else... statement is more flexible and is often used for range judgment (greater than, equal to a certain range)
- The switch statement performs conditional judgment and directly executes the conditional statement of the program, which is more efficient. And the if...else statement has several conditions, how many times have to be judged.
- When there are fewer branches, the execution efficiency of the if...else statement is higher than that of the switch statement.
- When there are many branches, the execution efficiency of the switch statement is relatively high, and the structure is clearer.
4 Ternary expression.
Grammar:
表达式1 ? 表达式2 : 表达式3;
This expression is a shorthand version of if else, first judge whether expression 1 is satisfied, if it is satisfied, execute expression 2, otherwise execute expression 3.