# 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
//}
```

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.
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 ðŸ˜Š

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