preface

This film starts to consolidate the basic knowledge of JavaScript from scratch. Before learning, it gulps down all kinds of problems in the later projects and learning; Starting from this note, slow down and understand JavaScript well, so as to lay a solid foundation for promotion and salary increase in the future.

1, Annotation

There are two types of annotations in JavaScript: single line annotation and multi line annotation

// Single-Line Comments 

/* This is a longer one,
   multiline comment 
*/

/* However, you cannot, / * nest comments */ syntax error */

2, Statement

JavaScript can be declared in three ways

1. var declares a variable and initializes a value.
2. let declares a local variable of block scope, which can initialize a value.
3. const declares a read-only constant of the block scope.

3, Variable

In an application, variables are used as symbolic names for values. The name of the variable is also called identifier , it needs to abide by certain rules.

1. Declare variable

Variables can be declared in three ways:

• Use the keyword var. For example, var x = 42. This syntax can be used to declare local and global variables.
• Direct assignment. For example, x = 42. Using this form of assignment outside the function will produce a global variable. Errors can occur in strict mode. You should not declare variables in this way.
• Use the keyword let. For example, let y = 13. This syntax can be used to declare local variables of block scope.

2. Variable evaluation

If the variable declared with var or let statement has no initial value, its value is undefined.

Accessing an undeclared variable will cause a ReferenceError exception to be thrown:

var a;
console.log("The value of a is " + a); // The value of a is undefined

console.log("The value of b is " + b);// The value of b is undefined
var b; // Variable promotion exists here

let x;
console.log("The value of x is " + x); // The value of x is undefined

// Uncaught reference error: y not defined
console.log("The value of y is " + y);
// Uncaught ReferenceError: Cannot access 'y' before initialization at 'xxxxx'
let y;

undefined values in the numeric type environment are converted to NaN

var a;
console.log(a + 2)    // Calculated as NaN

When you evaluate a null variable, null will be treated as 0 in the numeric type environment and false in the boolean type environment.

var n = null;
console.log(n * 32); // 0 is displayed in the console

3. Variable scope

A variable declared outside a function is called a * * * global * * * variable because it can be accessed by any other code in the current document. A variable declared inside a function is called a * * * local * * * variable because it can only be accessed inside the current function.

JavaScript before ECMAScript 6 did not Statement block Scope; Instead, the variables declared in the statement block will become local variables of the function (or global scope) where the statement block is located. For example, the following code will output 5 on the console, because the scope of X is the function (or global scope) that declares x, not the if statement block.

if (true) {
  var x = 5;
}
console.log(x); // 5

If you use the let declaration in ECMAScript 6, the above behavior will change.

if (true) {
  let y = 5;
}
console.log(y); // ReferenceError: y not declared

4. Variable promotion

Another unusual thing about JavaScript variables is that you can use variables first and declare them later without throwing exceptions. This concept is called variable lifting; JavaScript variables feel like they have been "promoted" or moved to the front of a function or statement. However, the promoted variable will return an undefined value. Therefore, after using or referencing a variable for declaration and initialization, the promoted variable will still return the undefined value.

// Example 1
console.log(x === undefined); // true
var x = 3;


// Example 2
// will return a value of undefined
var myvar = "my value";
(function() {
  console.log(myvar); // undefined
  var myvar = "local value";
})();
//==========================Equivalent to=====================================
// Example 1
var x;
console.log(x === undefined); // true
x = 3;

// Example 2
var myvar = "my value";
(function() {
  var myvar;
  console.log(myvar); // undefined
  myvar = "local value";
})();

Due to variable promotion, all var statements in a function should be placed as close to the top of the function as possible. This habit will greatly improve the clarity of the code.

In ECMAScript 6, let (const) will also be promoted to the top of the code block, but will not be given an initial value. If this variable is referenced before the variable declaration, a reference error will be thrown. This variable will be in a "temporary dead zone" from the beginning of the code block until it is declared.

console.log(x); // ReferenceError
let x = 3;

5. Function promotion

For functions, only the function declaration will be promoted to the top, and the function expression will not be promoted.

/* Function declaration */
foo(); // "bar"
function foo() {
  console.log("bar");
}

/* Function expression */
baz(); // Wrong type: baz is not a function
var baz = function() {
  console.log("bar2");
};

6. Global variable

Global variables are properties of global objects. In web pages, the global object is window, so you can use the shape like window Variable syntax to set and access global variables.

7. Constant

You can create a read-only constant with the keyword const. The naming rules of constant identifiers are the same as those of variables: they must be followed by letters and underscores () Or the dollar sign ($) and can contain letters, numbers, or underscores.

const PI = 3.14;

A constant cannot be changed by reassigning its value, nor can it be redeclared when the code is running. It must be initialized to a value.

The scope rules of constants are the same as those of let block level scope variables. If const keyword is omitted, identifier is treated as a variable.

Constants cannot be named with the same name as variable or function names in the same scope. For example:

// This can cause errors
function f() {};
const f = 5;

// This can also cause errors
function f() {
  const g = 5;
  var g;

  //sentence
}

However, it is unprotected to assign an object property as a constant, so the following statement will not produce an error when executed.

const MY_OBJECT = {"key": "value"};
MY_OBJECT.key = "otherValue";

Similarly, the definition of an array as a constant is also unprotected, so the following statements will not produce errors when executed.

const MY_ARRAY = ['HTML','CSS'];
MY_ARRAY.push('JAVASCRIPT');
console.log(MY_ARRAY); //logs ['HTML','CSS','JAVASCRIPT'];

4, Data type

The latest ECMAScript standard defines eight data types:

• Seven basic data types:
  • Boolean. There are two values: true and false
  • NULL, a special keyword that indicates a NULL value. JavaScript is case sensitive, so NULL is completely different from NULL, NULL, or variants.
  • undefined, like null, is a special keyword. undefined represents the attribute when the variable is not assigned.
  • Number, integer or floating point number, for example: 42 or 3.14159.
  • The precision of integers (BigInt) can be safely larger than the integer and even bigint.
  • A String is a sequence of characters representing a text value, such as "Howdy".
  • Represents (Symbol) (a new type added in ECMAScript 6). An instance is a unique and unchangeable data type.
• And Object.

1. Conversion of data types

JavaScript is a dynamically typed language. This means that you don't have to specify the data type when declaring variables, and the data type will be automatically converted as needed during code execution.

5, Literal quantity

Literal is a constant defined by a syntax expression; Or, a constant defined by a word expression consisting of a certain word

1. Array literal

An array literal is a list of zero or more expressions enclosed in a pair of square brackets ([]), where each expression represents an element of the array. When you create an array using the array literal, the array will be initialized with the specified value as its element, and its length is set to the number of elements.

The following example generates an array of coffees with three elements, which is 3 in length.

var coffees = ["French Roast", "Colombian", "Kona"];

2. Boolean literal

Logical literal

Boolean types have two literal types: true and false.

Don't confuse true and false as Boolean objects with the original values true and false of Boolean types. A Boolean object is a wrapper around the original Boolean data type.

3. Integer

Integers can be expressed in decimal (base 10), hexadecimal (base 16), octal (base 8), and binary (base 2).

4. String literal

In ES2015, a template literal is provided, and the template string provides some syntax sugar to help you construct the string.

var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`