js study notes--ES6

Preface: ES6 has added several new syntaxes, such as let keywords, const declaration constants, destructuring assignments, arrow functions, remaining parameters, etc.; and ES6's built-in object extensions, including Array extension methods, String extension methods, and Set data Structure, etc. Today, I only record the classic interview questions of Let keywords and arrow functions. If you want to know more, please go to Mayun Jin Xiaozhuang to view the detailed notes.

1. Let keyword classic interview questions

Let’s talk about the let keyword first. The let keyword is a new addition to ES6 used to declare variables. It has the following characteristics:

• Variables declared with the let keyword have block-level scope. Variables declared with the let keyword in a brace have block-level scope. The var keyword does not have this feature, which can effectively prevent loop variables from becoming global variables. .
• Variables declared with the let keyword have no variable promotion, which means that they must be declared before being used.
• Variables declared with the let keyword have temporary dead zone characteristics, so external global variables cannot affect the variables declared by let in the block-level area.

Look at the following code

• var declaration variable

		var arr = [];
        for (var i = 0; i < 2; i++) {
    
    
            arr[i] = function () {
    
    
                console.log(i);
            }
        }
        arr[0](); //2
        arr[1](); //2

It can be seen from the above code that the output result of two calls to the function is the same as 2. The execution structure diagram is as follows:

The key point of this code is that the variable i is a global variable, so the output when the function is executed is all under the global scope value.

• let declare variables

		let arr = [];
        for (let i = 0; i < 2; i++) {
    
    
            arr[i] = function () {
    
    
                console.log(i);
            }
        }
        arr[0](); //0
        arr[1](); //1

For variables declared with the let keyword, the output result is 0 1. The execution structure diagram is as follows:

The key point this time is that each loop will generate a block-level scope, and the variables in each block-level scope are different , When the function is executed, the output is the value of i under the scope of its previous level (the block-level scope generated by the loop).

2. Arrow function interview questions

• The arrow function is not bound to the this keyword. If this is used in the arrow function, the this keyword will point to the this in the arrow function definition position.
• The advantage of the arrow function is to solve some of the problems caused by this execution environment. For example: solve the problem of anonymous function this pointing (the execution environment of anonymous function is global), including problems caused by using this in setTimeout and setInterval.

Look at the following code

		var obj = {
    
    
            age: 20,
            say: () => {
    
    
                alert(this.age)
            }
        }
        obj.say(); //弹出undefined

The result of this.age above is undefined, the arrow function this points to the declared scope, and the object has no scope, so although the arrow function is defined in the object, this points to the global scope.

• Define age in the global scope, and the output result will be the assignment result of age in the global scope.

        var age = 18;
        var obj = {
    
    
            age: 20,
            say: () => {
    
    
                alert(this.age)
            }
        }
        obj.say(); //弹出18

Important: The arrow function this points to the place where it is defined.