Front-end interview questions course notes, course notes are only for personal use

Ch4 front-end basic knowledge must be known

4.1 What is the difference between Ajax-Fetch-Axios?

1. All three are used for network requests, but in different dimensions

Ajax, a general term for technology, not a specific API
Fetch is a concrete API
- Browser-native API for network requests
- Same level as XMLHttpRequest
- Fetch syntax is more concise and easy to use, and supports Promise
Axios is a third-party library https://axios-http.com
- The most commonly used network request lib (with Vue becoming popular)
- Internally available XMLHttpRequest and Fetch implementation

2. The difference between lib library and API

API is a native function
lib is a third-party tool

3. Implement Ajax with XMLHttpRequest

function ajax1(url.successFn){
    
    
    const xhr=new XMLHttpRequest()
    xhr.open("GET",url,false)
    xhr.onreadystatechange=function(){
    
    
        if(xhr.readyState==4){
    
    
           if(xhr.status==200){
    
    
              successFn(xhr.responseText)
           }
        }
     }
     xhr.send(null)
}

4. Implement Ajax with Fetch

function ajax2(url){
    
    
    return fetch(url).then(res=>res.json())
}

4.2 What is the difference between anti-shake and throttling, and what scenarios are they used for?

4.3 What is the difference between px-%-em-rem-vw/vh?

1. px and %

px base unit, absolute unit
% relative to the ratio of the parent element

2. em and rem

em is equivalent to the font-size of the current element
rem is equivalent to the font-size of the root node

3. vw and vh

1% of vw screen width
vh 1% of screen height
The minimum value of both vmin and the maximum value of vmax

4. Use em: text spacing
insert image description here

5. Use rem: Different phone sizes correspond to different sizes
insert image description here

4.4 When should arrow functions not be used?

1. Disadvantages of arrow functions

no arguments
This cannot be modified by call or apply. The this of the arrow function points to the scope when it is defined
Sometimes the code is hard to read

2. Occasions where arrow functions cannot be used

Not applicable to object methods, prototype methods, constructors
Callback functions in dynamic contexts
Not applicable to Vue statement cycle and method (React can be applied)

insert image description here

4.5 Please describe the TCP three-way handshake and four-way handshake?

4.6 What is the difference between for in and for of in JS?

(1) key and value

for in traversal to get key(/index)
for of traversal to get value
(2) applicable to different data types
Traversing objects: for in is OK, for of is not
Traversing the Map: Set: for of is possible, for in is not
Traversing the generator: for of is possible, for in is not

(3) Enumerable vs iterable
for in is used for enumerable data, such as objects, arrays, strings
for of is used for iterable data, such as arrays, strings, Map, Set