Front end knowledge points

Hey, hey, I'm here again. Are you ready to take it 😀

  1. Implement the flatten method of an object
    Implement the following transformations:
const obj={
 a:{
  b:1,
    c:2,
    d:{
     e:5
    }
  },
  b:[1,3,{a:2,b:3}],
  c:3
}

flatten(obj) {} results are returned as follows:

//{
//  'a.b':1,
//  'a.c':2,
//  'a.d.e':5,
//  'b[0]':1,
//  'b[1]':3,
//  'b[2].a':2
//  'b[2].b':3
//  c:3
//}

Are you ready to think? I'll announce the answer 🙃---------------------------------------------------------------------------------------------------------------------------------------------------

Answer: this topic needs to start with the result. It can be seen that the object needs to be traversed and the attribute values inside need to be output at one time. The core method is to pass in the object key value and value, and then recursively traverse the value. The data types in js include basic data type and reference data type. For this problem, the basic data type does not need deep traversal, and the reference data type needs recursion again.

function flat(obj,key="",res={},isArray=false){
 for(let [k,v] of Object.entries(obj)){
  let tmp=isArray ? key +"["+ k +"]":key + k
  flat(v,tmp,res,true)
 }else if (typeof v==="object"){
  let tmp=isArray ? key+"["+k+"].":key+k+"."
  flat(v,tmp,res)
 }else{
  let tmp=isArray ? key +"["+k+"]":key+k
  res[tmp]=v
  }
 }
 return res
}

Another solution (the code is written differently, but better understood):

function objectFlat(obj=''){
 const res={}
 function flat(item,preKey=''){
  Object.entries(item).forEach(([key,value])=>{
   let newKey=key
   if(Array.isArray(item)){
    newKey=preKey ? '${preKEy}[${key}]':key
   }else{
    newKey=preKey ? '${preKey}.${key}':key
   }
   if(value && typeof value==='object'){
    flat(value,newKey)
   }else{
     res[newKey]=value
    }
   })
  }
  flat(obj)
  return res
}
const source={a:{b:{c: 1,d: 2},e: 3},f{g: 2}}
console.log(objectFlat(source));
const obj={
 a:1,
 b:[1,2,{c:ture}],
 c:{e:2,f:3},
 g:null,
};
console.log(objectFlat(obj));
  1. Introduce the operation mechanism of setTimeout
    Answer: setTimeout() function: used to specify the number of milliseconds after a function or a piece of code is executed. It returns an integer representing the number of timer, which can be used to cancel the timer.
    For example, see what is the order of the last printing
console.log(1);
setTimeout(function(){
 console.log(2);
},0);
console.log(3);

Answer: 1 3 2 (no matter whether the execution time of setTimeout is 0 or 1000, the result is to output 3 first and then 2, which involves the problem of js operation mechanism)
JavaScript single thread: the JavaScript engine is based on event driven and single thread execution. The js engine always waits for the arrival of tasks in the task queue and then processes them. At any time, the browser has only one js thread running the program, that is, the main thread, while single thread JavaScript realizes "non blocking execution" through the task queue.
All tasks can be divided into two types: asynchronous tasks and synchronous tasks. Synchronization tasks refer to tasks queued on the main thread. The next task can be executed only after the previous task is executed; Asynchronous tasks refer to tasks that enter the "task queue" without entering the main thread. Only when the main thread completes execution and the main thread notifies the "task queue" that an asynchronous task can be executed, the task will enter the main thread for execution.
js operating mechanism: ① all synchronization tasks are executed on the main thread to form an execution stack
② In addition to the main thread, there should also be a "task queue". As long as there are asynchronous tasks with running results, an event will be placed in the "task queue"
③ Once all synchronous tasks in the "execution stack" are executed, the system will read the "task queue" to see what events are in it, and then the corresponding asynchronous task will end the waiting state and enter the execution stack to start execution
④ The main thread repeats the third step above
Operation mechanism of setTimeout: the operation mechanism of setTimeout and setInterval is actually to move the specified code out of this execution. Wait until the next round of EventLoop to check whether the specified time has arrived. If so, wait until the next round of EventLoop to judge again, that is, the code specified by setTimeout will not be executed until all synchronous codes are executed this time
3. Find the median of two positively ordered arrays: given two positively ordered (from small to large) arrays num1 and num2 with sizes of m and n respectively, please find and return the median of these two positively ordered arrays.
Example:

input:num1=[1,3],nums2=[2]
output:2.00000
 explain:Merge array=[1,2,3],Median 2
input:num1=[1,2],num2=[3,4]
output:2.50000
 explain:Merge array=[1,2,3,4],median (2+3)/2=2.5
Input: num1=[0,0],num2=[0,0]
Output: 0.00000
Input: num1=[1],num2=[0,0]
Output: 1.00000
Input: num1=[2],num2=[0,0]
Output: 2.00000

Tips:

num1.length==m---
num2.length==n
0<=m<=1000
0<=n<=1000
1<=m+n<=2000
-106<=num1[i],num2[i]<=106

This problem needs to be considered carefully 🤔-----------------------------------------------------------------------------------------------------------------------------------------------------------
Violent solution: sort from small to large after merging the two codes. If the total number of arrays is odd, take num [n / 2]; if it is even, take (Num [n / 2] + num [n / 2-1]) / 2. The codes are as follows:

var findMedianSortedArrays=function(nums1,,nums2){
 let n=nums1.length+nums2.length;
 let nums=nums1.concat(nums2).sort((a,b)=>a-b);
 let result=n%2==0
  ?(nums[n/2]+nums[n/2-1])/2
  :nums[Math.floor(n/2)];
return result;
};

Double finger acupuncture: because it is two ordered arrays, there is no need to merge the two arrays to find the median. When the combined array length len of the two arrays is an odd number, just know the number whose index is len/2. If the number is even, just know the books whose indexes are len/2-1 and len/2, that is, whether it is even or odd, just traverse len/2, and use two values to store len/2-1 and len/2 in the traversal process. Two pointers point1 and point2 are defined to point to nums1 and nums2 respectively. When nums1 [point1] < nums2 [poimt2], the point1 pointer moves, otherwise the point2 pointer moves. The code is as follows:

var findMedianSortedArrays=function(nums1,nums2){
 let n1=nums1.length;
 let n2=nums2.length;
 let len=n1+n2;
 let preValue=-1;
 let curValue=-1;
 let point1=0;
 let point2=0;
 for(let i=0;i<Math.floor(len/2);i++){
  preValue=curValue;
  if(point1<n1&&(point2>=n2||nums1[point1]<nums2[point2])){
   curValue=nums1[point1];
   point1++;
  }else{
   curValue=nums2[point2];
   point2++;
  }
 }
 return len%2==0
 ?(preValue+curValue)/2
 :cueValue
};

Little buddy, I'm here first. Let's think about these three questions first, 🤣 I'm running away. I'll update later. Please look forward to it 😊

Tags: Javascript Front-end Interview

Posted on Sat, 20 Nov 2021 12:57:59 -0500 by ahoo