Front end common interview questions 2020

Why does vuex lose data when refreshing the page

vuex The data is stored in the cache

Understanding of vue Mixins

Mixed mode (local and global)
Understanding: reusability of code

Function of three-point operator

Deconstruct array

The difference between http and tcp

http Is a stateless short connection, tcp Is a stateful long connection, http Based on tcp above

The difference between https and http

One is plaintext transmission and the other is encrypted ssl transmission
 One port is 443 and the other is 8080
http Transmission speed ratio https fast
https than http It's safe, but it costs more. I want to buy it ssl certificate

The difference between tcp and udp

One is the transmission protocol and the other is the user datagram protocol
 One for connection and one for no connection
 One needs transmission and the other does not need transmission
 One for one, one for many

Promise's three states, advantages and disadvantages

1,pending/reslove/reject . pending Is pending, resolve It can be understood as success, reject It can be understood as refusal.
2,Promise It is used to encapsulate an asynchronous operation and obtain its results
3,Advantages: 1. Solve the callback problem( Callback Hell)Problem, let the callback function become a standard chain writing method, and the program flow can be seen clearly
   Disadvantages: 1. It is more difficult to write than the traditional writing method, and you can't understand the code at a glance. 2. 2. Cannot cancel Promise,Once it is created, it will be executed immediately and cannot be cancelled halfway

Who executes Promise and timer first

promise,because promise It's a micro task

Understanding of async and await

async await Returns a promise Object, which will preferentially execute synchronous methods and execute asynchronous methods. If another function method is called in the method, the asynchronous operation in the method is also regarded as synchronous execution await If there is an asynchronous request above, the asynchronous request is executed first await Similarly await Here is an asynchronous request executed first await  Executing asynchronously if yes await  btn() The method becomes asynchronous anyway. Understand who follows asynchronous and who executes first await The ultimate role I probably understand is to turn a duck into a chicken. The chicken here refers to asynchronous if similar let a =await console Directly await When assigned to an object, it will become the same level as ordinary object methods and execute from top to bottom 

Why aren't async and await supported in callback functions

async and await This is the syntax in the native function. Currently, the callback function is not supported async. 

The difference between async and promise

use async and await Obviously save a lot of code, do not need to.then,There is no need to write anonymous function processing promise of resolve There is no need to define redundant values data Variables also avoid nested code.
async/await Give Way try/catch Synchronous and asynchronous errors can be handled simultaneously. try/catch Can't handle JSON.parse Because he was promise Yes. Need at this time.catch,Such error handling code is very redundant. Moreover, in our actual production, the code will be more complex

async does not write await, but uses return to return the value. How to get the value of return

async function timeout() { return 'hello world' } 
timeout().then(result => { console.log(result); }) 

How to catch exceptions

try{}cahcth(err){}

Prototype chain

function Parent(month){
    this.month = month;
}

var child = new Parent('Ann');

console.log(child.month); // Ann

console.log(child.father); // undefined

How to organize applet bubbling events?

catchtap Organize applet bubbling events

What is the difference between var let const?

1,var The variable can be declared repeatedly, and the second assignment will overwrite the first value, let The statement cannot be repeated, and an error will be reported
2var and let The declared variable is undefined, and all prints are untif
3,var Is the function scope, let Is a block level scope
4,var Will raise the variable, let can't
5,conts The definition constant cannot be modified. The definition object can be modified

Understanding of event loop

Event loop, the principle of asynchronous operation
 Self understanding: js It is a single thread. When there are multiple tasks, the code cannot be executed due to the blocking of a task. A fake dead state appears and the user cannot respond eveent-loop It is to deal with this blocking behavior and turn it into non blocking. It will first execute the main thread task, that is, what we call synchronization. It will put the asynchronous behavior into the queue, that is, the task column. It will wait for the main thread to finish executing, and then go to the task queue to read the task circularly.

Understanding of memory leaks

Refers to the phenomenon that a piece of memory is not returned to the operating system or memory pool for some reason when it is no longer used by applications

Disadvantages of sessionstorage and localstorage

Cannot be obtained by the server, and cannot set the date

What factors affect the time interval between create and mounted in vue

Code quantity and data quantity

How to solve the problem of too deep props level

vuex

Explain the difference between computed and watch in detail first, and then summarize in a sentence?

computed Name cannot be the same as data The objects in the database are repeated. You can only use synchronization. There must be return;It is a change to multiple values.
watch:Name must be and data Inside object- -Sample, can be used for asynchronous, no return;It's one to many. Monitor one-Multiple values. A change in one value causes multiple values to change.

The difference between redrawing and rearrangement?

Redrawing must trigger rearrangement, and rearrangement does not necessarily trigger redrawing.

Deep copy and shallow copy?

Shallow copy only adds a pointer to the existing memory address, only to the copied memory address. If the original address changes, the shallow copied object will change accordingly. Deep copy is to add a pointer and apply for a new memory, so that the added pointer points to the new memory. "
Deep copy json.assign(If obj If there is a time object in it, then JSON.stringify Later again JSON.parse As a result, time will only be in the form of string, not object)
Shallow copy object.assion({},list),If there is only one level attribute, it is a deep copy. If there are two levels, it is a shallow copy

If a has an object, which is assigned to b, when b is modified, a will change. Why?

Yes, because when assigning directly, it is a shallow copy, and its pointer still points to the original memory space. When we expand this object with an extension operator and assign another value, it can be avoided.

Original data type and reference data type?

The original data types are divided into null,string And so on. Reference data types are divided into objects, functions, and arrays
 Difference: the value of the original data type exists in the stack memory, and the reference data type exists in the heap, because its data size is not fixed and takes up a large space

Object array de duplication

function unique(arr) {
    const res = new Map();
    return arr.filter((a) => !res.has(a) && res.set(a, 1))
}

How does native JS object attribute change

var obj = {}; 
var initValue = 'hello'; 
Object.defineProperty(obj,"newKey",{ get:function (){ //The function triggered when obtaining the value returns initvalue;}, 
set:function (value){ //The function triggered when the value is set. The set new value gets initValue = value through the parameter value;}});
 //Get the value console log( obj.newKey ); // hello 
//Set value 
obj.newKey = 'change value'; console.log( obj.newKey ); //change value

How to write a closure

Simple writing
let a = 3
const  b = ()=>{
Console.log(a)
}

Difficult writing
function foo(){
  var local = 1
  function bar(){
    local++
    return local
  }
  return bar
}

How to optimize performance when an element is frequently created and destroyed

var div = document.createElement("div");//Create element first
div.id="mydiv";//Or div.setAttribute("id","mydiv")// Bind id to element
document.body.appendChild(div);//Insert it into the body
 Click the button to determine whether the node exists. If it does not exist, it will be created. If it does not exist, I will dynamically modify its display and hiding. If it does not exist, I will create an element and bind another one id,And assign value

What are the functions of bind, call and apply?

Change the running environment of a class or method

Disadvantages of bind

Performance memory consumption

Browser cache

Strong cache and negotiation cache
 The strong cache is fetched directly from the cache  express
 Negotiation cache: the server tells the browser whether the cache is available etag

export and module Differences between exports

1,exports Only use.Syntax exposes internal variables  example   exports.xxx=xxx
2,module.exports You can assign an object either through point syntax or directly    example  module.exports.xxx=xxx
3,exports = module.exports = {};
4,If you give exports and module.exports If you copy directly, it will point to the new memory and cut off the connection between the two

What is nodejs? Where do we use it?

Nodejs Is a server-side technology. Based on it Google V8 JavaScript Engine. Used to develop extensible server programs.

Why use node js?

nodejs It will make our programming work easier. It mainly includes the following benefits:
Fast execution, never blocking JavaScript It is a general programming language and asynchronous processing mechanism

What is hell?

Callback hell is caused by nested callback functions. Such a mechanism will make some functions unreachable and difficult to maintain.

What is a callback function?

Callback function refers to using one function as a parameter to pass in another function, which will be called at a certain time.

What is the difference between callback and return in callback functions?

callback Pass in another function as a parameter, and the other function is equivalent to obtaining callback The value of this, and return It directly points to his caller, and the obtained results are also given to the caller

What is an error first callback function?

The error first callback function is used to pass errors and data. The first parameter should always be an error object to check whether an error has occurred in the program. The remaining parameters are used to pass data

How to avoid callback hell

use Promises

The difference between arithmetic error and programmer error

Arithmetic errors are not bug,This is a system related problem, such as request timeout or hardware failure. And programmer error is called bug. 

What is a Stub?

Stub Is a function or program used to simulate a component or module. In test cases, simply put, you can use Stub To simulate a method, so as to avoid calling the real method, use Stub You can also return fictional results. You can use it with assertions Stub. 

What is flow?

Stream The data that is streamed to or from the pipeline is read continuously

How to explain that NodeJS is suitable for IO intensive and not CPU intensive?

1.Node There is no easy-to-use multi-core computing interface. Cluster It's not that easy to use.
2.Node Although the single core efficiency is higher than that of traditional scripting language, it is similar to C,C++,Java There is no advantage over.

What do req and res stand for?

req:Full name request Request object
res:Full name response Response object

_ What does dirname mean

Directory of current file

_ _ What does filename mean

Current file path

What is orm and why use orm?

Make a mapping between relational database and objects, so that we don't need to deal with complex problems when we operate the database SQL Statement, as long as it is operated as usual.

The difference between require and import

import and require Are used by modularization
2,require Is a runtime call that can be used anywhere in the code, require It can be understood as a global method, import It is called at compile time and can only be placed at the beginning of the file xxxxxxxxxx import and require They are all used by modularization require Is a runtime call that can be used anywhere in the code, require It can be understood as a global method, import It is called at compile time and can only be placed at the beginning of the file vuex

Keywords: Javascript Web Development

Added by NewfieBilko on Wed, 02 Feb 2022 01:24:22 +0200