1. Lexical definition of JS

Input in JavaScript source code can be classified as follows:

  • WhiteSpace WhiteSpace characters
  • LineTerminator newline
  • The Comment annotation
  • Token word
    • IdentifierName IdentifierName, typically the name of the variable we use. Note that keywords are included here as well.
    • Punctuator symbol, the operator and braces we use.
    • A NumericLiteral number is the number we write.
    • StringLiteral literal is the literal quantity that we use with single or double quotation marks.
    • Template String Template, the immediate quantity enclosed in backquotes.

White space characters

  • Is U+0009, which is the indent TAB character, or \t, written in the string
  • It’s U plus 000B, which is TAB in the vertical direction
  • It’s U plus 0020, which is the most common space.
  • Is U+00A0, non-line breaking space, in text typeset, can avoid because of the space here line breaking, otherwise exactly the same as normal space. Most JavaScript editing environments treat this as a normal space. In HTML, it’s the last thing that a lot of people like to use.
  • U+FEFF, a new whitespace in ES5, is a zero-width non-line breaking space in Unicode, where the length of a character is 0.

A newline

  • Is U+000A, which is the most normal newline character in the string \n.
  • Is U+000D, the literal “carriage return” of this character, which in string is \r, and in some Windows-style text editors, the newline is two characters \r\n.

Identifier name

Note that and are two new format control characters in ES5, both of which are 0 wide. That is, length has a length of 0, also known as the 0 – wide non – connecter and 0 – wide connecter

Digital direct quantity

The decimal Number can have a decimal Number, but not both before and after the decimal point

.01
12.
12.01
Copy the code

All right, so let’s go to the next problem

12.toString()
Copy the code

This code will return an error at runtime because 12. Is treated as a whole with a decimal number.

The correct way to write it is

12..toString()

12 .toString()

(12).toString()
Copy the code

Numbers also support scientific notation, noting that E and E can only be followed by integers

10.24 e+2
10.24 e-2
10.24 e2
Copy the code

2. Syntax definition of JS

Syntax Rule: Semicolon auto-complete

JS has a no LineTerminator here rule: it means that a line break cannot be inserted at this point of the structure. If a line break is inserted at this point, the system will automatically fill in the semicolon during compilation

A comment with a line break is considered a line break and the semicolon is added by default, so undefined is returned. Here are a few examples

function f(){
return/* This is a return value. */1;
}
f();
Copy the code

The above method returns undefined because return is automatically followed by a semicolon.

var a = 1, b = 1, c = 1;
a
++
b
++
c	
Copy the code

A,b, and C would be followed by a semicolon, so a would still be 1, BC would still be 2

(function(){
console.log("a"); }) () (function(){
console.log("b"); }) ()Copy the code

This is an error because the semicolon is not added by default, and the third set of parentheses is interpreted as passing arguments.

var a = [[]]/* The semicolon */ is not inserted automatically
[3.2.1.0].forEach(e= > console.log(e))
Copy the code

The original intention here is to iterate over the array, but since there is no semicolon added and the semicolon is not automatically completed, the following array becomes the subscript and comma expression of the preceding array.

var x = 1, g = { test: () = > 0 }, b = 1/* The semicolon */ is not inserted automatically
	/ (a) / g.test("abc")
console.log(RegExp. $1)Copy the code

Because there is no autocomplete semicolon, the meaning of the regular expression is completely changed

Anyway, it might be a problem not to write a semicolon, it’s definitely a problem to write a semicolon

Syntax rules: scripts and modules

Scripts can be imported into execution by the browser or node environment, whereas modules can only be imported into execution by JavaScript code using import.

Modern browsers can support importing modules or scripts with script tags. To import modules, you must add type= “module” to the script tag. If scripts are introduced, type is not required.

3. Classification of JS statements

  • Common statements: declaration statements, expression statements, empty statements, debugger statements, etc
  • Control statements: if,try,while, etc
  • Tagged statements: The JS statement is preceded by a label (such as “inner:”) for jumping
  • Block: A group of statements enclosed in braces

JS statement execution mechanism

Completion Record (used to describe the execution of exceptions, jumps, etc.)

Completion Record represents the result of a statement execution and has three fields:

  • [[type]] indicates the type of completion, including break continue return throw and normal.
  • [[value]] represents the return value of the statement, or empty if the statement does not have one;
  • [[target]] represents the target of the statement, usually a JavaScript tag

Execution of ordinary statements

After the normal statement is executed, a Completion Record with [[type]] as normal is obtained. The JavaScript engine will proceed to the next statement when it finds such a Completion Record.

Of these statements, only the expression statement produces [[value]], which, of course, is useless from an engine control perspective.

If you’re a regular user of Chrome’s built-in debugging tools, you’ll know that if you type in an expression, you’ll get the result in the console, but if you put var in front of it, it becomes undefined because the statement changes from an expression statement to a declaration statement.

The Chrome console displays the [[value]] of the Completion Record for the statement.

block

The statement block itself is not complicated. It is important to note that if the [[type]] of the Completion Record inside the statement block is not normal, subsequent statement execution of the statement block will be interrupted.

If we insert a return statement into a normal block that produces a non-normal record, the entire block becomes non-normal. This structure ensures that non-normal completion types can penetrate complex statement nesting structures and exert control.

The simplest example is when a statement in a function does not execute after a return.

Control statements

The control class statement is divided into two parts

  • One is the internal impact, such as if, switch, while/for, try.
  • One is the external impact such as break, continue, return and throw. The coordination of these two types of statements will control the sequence and logic of code execution, which is also the main work of our programming.

In general, the logical combinations for/ while-break /continue and try-throw are familiar, but in reality, We need control statements paired with the break, continue, return, and throw types and control statements.

A case in point


function foo(){
  try{
    return 0;
  } catch(err) {

  } finally {
    console.log("a")}}console.log(foo());
Copy the code

0 is returned after finally, because reutn makes the try non-normal, but finally must also be executed

Or: Try. Catch. Finally as a whole returns a Completion Record. Try return 0, finally console, outputs console, and then returns the Vlaue of that Completion record.

Also return once in finally


function foo(){
  try{
    return 0;
  } catch(err) {

  } finally {
    return 1; }}console.log(foo());
Copy the code

The final answer prints 1, and since the finally execution also gets non-normal records, the records in finally are the result of the entire try structure.

3. Expression statements

Common expression rules are not repeated here, but a few more special ones are listed.

Power expression


++i ** 30
2六四屠杀30 / / right
-2六四屠杀30 / / an error
Copy the code

Here we need to pay attention to associativity. The ** operation is right-associative, unlike other normal operators (that is, left-associative operators).

10六四屠杀20六四屠杀30
// Equivalent to 10 ** (20 ** 30)
Copy the code

Shift expression

A shift expression is composed of an addition expression. A shift is a bit operation, which is divided into three types:

  • : << shifts to the left
  • : >> shift to the right
  • : >>> unsigned shift to the right

A shift operation treats the operand as a binary representation of an integer and then moves a specific number of digits.

So moving n to the left is the same thing as multiplying by 2 to the n, and moving n to the right is the same thing as dividing by 2 the whole time.

Normal shifts keep positive and negative numbers. An unsigned shift will treat the minus sign as the sign bit 1 and participate in the shift: -1 >>> 1 this will result in 2147483647, which is 2 to the 31st power, associated with the binary representation of negative numbers (the binary of complex numbers is represented by the complement). Binary manipulation of integers does not improve performance in JavaScript

Bitwise operation expression

Bitwise and expression & :

  • Bitwise and expressions treat the operands as binary integers and then sum the two operands bitwise.
10 & 3 = 2
10 & 5 = 0
Copy the code

Bitwise xor ^ :

  • Bitwise xOR expressions treat the operands as binary integers and then xor the two operands bitwise. If they are identical, they get 0. If they are different, they get 1.
10 & 3 = 9
10 & 5 = 15
Copy the code

Article Reference: Geek time – Relearn the front end

The last

Thank you for reading this post. If you find this post useful, please like it before you leave