1. Let, var, const

There are several ways to answer this question:

1. Block-level scope: Let and const have block-level scope. Var has no concept of block-level scope. Block-level scopes solve two problems in ES5: that inner variables can override outer variables and that loops leak loop variables as global variables

2. Variable promotion: Var has variable promotion, let and const do not have variable promotion (can only be used after declaration), involving the concept of context

3. Add attributes to the global: Under a global window, var declares a global variable and adds it to the properties of the global object. Let and const do not.

Var can be repeated; let, const can’t

5. Temporary dead zones: Let and const variables are not available until they are declared, which of course applies to block-level scopes

ES6 explicitly states that if there are let and const commands in a block, the variables declared by the block to those commands form a closed scope from the start. Any time these variables are used before declaration, an error is reported.

6. Initialization: Let and var may not specify an initial value, but const must specify an initial value

7. Pointer pointing: Let variables can change pointer pointing, but const variables cannot change pointer pointing.

2. Can properties of const objects be modified?

What const guarantees is not that the value of a variable cannot be changed, but that the memory address to which the variable points cannot be changed. So for primitive types of data, the value is stored in the memory address that the variable points to, so it cannot be changed. Equivalent to a constant;

However, when our variable refers to an address of a reference type, our const can only guarantee that the address pointer to which it points cannot be changed, but we have no control over its memory contents.

3. What happens if you create a new arrow function?

Let’s start with the implementation steps of the new operator:

  1. Create a new object
  2. The constructor’s scope is then assigned to the new object (that is, to the object’s__proto__Property points to the constructor’s Prototype property.
  3. This in the constructor refers to the object and executes
  4. Return a new object

Looking back at the problem, the arrow function, introduced in ES6, has no prototype property of its own, no this to point to, and no argument. Therefore, it does not have the condition to new an instance object **, so an error will be reported if you simply new an arrow function. Error ** indicating that the arrow function is not a constructor

[Img-i2oldX2Z-1625298349325] (C:\Users\LuAo\AppData\ Typora\ Typora-user-images \ I) [img-i2oldX2Z-1625298349325] (C:\Users\LuAo\AppData\Roaming\ Typora-user-images \ I mage-20210613152755570.png)]

4. Difference between arrow function and ordinary function

1. Arrow functions are more concise than normal functions

2. Arrow functions do not have their own this

The arrow function’s this always points to the level above its current scope

var id = 'GLOBAL';
var obj = {
  id: 'OBJ'.b: () = > {
    console.log(this.id); }}; obj.b();// 'GLOBAL'
Copy the code

3. The this pointer inherited from the arrow function never changes

4. Call (), apply(), bind(), and other methods cannot change the this pointer in the arrow function

5. Arrow functions cannot be used as constructors

6. Arrow functions have no arguments of their own

7. Arrow functions have no prototype property

8. Arrow functions cannot be used as Generator functions and the yeild keyword cannot be used

5. Where does this point to in the arrow function?

The arrow function does not actually have its own this; its this actually inherits its this value from the parent of its scope. This is defined at the time of the definition and will not change.

You can use Babel to convert ES6 code into ES5 code to understand this:

ES6:

const obj = { getArrow() { return () => { console.log(this === obj); }; }}Copy the code

Babel:

// ES5, translated by Babel
var obj = { 
   getArrow: function getArrow() { 
     var _this = this; 
     return function () { 
        console.log(_this === obj); }; }};Copy the code

6. What are the functions and application scenarios of extended operators?

1. Extension operators for objects

The extension operator of an object is used to fetch all traversable properties of the object and copy them into the current object.

  let a = {name: 'a'.age: 12}
  letb = { ... a }Copy the code

Extension operators are equivalent to object.assign ()

 let a = {name: 'a'.age: 12}
 let b=Object.assign({},a)
Copy the code

The object.assign () method is used to merge methods, copying all the enumerable properties of the source Object to the target Object.

Its first argument is the target object, and the following arguments are the source object

For the application scenario of an object extension operator, the Reducer function must be a pure function in the Reducer of Redux, that is, we cannot directly operate the state state inside the function, so we can copy it directly using the extension operator to generate a new object and return it

Note: Both the extension operator and the object instance are shallow copies

2. Array extension operator

The array extension operator converts an array to a comma-separated sequence of arguments, expanding only one layer at a time.

Application Scenarios:

  • Converts an array to a sequence of parameters
  • Copy the array
  • Merge array
  • Used in combination with structure assignment to generate a new array.
  • Convert a string to an array **(algorithmic problem available)**
  • Converts the argument list argument to an array (insteadArray.prototype.slice.call(arguments))

7. Understand the structure of objects and arrays?

It’s just a way of fetching data from arrays and objects, where arrays are evaluated by position, and objects are evaluated by property name, regardless of position.

{deconstructed object :{next level object :{target attribute}}}

Such as:

const school = {
   classes: {
      stu: {
         name: 'Bob'.age: 24,}}}Copy the code

If we want to get name:

 let {classes: {stu:{name}}}=school
Copy the code

8. What do you understand about REST parameters?

The entire parameter of a function is an array. This is often used when the number of parameters of a function is uncertain.

function mutiple(. args) {
  console.log(args)
}
mutiple(1.2.3.4) // [1, 2, 3, 4]
Copy the code

10. Object. Assign and ES6 extension operators are deep copy or shallow copy, and what is the difference between them

Both are shallow copies.

Thing in common:

The common denominator is to take a copy of an old object and create a shallow copy of that object

Difference:

  • Object.assignThe function modifies its first tartget Object passed in, thus triggering the setter for ES6. If we use Proxy or Object.defineProperty to do anything else on the set method after modifying the set, we will encounter unexpected errors
  • And the extension operator gives us a normal JavaScript object, and it doesn’t really matter what we do, right