1 CSS Selectors

Spaces indicate descendants , And... Without spaces
> Match all matching child elements

2 flex：0 1 auto The meaning of

flex：flex-grow flex-shrink flex-basis

• flex-grow： Growth factor of main dimension , decision flex The relative proportion of the remaining space allocated by the container , The remaining space is flex Container minus all flex The size of the item adds up to the size of
• flex-shrink： Appoint flex The contraction rules of elements ,flex Elements shrink only when the sum of the default widths is greater than the container , Its shrinkage is based on flex Value
• flex-basis： It specifies flex The initialization size of the element on the spindle

flex-grow by 0 Indicates that the element will not be resized to fit flex Main dimensions of containers
flex-shrink by 1 Express When space runs out , The project will shrink

flex：1 amount to flex：1 1 0 That is, elements can be in flex-basis by 0 Expansion on foundation

flex：0 1 auto Represents the width of the box and width Agreement , Then see if there is any space left in the box , If there's room left , because flex-grow by 0, The element size will not be adjusted , If there is no room left , Then the size of the box is according to flex-shrink by 1 To contract

3 Value passing and reference passing

Put it in the parameter and it won't happen , Learn it quickly

var a=40
function change(a){
    
	a=50
}
change(a)
console.log(a)	// The result is 40

% Function a Independent of a There is , His change will not affect the arguments a

var a={
    name:40}

function change(a){
    
	a.name=50
}
change(a)
console.log(a)		// The result is 50
% What is passed to the function here is a The address of , So change a.name Will change the original data 

function change(a){
    
	a={
    name:50}
}
change(a)
console.log(a)		// The result is 40

% In this case, in the function a Points to another address 

4 hold axios Change to chain call

scene ：

axios.get().then(res1=>{
    
	axios.get().then(res2=>{
    
		axios.get().then(res3=>{
    
		})
	})
})

axios.get('').then(res1=>{
    
	return axios.get('')
}).then(res2=>{
    
	return axios.get('')	
}).then()

5 http header

HTTP Message headers allow clients and servers to pass through request and response Pass add information

content-Type It is used to tell the server how to process the requested data , And tell the client how to parse the response data

• application/x-www-form-urlencoded ：HTTP Set the request parameters in key1=val&key2=val Way to organize , And put it into the request entity , If it is Chinese characters or special characters, it will be url transcoding , File... Is not supported , Generally used for form submission
• multipart/form-data： This is a multi part multimedia type , This type is generally used for forms that need to upload files
• application/json： The required parameter itself is json Formatted data , Parameters will be placed directly in the request entity , The client and server will press json Format parse data
• application/xml and text/xml：xml Formatted data , The latter will be ignored xml The coding format in the data

6 Breadth first traversal and depth first traversal

var node=[{
    
      val:1,
      child:[{
    
        val:3
      },{
    
        val:4,
        child:[{
    
          val:5
        }]
      }]
    },{
    val:2}]



function DFS(node){
    
      let res=[]
      let len=node.length
      for(let i=0;i<len;i++){
    
          res.push(node[i].val)
          if(node[i].child){
    
            let value=DFS(node[i].child)
            res.push(...value)
          }
      }
      return res
    }

function BFS(node){
    
      let res=[]
      let len=node.length
      let value=[]
      for(let i=0;i<len;i++){
    
        console.log(node[i].val);
        res.push(node[i].val)
        if(node[i].child){
    
          value.push(...BFS(node[i].child))
        }
      }
      value&&res.push(...value)

      return res
    }

7 v-model The essence of

<input v-model='data' />

 amount to 
<input :value='data' @input='cahnge' />