Big front end [1-2 exercises] ES new features and TypeScript and JS performance optimization

Module 2: ES new features and TypeScript and JS performance optimization

1. [Short Answer Question] Please state the following final implementation results and explain why

var a = []
for(var i = 0;i<10;i++){
    
    
    a[i] = function(){
    
    
        console.log(i)
    }
}
a[6]()

Answer: The final output result: 10, the reason: the variable defined by the var keyword will have the problem of variable promotion. Even if i is in the loop condition, the space is not released after the for loop is executed, but can continue to be accessed, and i=10, when the function is executed, i will be output when calling, then 10.

2. [Short Answer Question] Please state the following final implementation results and explain why

var tmp = 123
if(true){
    
    
    console.log(tmp)
    let tmp
}

Answer: The final execution result will report an error. The error message is as follows. When the variable tmp is declared in the block-level scope, tmp will be bound to the block-level scope where it is. In this scope, the variable is called before the declaration, so it will If an error is reported, it will not be affected by the variable with the same name in the upper scope.

3. [Short Answer Question] Combined with ES6 new syntax, find the smallest value in the array in the simplest way

var arr = [12,34,32,89,4]

Answer: Use the sort function to sort

let getMin = (arr)=>arr.sort((a,b)=>a-b)[0]
getMin(arr) // 4

4. [Short Answer Question] Please explain in detail the difference between the three variable declaration methods of var, let and const

Answer: var, let, and const are three ways to declare variables in JavaScript

(1) The scope is different. The scope of var is the entire function, but the let scope is in the block-level scope.

(2) The order of declaration is different. Variables defined by let must be declared first and then used, otherwise an error will be reported, but var can be used first and then declared without error. Can be used normally.

(3) Variable promotion. Variables defined by var can be promoted, but variables defined by let can only be used in the scope and cannot be referenced from outside.

(4) Repeat definition. Variables can be used multiple times v var keywords defined, for example: var a = 1; var a = 2. But the variable modified by let can only be defined once. Multiple definitions will report errors.

(5) Modification. Variables defined by const cannot be changed again later. If the definition is an object, the properties inside the object can be modified, but the memory address pointed to cannot be changed. But using var and let can be modified.

5. [Short Answer Question] Please state the final result of the following implementation and explain why.

var a = 10
var obj = {
    
    
    a:20,
    fn(){
    
    
        setTimeout(()=>{
    
    
            console.log(this.a)
        })
    }
}
obj.fn()

Answer: 20. When obj calls the fn function, this in the fn function points to obj, the timer is an arrow function, and this points to the nearest function this points, so this also points to obj, so obj.a outputs 20.

6. [Short Answer Question] Briefly describe the use of Symbol type

Answer: (1) Guarantee uniqueness. Because the value of each Symbol is not equal, this means that the value of Symbol can be used as an identifier for the attribute name of the object, and it can be guaranteed that there will not be the same name.

(2) Private attributes, define private attributes, which cannot be accessed externally, and can only be accessed through methods in the class.

const name = Symbol('123')
const obj = {
    
    
    [name]:'123',
    sayHi(){
    
    
        console.log(this[name])
    }
}
console.log(obj.name) //不能直接访问
obj.sayHi() //只能调用其它非私有的方法

7. Talk about what is shallow copy and what is deep copy

Answer: Shallow copy: The so-called shallow copy is to copy the pointer to the object (the memory space pointed to by the copied target object pointer and the source object pointer is the same space).

Shallow copy is just a simple copy that allows several objects to share one memory. However, when the memory is destroyed, all pointers to this memory space need to be redefined, otherwise it will cause wild pointer errors.

Deep copy: The so-called deep copy refers to the specific content of the copied object. The content address is allocated by self-service. After the copy is completed, the value in the memory is exactly the same, but the memory address is different, and the two objects are different from each other. Affect each other without interference.

8. Please briefly describe the relationship between TypeScript and JavaScript

Answer: JavaScript is a scripting language, no need to compile, as long as it is embedded in HTML code, it can be loaded and executed in the browser.

TypeScript is a superclass of JavaScript type. It can be compiled into pure JavaScript by using Javascript in an object-oriented programming way.

JavaScript can run directly on the browser engine and node.js, but TypeScript cannot.

Nine, please talk about the shortcomings of TypeScript you think

Answer: (1) Using TypeScript will increase the workload

(2) It is necessary to clarify the type of each variable or function. During the coding process, the amount of code written will increase

10. Describe the working principle, advantages and disadvantages of reference counting

Answer: The core idea is to set the number of citations to determine whether the current number of citations is 0. When the citation relationship changes, the citation number will be modified, and the citation number will be recycled immediately when it becomes 0.

Advantages: garbage objects can be recycled in time, reducing the time of program lag

Disadvantages: It is necessary to maintain a table to store the number of references. If the number of references is too large, it will bring a certain loss, and in the case of circular object references, it is not quoted by external in time, and resources cannot be recovered.

11. Describe the workflow of the tag sorting algorithm

Answer: It is divided into three stages, marking, clearing, and sorting. In the marking phase, the collector traverses from the mutator root object, and all objects accessible from the mutator root object are marked with an identifier, which is generally recorded as a reachable object in the object's header. In the cleanup phase, the collector traverses the heap memory linearly from beginning to end. If an object is found that is not marked as reachable-by reading the header information of the object, the address of the object is moved to make It is consecutive on the address and then recycled.

12. Describe the process of garbage collection in the new generation storage area of ​​V8

There are six steps:

The recycling process uses a copy algorithm + a tag sorting algorithm. The new generation memory area is divided into two equal-sized spaces, one is the used space from and the other is the free space to. The active objects are stored in the From space, and the activities will be activated after marking and sorting. The object is copied to To, the swap space between From and To is released, and the storage area garbage collection is completed.

13. Describe when the incremental marking algorithm is used and how it works

Guess you like

Origin blog.csdn.net/qiuqiu1628480502/article/details/107285088