This article is only for recording and sharing my own understanding

One advantage of using JS as a separate file in the browser is that the browser will download it and save it to the browser’s cache. Later, other pages that want the same script will fetch it from the cache instead of downloading it. So the file is actually only downloaded once. This saves traffic and makes pages faster.

The code structure

The first thing about code structure is learning to build blocks of code. Why is that? Improve readability

Statements: Typically, each statement has a single line to improve readability of the code

Semicolons: A problem that gets little attention because semicolons can be omitted in most cases. But “mostly” doesn’t mean “always”!

/ / alert("There will be an error") [1, 2]. ForEach (alert)Copy the code

If we run the code, only the contents of the first alert statement are displayed, and then we receive an error! Why is that? Because in JS there will not be square brackets […] Add an implicit semicolon before.

The code in the first example is changed to a simple statement that looks like this from the engine:

alert("There will be an error")[1, 2].forEach(alert)
Copy the code

Alert (“There will be an error”); Add a semicolon to the end of the statement and it will work.

In addition to the usual practice of adding semicolons at the end of a statement, you can also use quick formatting to automatically add semicolons at the end of a statement. To remove the autoadd semicolon in the case of the vscode compiler, install the prettier plug-in and add it in settings.json

"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "semi": false,
        "singleQuote": true
    } 
 }
Copy the code

Comments: Taking advantage of comments can save a lot of code communication and understanding, but also reduce unnecessary comments, chestnut // name.

/** / jsDoc is more used for constructors /** * Explain what this function does * @constructor * @param {parameter type} title - parameter */Copy the code

Comments cannot be nested with comments, otherwise an error will be reported

Modern mode, “Use strict”

What is modern mode (strict mode) JS is constantly improving, some new features have some old features abandoned, but in order to compatible with the old features of the code will retain the use of the old features. “Use strict” This directive looks like a string “use strict” or ‘use strict’. When it is at the top of the script file, the entire script file is in strict mode. The same code may run differently in “strict mode”; Some statements that work in “normal mode” will not work in “strict mode”.

Why use js syntax to avoid some of the irrationality, imrigor, reduce some of the weird behavior

  • Eliminate some unsafe code operation, to ensure the safety of code operation;
  • Improve the efficiency of the compiler, increase the running speed;
  • Set the stage for future versions of Javascript.

Tips: The “use strict” directive is only allowed at the beginning of a script or function. Otherwise strict mode may not be enabled.

variable

Variables are “named stores” of data. We can use variables to hold items, visitors, and other information. To use variables, use let var const declarations

Note: 1. Case. 2. Non-english letters are allowed, but not recommended. 3. You cannot use reserved words to declare variables. 4. Assignment under use strict is not used. In strict mode, direct assignment without declaration will report an error, but it can still work normally in normal mode.

// Note that there is no "use strict" num = 5; // If the variable "num" does not exist, alert(num) is created; // 5 // this is "use strict" "use strict"; num = 5; // Error: num not definedCopy the code

The data type

There are 8 basic data types in JS. Number BigInt String Object Special type) Boolean (Boolean) Undefined (independent type) Null (independent type) Array (Function) Symbol (new type) Typeof (operator)

Basic data types

  • numberUsed for any type of number: integer or floating point, inPlus or minus (253-1)Integers in the range.
  • bigintUsed for integers of arbitrary length.
  • stringFor strings: A string can contain zero or more characters, so there is no separate single-character type.
  • booleanUsed fortrue 和 false.
  • nullFor unknown values — only onenullValue independent type.
  • undefinedFor undefined values — only oneundefinedValue independent type.
  • symbolUsed for a unique identifier.
  • objectFor more complex data structures

Other data types -Array is used for Array [] data structures

  • FunctionUsed for function

Type conversion

String conversion

let value = true; alert(typeof value); // boolean value = String(value); // Now, the value is a string of "true" alert(typeof value); // String string conversion is the most obvious. 'false' becomes' false ', 'null' becomes' null ', etc.Copy the code

Number conversion In arithmetic functions and expressions, the number type conversion is performed automatically. But + equals concatenation, chestnut ‘1’+’1′ will be equal to 11, the manual conversion to the Number will add the Number() function to convert. If the string is not a valid number, the result of the conversion is NaN

  • undefinedWill becomeNaN
  • nullWill become0
  • True and falseWill become0 and 1
  • stringBecomes the number contained in a purely numeric string with the leading and trailing Spaces removed. If the remaining string is empty, the result is converted to0. Otherwise, the number is “read” from the rest of the string. Returns if a cast error occursNaN.

Base operator

  1. Operator:The object to which the operator applies. Like multiplication5 * 2, has two operators: the left operator5And the right-hand operand2. More called “parameters” than “operands”.
  2. Unary operator: An operator is unary if it corresponds to only one operator.
  3. Binary operator: An operator is binary if it has two operators.
  4. Assignment operator: =Is also an operator
  5. The chain operator is not very readable, so it is not often used
  6. Bitwise operators: Bitwise operators treat operators as 32-bit integers and operate on their binary representation. They are rarely used in Web development
  7. Comma operator: One of the rarest and least commonly used operators. Sometimes it’s used to write shorter code. It’s not very readable, so it’s not often used
Let x = 1; let x = 1; x = -x; alert( x ); Let x = 1, y = 3; let x = 1, y = 3; alert( y - x ); // 2, the subtraction operator is a shorthand for multiple associative binary operators and assignment operators. a = b = c = 2 + 2; alert( a ); // 4 alert( b ); // 4 alert( c ); // 4 For readability, it is best to break this code into several lines c = 2 + 2; b = c; a = c; The abbreviation operator let n = 2; n = n + 5; n = n * 2; Let n = 2; n += 5; // Now n = 7 (same as n = n + 5) // now n = 14 (same as n = n * 2) // let counter = 2; counter++; // Same as counter = counter + 1, but more concise alert(counter); // let counter = 2; counter--; // Same as counter = counter - 1, but more concise alert(counter); // 1 comma operator let a = (1 + 2, 3 + 4); alert( a ); // 7 (3 + 4)Copy the code

Binary operators support the following mathematical operations:

  • add+
  • subtraction-
  • The multiplication*
  • division/
  • Take more than%: The mod operator is%Even though it looks a lot like a percent, there’s no correlation. Divide the value of one expression by the value of another expression to return the remainder.The formula: result = numberA % numberBThe return value: result, any variableparameter: numberA, any numeric expression. ; NumberB, any numeric expression.instructionsThe: mod (or remainder) operator divides number1 by number2 (rounding a floating point number to an integer) and returns only the remainder as result.
  • exponentiationarunachal: Exponentiation operationa ** b 是 aMultiplied by itselfbTimes.

Bit operators:

  • Bitwise and (& )
  • The bitwise or (| )
  • Bitwise xOR (^ )
  • The bitwise not (~ )
  • Shift to the left (<< )
  • Moves to the right (>> )
  • Unsigned right shift (>>> )

Tips: Unary operators take precedence over binary operators and increment/decrement can only be applied to variables. Operators have precedence.

The comparison of the value

  • <Less than
  • >Is greater than
  • > =Greater than or equal to
  • < =Less than or equal to
  • = =Is equal to the
  • = = =Are congruent
  • ! =Is not equal to
  • ! = =Not congruent

The difference between equal and congruence: equal does not carry out data type judgment, and all will carry out judgment. Chestnut:

They are not equal because they belong to different types. alert( null === undefined ); Alert (null == undefined); alert(null == undefined); // trueCopy the code

Tips: Undefined should not be compared with other values