JavaScript usage misunderstandings
In this chapter we will discuss misunderstandings in the use of JavaScript.
Assignment operator application error
In JavaScript programs, if you use the equal sign (=) of the assignment operator in an if conditional statement, an incorrect result will be produced, correct The method is to use two equal signs of the comparison operator (==).
if The conditional statement returns false (what we expected) because x is not equal to 10:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x == 10);
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
if Conditional statement returnstrue (Not what we expected) Because the conditional statement is executed, x is assigned a value of 10, and 10 is true:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 10);
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
if The conditional statement returns false (not what we expected) Because the conditional statement is executed, x is assigned a value of 0, and 0 is false:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 0);
</script>
</body>
</html>Run instance»
Click" Run Example" button to view the online example
 | The assignment statement returns the value of the variable. |
|---|
Common errors in comparison operators
In regular comparisons, the data type is ignored, and the following if conditional statement returns true:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);
</script>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
In strict comparison operations, === is identity Calculator, while checking the value and type of the expression, the following if conditional statement returns false:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x === y);
</script>
</body>
</html>Run Example»
Click the "Run Instance" button to view the online instance
This kind of error often occurs in the switch statement. The switch statement uses the identity operator (===) for comparison:
The following instance will execute the alert pop-up window:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 10;
switch(x) {
case 10: alert("Hello");
}
</script>
</body>
</html>Run instance»
Click" Run instance" button to view the online instance
The following instances will not execute the alert pop-up window due to inconsistent types:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 10;
switch(x) {
case "10": alert("Hello");
}
</script>
</body>
</html>Run Example»
Click the "Run Example" button to view the online instance
Addition and Connection Notes
Addition is the addition of two numbers .
Connection is the connection of two strings.
JavaScript uses the + operator for both addition and concatenation.
Next we can see the difference between adding two numbers and concatenating numbers and strings through examples:
Examples
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 10 + "5";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
The results of adding variables are also inconsistent:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 10;
var y = "5";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
Note on the use of floating point data Note
All data in JavaScript is stored in 64-bit floating point data (float).
All programming languages, including JavaScript, have difficulty determining the accuracy of floating-point data:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
To solve the above problem, I can use integer multiplication and division:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = (x * 10 + y *10) / 10;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
JavaScript String Branch
JavaScript Run We are in Use line breaks in strings:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello World!";
</script>
</body>
</html>Run Example»
Click the "Run Example" button to view online Example
However, if you directly use carriage return and line feed in a string, an error will be reported:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>about:newtab
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello
World!";
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
We can select the development tool or press F12 to view the error message:
String line breaks require the use of backslash (\), as shown below:
Incorrect use of semicolon
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 5;
if (x == 19);{
document.getElementById("demo").innerHTML = "Hello";
}
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
In the following example, due to the use of semicolons Error, the code block in the if statement will not be executed:
Notes on using the Return statement
JavaScript automatically ends at the last line of code by default.
The following two examples return the same result (one with a semicolon and one without):
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
var power = 10
return a * power
}
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
var power = 10;
return a * power;
}
</script>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
JavaScript can also use multiple lines to end a statement.
The following instances return the same results:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
var
power = 10;
return a * power;
}
</script>
</body>
</html>Run instance»
Click" Run Instance" button to view the online instance
However, the following instance results will return undefined:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
var
power = 10;
return
a * power;
}
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Why is there such a result? Because in JavaScript, the code of Example 4 is consistent with the following code:
function myFunction(a) {
var
power = 10;
return; // 分号结束，返回 undefined
a * power;
}Parsing
If it is an incomplete statement, as follows:
var
JavaScript will Trying to read the statement on the second line:
power = 10;
But since the statement is complete like this:
return
JavaScript will automatically close the statement:
return;
In JavaScript, split The number is optional.
Because return is a complete statement, JavaScript will close the return statement.
| Note: There is no need to break the return statement. |
|---|
Use names to index in arrays
Many programming languages allow the use of names as array indexes.
An array that uses names as indexes is called an associative array (or hash).
JavaScript does not support using names to index arrays, only numeric indexes are allowed.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
In JavaScript, objects use names as indexes.
If you use names as indexes, JavaScript will redefine the array as a standard object when accessing it.
After performing this operation, the methods and properties of the array can no longer be used, otherwise an error will occur:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p>
如果你使用名字作为索引，当访问数组时，JavaScript 会把数组重新定义为标准对象，数组的方法及属性将不能再使用，否则会产生错误:。
</p>
<p id="demo"></p>
<script>
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
Define the array elements, and you cannot add a comma at the end
Wrong definition method ：
points = [40, 100, 1, 5, 25, 10,];
Correct way of definition:
points = [40, 100, 1, 5, 25, 10];
Define the object, no comma can be added at the end
Incorrect way of definition:
websites = {site:"php中文网", url:"www.php.cn", like:460,}Correct Definition method:
websites = {site:"php中文网", url:"www.php.cn", like:460}Undefined is not Null
In JavaScript, null is used for objects, undefined is used for variables, properties and method.
The object may be null only if it is defined, otherwise it is undefined.
If we want to test whether the object exists, an error will be thrown if the object is not defined yet.
Wrong way to use:
if (myObj !== null && typeof myObj !== "undefined")
The correct way is that we need to use typeof first to detect whether the object has been defined:
if (typeof myObj !== "undefined" && myObj !== null)
Program block scope
JavaScript will not create a new scope in each code block. Generally, the scope of each code block is global.
The variable i in the following code returns 10 instead of undefined:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
for (var i = 0; i < 10; i++) {
// some code
}
document.getElementById("demo").innerHTML = i;
</script>
</body>
</html>Running instance»
Click the "Run Instance" button to view the online instance
