JavaScript Essential Reading Notes (1,2)_javascript skills

Chapter 1 The Essence
Some of JavaScript’s features are more trouble than they’re worth. Among them, some features are because the specification is very imperfect, which may lead to portability problems; some features lead to the generation of code that is difficult to understand and modify; some features make my coding style overly complex and error-prone; and some features are just Design errors. Sometimes language designers make mistakes.
Most programming languages ​​have good parts and weak parts. I've found that I can become a better programmer if I only use the good parts and avoid the fluff. After all, how can you build something good out of crappy parts?
It is almost impossible for a standards committee to remove defective parts of a language because doing so would damage all the bad programs that depend on those useless parts. There's usually nothing they can do except pile more features on top of a pile of existing flaws. And new and old features don't always coexist harmoniously, which can lead to more useless parts.
However, you have the power to define your own subsets. You can write better programs based on the best parts. The proportion of useless parts in JavaScript exceeds expectations. It went from non-existence to global adoption in an astonishingly short period of time. It has never been tried and polished in a laboratory. When it was still very crude, it was integrated directly into Netscape's Navigator 2 browser. With the demise of Java applets, JavaScript became the default "web language".As a programming language, JavaScript's popularity is almost entirely independent of its quality.
Fortunately, JavaScript has some very essential parts. The most essential part of JavaScript is deeply hidden, so much so that the mainstream view of it for many years has been that JavaScript is an ugly, useless toy. The purpose of this book is to reveal the essence of JavaScript and let everyone know that it is an outstanding dynamic programming language.
Perhaps the biggest advantage of only learning the essential parts is that you don’t have to think about the useless parts. Unlearning bad patterns is very difficult. This is a very painful job that most of us would be reluctant to face. Sometimes, subsets of a language are developed to allow students to learn better. But here, I've formulated a subset of JavaScript that works better for master professionals.
1.1 Why use JavaScript
JavaScript is an important language because it is the language of web browsers. Its integration with browsers has made it one of the most popular programming languages ​​in the world. At the same time, it is also one of the most underestimated programming languages ​​in the world. The browser API and Document Object Model (DOM) are so bad that JavaScript gets an unfair rap.
JavaScript is the most despised language because it is not a so-called mainstream language. If you're good at some mainstream language but are programming in an environment that only supports JavaScript, it can be quite annoying to be forced to use JavaScript. Most people don't feel the need to learn JavaScript first, but they are surprised to find that JavaScript is very different from the mainstream languages ​​​​they would rather use, and these differences are crucial.
The amazing thing about JavaScript is that you can get things done with it without knowing much about the language, or even programming. It is a language with extremely strong expressive power. It even works better when you know what to do. Programming is difficult. You should never start your work without knowing anything about it.
1.2 Analyzing JavaScript
JavaScript is built on some very good ideas and a few very bad ideas.
Those really good ideas include functions, weak typing, dynamic objects, and an expressive literal representation. Those bad ideas include a programming model based on global variables.
JavaScript functions are (mainly) top-level objects based on lexical scoping. JavaScript was the first lambda language to become mainstream. In fact, JavaScript has more in common with Lisp and Scheme than with Java. It's Lisp dressed in C. This makes JavaScript a very powerful language.
Strong typing is a popular requirement in most programming languages ​​today. The idea is that strong typing allows the compiler to detect errors at compile time. The earlier we can detect and fix bugs, the less expensive it will be. JavaScript is a weakly typed language, so the JavaScript compiler cannot detect type errors. On the other hand, weak typing is actually free. We don't have to create complex subsystems, I never have to do casts, and I don't have to juggle the type system to get the behavior I want.
JavaScript has a very powerful object literal representation. Objects can be created simply by listing their component parts. This representation gave rise to the popular data exchange format - JSON.
Prototypal inheritance is a controversial feature in JavaScript. JavaScript has a class-free object system in which objects inherit properties directly from other objects. This is really powerful, but prototypal inheritance is a foreign concept to programmers who are trained to use classes to create objects. If you try to apply class-based design patterns directly to JavaScript, you will suffer frustration. However, if you learn to use JavaScript's prototypal nature, your efforts will pay off.
JavaScript has been criticized for its choice of key ideas. In most cases though, these options are appropriate. But there's one option that's pretty bad: JavaScript relies on global variables for concatenation. All top-level variables of all compilation units are grouped into a common namespace called the global object. This is a bad thing because global variables are the devil and they are fundamental in JavaScript.
In a few cases, we cannot ignore the useless parts. There are also some unavoidable bugs, and we'll point them out when it comes to these parts. If you want to learn about the crappy parts and how to use them poorly, check out any other JavaScript book.
JavaScript is a language with many differences. It contains a lot of bugs and sharp edges, so you may be wondering: "Why do I use JavaScript?" There are two answers. The first is that you have no choice. The Web has become an important application development platform, and JavaScript is the only language that all browsers can recognize. Unfortunately, Java fails in browser environments. The vigorous development of JavaScript just shows that JavaScript does have its advantages.
Another answer is that despite its flaws, JavaScript is really good. It is both lightweight and expressive.And once you get the hang of it, functional programming is a lot of fun.
But in order to use this language better, you must know its limitations. I will reveal them mercilessly. Don't let this discourage you. The best parts of the language more than make up for its weak points.
1.3 A simple proving ground
If you have a web browser and any text editor, then you have everything you need to run JavaScript programs. First, please create an HTML file, which can be named program.html:

Copy the code The code is as follows:

 <br><script src="program.js"></script> <br>

Next, create a script file in the same folder, which can be named program.js:
document .writeln('Hello, world!');
Next, use your browser to open your HTML file to view the results. Throughout this book, a method method will be used to define new methods. The following is its definition:

Copy code The code is as follows:

Function.prototype.method= function(name,func){
this.prototype[name]=func;
return this;
}

I will explain it in Chapter 4.
Chapter 2 Syntax
This chapter introduces the syntax of the essence of JavaScript and briefly outlines its language structure.
2.1 White space
White space may appear in the form of formatting characters or comments. Whitespace usually has no meaning, but it is occasionally needed to separate sequences of characters that would otherwise be combined into a single symbol. For example, for the following code:
var that = this;
The space between var and that cannot be removed, but other spaces can be removed.
JavaScript provides two forms of comments, one is a block comment surrounded by /* */, and the other is a line comment starting with //. Comments should be used extensively to improve program readability. It is important to note that comments must accurately describe the code. Useless comments are worse than no comments at all.
The block comment form surrounded by /* */ comes from a language called PL/I (short for Programming Language One). The "I" in it is actually the Roman numeral "one", which is an IBM A third-generation high-level programming language invented by the company in the 1850s). In JavaScript, */ may appear inside a regular expression literal, so block comments are unsafe for the commented block of code. For example:
/*
var rm_a = /a*/.match(s);
*/
results in a syntax error. So, I recommend avoiding /* */ comments and replacing it with // comments.
2.2 Identifiers
Identifiers begin with a letter, optionally followed by one or more alphanumeric or underscore characters. Identifiers cannot use the following reserved words:
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
Most of the reserved words in this list are not yet used in this language. This list does not include some words that should be reserved but are not, such as undefined, NaN, and Infinity. JavaScript does not allow reserved words to be used to name variables or parameters. To make matters worse, JavaScript does not allow the use of reserved words as object property names in object literals or after a period in a property access expression.
Identifiers are used in statements, variables, parameters, property names, operators and tags.
2.3 Numbers
JavaScript has only a single number type. It is represented internally as a 64-bit floating point number, the same as Java's double. In JavaScript, 1 and 1.0 are the same value.
If a numeric literal has an exponent part, then the value of the literal is calculated by multiplying the part before e by 10 raised to the power of the part after e. So 100 and 1e2 are the same number.
Negative numbers can be formed using the prefix operator -.
The value NaN is a numeric value that represents the result of an operation that cannot produce a normal result. NaN is not equal to any value, including itself. You can detect NaN using the function isNaN(number).
The value Infinity represents all values ​​greater than 1.79769313486231570e 308.
Number ownership method (see Chapter 8). JavaScript has an object Math, which contains a set of methods that operate on numbers. For example, you can use the Math.floor(number) method to convert a number to an integer.
2.4 String
A string literal can be enclosed in single or double quotes, and it may contain 0 or more characters. is an escape character. When JavaScript was created, Unicode was a 16-bit character set, so all characters in JavaScript are 16-bit.
JavaScript has no character type. To represent a character, simply create a string containing only one character.
Escape characters allow characters that are not normally allowed to be inserted into a string, such as backslashes, quotes, and control characters. The u convention allows specifying numerical representations of character code points.
“A”===”u0041”
Strings have an length attribute. For example, "seven".length is 5.
Strings are immutable. Once a string is created, it can never be changed. But it's easy to concatenate other strings with operators to get a new string. Two strings containing exactly the same characters in the same order are considered the same string. So:
‘c’ ‘a’ ‘t’ === ‘cat’
is true.
Strings have some methods (see Chapter 8).
2.5 Statements
A compilation unit contains a set of executable statements. In web browsers, each <script> tag provides a compilation unit that is compiled and executed immediately. Because of the lack of a linker, JavaScript throws them together into a common global namespace. Appendix A has more information about global variables. <BR>When the var statement is used inside a function, it defines the private variables of this function. <BR>switch, while, for and do statements allow an optional preceding label (label), which is used with the break statement.<BR>Statements are often executed from top to bottom. JavaScript can change this execution sequence through conditional statements (if and switch), loop statements (while, for and do), forced jump statements (break, return and throw) and function calls. <BR>A code block is a group of statements enclosed in a pair of curly braces. Unlike many other languages, code blocks in JavaScript do not create a new scope, so variables should be defined at the top of the function, not inside the code block. <BR>The if statement changes the control flow of the program based on the value of the expression. If the expression evaluates to true, then the then block is executed; otherwise, the optional else branch is executed. <BR>The values ​​listed below are treated as false: <BR>fase <BR>null <BR>undefined <BR>Number 0 <BR>Number NaN <BR>All other values ​​are treated as true, including true, The string "false", and all objects. <BR>The switch statement executes a multi-way branch. It matches the value of its expression against all specified case conditions. Its expression may produce a number or a string. When an exact match is found, the statements in the matching case clause are executed. If no match is found, the optional default statement is executed. <BR>A case clause contains one or more case expressions. case expressions do not necessarily have to be constants. In order to prevent the execution of the next case from continuing, the case statement should be followed by a forced jump statement. You can use the break statement to exit a switch statement. <BR>The while statement executes a simple loop. If the expression evaluates to false, the loop will terminate. And when the expression evaluates to true, the code block will be executed. <BR>The for statement is a loop statement with a more complex structure. It comes in two forms. <BR>The common form is controlled by three optional clauses: initialization, condition, and increment. First, the ;initialization clause is executed, which usually initializes the loop variables. Then calculate the value of the conditional clause. Typically it checks the loop variable based on a completion condition. If the conditional clause is omitted, the returned condition is assumed to be true. If the conditional clause evaluates to false, the loop will terminate. Otherwise, the code block is executed, then the increment clause is executed, and then the loop repeats the conditional clause. <BR>The other form (called the for in statement) enumerates all attribute names (or key names) of an object. In each loop, another property name string of the object is assigned to the variable between for and in. <BR>Usually you have to check object.hasOwnProperty(variable) to determine whether the property name is a member of the object, or whether it is found from its prototype chain. <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="29852" class="copybut" id="copybut29852" onclick="doCopy('code29852')"><U>Copy code The code is as follows:<div class="codebody" id="code29852"> <BR>for(myvar in obj){ <BR>if( obj.hasOwnProperty(myvar)){ <BR>… <BR>} <BR>} <BR> <BR>do语句就像while语句，唯一的区别是它在代码块执行之后而不是之前检测表达式的值。这就意味着代码块将总是要执行至少一次。 <BR>try语句执行一个代码块，并捕获该代码块抛出的任何异常。catch从句定义了一个新的变量，它将接收该异常对象。 <BR>throw语句抛出一个异常。如果throw语句在一个try代码块中，那么控制权会跳到catch从句中。如果throw语句在函数中，则该函数调用被放弃，且控制权会跳到调用该函数的try语句的catch从句中。 <BR>throw语句中的表达式通常是一个对象字面量，它包含一个name属性和一个message属性。异常捕获器可以使用这些信息去决定该做什么。 <BR>return语句会使一人函数提前返回。它也可以指定要被返回的值。如果没有指定返回表达式，那么其返回值是undefined。 <BR>JavaScript不允许在return关键字和表达式之间换行。 <BR>break语句会使程序退出一个循环语句或switch语句。它可以指定一个可选的标签，那将会使程序退出带该标签的语句。 <BR>JavaScript不允许在break关键字和标签之间换行。 <BR>一个expression语句可以给一个或多个变量或成员赋值，或者调用一个方法，或者从对象中删除一个属性。运算符=被用于赋值。不要把它和恒等运算符===混淆。运算符+=可以用于加法运算或连接字符串。 <BR><STRONG>2.6 表达式 <BR>三元运算符？有三个运算数。如果第一个运算数值为真，它产生第二个运算数的值。但是，如果第一个运算数为假，它会产生第三个运算数的值。 <BR>表2-1：运算符优先级 <BR> <TABLE style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; BORDER-COLLAPSE: collapse" cellSpacing=0 cellPadding=0 border=1> <TBODY> <TR> <TD style="BORDER-RIGHT: black 1pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: black 1pt solid; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">.[]() <TD style="PADDING-RIGHT: 5.4pt; BORDER-TOP: black 1pt solid; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent; BORDER-RIGHT-COLOR: #e9e5da" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">属性存取及函数调用 <TR> <TD style="BORDER-RIGHT: black 1pt solid; PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">delete new typeof +-! <TD style="PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent; BORDER-RIGHT-COLOR: #e9e5da" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">一元运算符 <TR> <TD style="BORDER-RIGHT: black 1pt solid; PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">*/% <TD style="PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent; BORDER-RIGHT-COLOR: #e9e5da" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">乘法、除法、取模 <TR> <TD style="BORDER-RIGHT: black 1pt solid; PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">+- <TD style="PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent; BORDER-RIGHT-COLOR: #e9e5da" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">加法/连接、减法 <TR> <TD style="BORDER-RIGHT: black 1pt solid; PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">>= <= > < <TD style="PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent; BORDER-RIGHT-COLOR: #e9e5da" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">Inequality operator <TR> <TD style="BORDER-RIGHT: black 1pt solid; PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">=== !== <TD style="PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent; BORDER-RIGHT-COLOR: #e9e5da" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">Equality operator <TR> <TD style="BORDER-RIGHT: black 1pt solid; PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">&& <TD style="PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent; BORDER-RIGHT-COLOR: #e9e5da" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">Logical AND <TR> <TD style="BORDER-RIGHT: black 1pt solid; PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">|| <TD style="PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent; BORDER-RIGHT-COLOR: #e9e5da" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">Logical OR <TR> <TD style="BORDER-RIGHT: black 1pt solid; PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">?: <TD style="PADDING-RIGHT: 5.4pt; PADDING-LEFT: 5.4pt; BORDER-LEFT-COLOR: #e9e5da; PADDING-BOTTOM: 0cm; WIDTH: 213.05pt; BORDER-TOP-COLOR: #e9e5da; PADDING-TOP: 0cm; BORDER-BOTTOM: black 1pt solid; BACKGROUND-COLOR: transparent; BORDER-RIGHT-COLOR: #e9e5da" vAlign=top width=284> <DIV style="MARGIN: 6pt 0cm 0pt">TernaryThe values ​​produced by the typeo operator are 'number', 'string', 'boolean', 'undefined', 'function', 'object' . If the operand is an array or null, then the result is 'object', which is incorrect. There will be more about typeof in Chapter 6 and Appendix A. The <BR>/ operator may produce a non-integer result even if both operands are integers. <BR>A function call triggers the execution of a function. The function call operator is a pair of parentheses following the function name. Parentheses may contain parameters that will be passed to this function. There will be more about functions in Chapter 4. <BR>A property access expression is used to specify a property or element of an object or array. I'll describe it in detail in the next chapter. <BR>2.7 Literal <BR>Object literal is a convenient notation for specifying new objects. Property names can be identifiers or strings. These names are treated as literal names rather than variable names, so the object's property names are known at compile time. The value of an attribute is an expression. The next chapter will have more information about object literals. <BR>An array literal is a convenient notation for specifying a new array. Chapter 6 will have more on array literals. <BR>Chapter 7 will have more content about regular expressions. <BR>Function literals define function values. It can have an optional name and is used to call itself recursively. It can specify a list of parameters, which will be initialized as variables from the actual arguments passed when calling. The body of a function includes variable definitions and statements. There will be more about functions in Chapter 4.</script>