[Key points] 2023 front-end comprehensive knowledge points

1. Learning articles

Interested students can check this article, and some excellent articles will be updated from time to time.
The collection of excellent front-end articles
mainly introduces the basic specifications defined during development.
The naming convention of front-end development
mainly introduces the new features of Vue3
. comparison of x

Two. JS

1. Closure

Meaning: A closure is a function, two functions are nested with each other, and the inner function is a closure to form a closure condition Disadvantages
: Local variables will be resident in memory, which is easy to cause memory leaks, because the closure will not be released for a long time, it is not easy Recycled by the garbage collection mechanism Usage
scenarios:
1. setTimeout
2. Callback
3. Function anti-shake
4. Timer

function test(){
    
    
  let name='123';
	function aa(){
    
    
	console.log(name);
}
}

2. Deep copy shallow copy | deep clone shallow clone

The shallow copy is still the same memory address, and the deep copy is to open up a new block!
shallow copy

• That is, one variable is assigned to another variable, and the value of one variable changes, and the values ​​of both variables change, which will change with the change of the source object. This is called shallow copy
• Shallow copy method Object.assign(target, sources)

deep copy

• All data inside the newly copied object exists independently and will not change as the source object changes
• Recursive copy and deep copy using JSON function JSON.parse(JSON.stringify(a))

shallow clone

• It is copying, because the reference variable stores the memory address, in fact, the same piece of memory is operated later, resulting in the same array content

deep clone

• When cloning, judge whether the type of the attribute is a reference variable, and if so, use the recursive method to let it copy itself layer by layer.

3. Differences and features of ES5 and ES6

ES5
1. Strict mode, restrict some usage, 'use strict'
2. Array adds every, some, forEach, filter, indexOf, map, isArray and other methods
3. Object adds Object.defineProperties, Object.freeze, Object.create and other methods
4.require to import package
ES6
1.Block-level scope let const
2.String template `test ${name}'
3.Modules module can be configured to load and export
4.Proxy uses proxy to monitor object operations
5.import import package
6. Arrow function
7. Deconstruction
8. Spread operator

4. Data types and differences in JS

Basic data (value) types
string, number, Boolean, Null, Undefined, Symbol
Reference data types
Object, Array,
Function Differences between value types and reference types
(1) The storage location is different
① Value type variables and reference type variables will be Stored in the stack memory
② But the variable value of the reference type will be stored in the heap memory

(2) The copying method is different
① The direct assignment of the variable of the value type is a deep copy, such as var a = 10; var b = a; then the value of a It is copied to b, and the modified value of b will not affect a
② Direct assignment of variables of reference type is actually passing reference, just shallow copy

5. Precision problem in Js

Solution: put the decimal into an integer (multiplier), and then reduce it back to the original multiple (division multiple),
for example: (0.1 * 10 + 0.2 * 10) / 10 == 0.3 // true

It is recommended to view this article https://www.cnblogs.com/goloving/p/7712742.html

6. Prototypes and Prototype Chains

Prototype:
All functions have a special attribute prototype (prototype). The prototype attribute is a pointer to an object (prototype object). The methods and properties in the prototype object can be shared by the instance of the function. The so-called function instance refers to the object created with the function as the constructor, and these object instances can share the method of the prototype of the constructor.
Prototype chain:
The prototype chain is used to find the attributes of the reference type (object). The search for attributes will be carried out sequentially along the prototype chain. If the property is found, the search will stop and the corresponding operation will be performed. Otherwise, it will be searched sequentially along the prototype chain until end. Common applications are in object creation and inheritance.

Four rules of prototype and prototype chain
1. Freely expandable attributes
2. Both have an implicit prototype _proto_, which is an ordinary object
3. Implicit _proto_ points to its explicit prototype prototype
4. If a certain attribute of the current object When there is no such value, it will automatically drop down to the prototype in _proto_ to find the final null

7. Prototype chain inheritance

Reference article: Four ways to implement inheritance in js

1. Prototype chain inheritance (defects):
   Defect 1: Cut off the relationship between Zi.prototype.constructor and Zi
   Defect 2: The reference type data on the prototype chain will be shared by all instances

2. Constructor inheritance (flawed):
   Flaw 1: Methods on Fu.prototype cannot be inherited

3. Combined inheritance (recommended):
   Advantages: Solve the shortcomings of prototype chain inheritance and constructor inheritance Disadvantages
   : The constructor of Fu is called twice, that is, new Fu() is used twice, the prototype chain inherits the constructor of Fu once, and the instance melt once

4. Parasitic combined inheritance (recommended):
   Features: Object.create(Fu.prototype) is used to realize shallow copy of the prototype chain.
   Advantages: Solve the shortcomings of prototype chain inheritance and constructor inheritance.
   Disadvantages: None
   

8. Talk about the asynchrony of JavaScript

Commonly used for the following four

• setTimeout() timer
• aynsc/await
• promise
• callback callback

9. The operating mechanism of JavaScript

Basic concept
JavaScript is single-threaded, and tasks need to be queued for execution.
Synchronous tasks enter the main thread queue, asynchronous tasks enter the event queue and wait to enter the main thread to execute
macro tasks and micro tasks
. Understand that code execution is started as a macro task. When the microtask is reached, the microtasks are executed sequentially until the tasks in the current task queue are executed.
When all the microtasks in a macrotask are executed, the next macrotask is executed, and so on.

10. Event bubbling and event capture

Brief summary of event bubbling
: From the inside to the outside,
from the current event to the parent to the root element (Html), when a certain type of event of an element is triggered, then the time of the same type of its parent element will also be triggered, until Trigger on the root element
Example: Add @click.stop event to Button inside Vue’s common div to prevent bubbling
event capture
. Simple summary:
When an element is triggered from outside to inside, the same type event of the root element will be triggered first, and then move towards the children one by one level trigger until the event source is triggered

11. What are the similarities and differences between null and undefined

The same points
are all empty variables are all false values,
and the boolean values ​​are all false
null == undefined is true.
The difference is that
typeof judges null as an object, judges undefined as undefined
null and converts the number to 0, and undefined converts the number to NaN.
Null is an object Uninitialized, undefined is initialized, but undefined assignment
null === undefined is false

12. Where do the basic types exist?

String: Stored in the heap, and the reference address in the stack, if the same string exists, the reference address is the same.
Numbers: small integers are stored on the stack, and other types are stored on the heap.
Other types: a unique address is allocated when the engine is initialized, and the variables in the stack store only references

Popular explanation: Value types are on the stack. Reference types, references are on the stack, and variable data is on the heap

13. What is virtual dom

Virtual dom is an abstract data structure of JavaScript. The reason why virtual dom is needed is that the cost of operating dom in the browser is relatively high. Frequent operation of dom will cause performance problems. Vue will find out by comparing the virtual
dom before and after the update. The real dom that needs to be updated, thereby reducing the manipulation of dom

14. How to solve cross-domain problems

jsonp
websocket
nginx reverse proxy

15. What is the difference between ts and js, advantages and disadvantages

ts is a superset of js, that is, you can use native js syntax in ts.
ts requires static compilation, which provides strong typing and more object-oriented content.
ts still needs to be compiled into weakly typed, object-based native js in the end, and then run.

3. Handwriting

1. The underlying implementation principle of instanceof, manually implement an instanceof

From the currently referenced proto, follow the prototype chain layer by layer to find the corresponding prototype. Return true if found

function instance_of(L, R) {
    
    //L 表示左表达式，R 表示右表达式 
    var O = R.prototype;   // 取 R 的显示原型 
    L = L.__proto__;  // 取 L 的隐式原型
    while (true) {
    
        
    	if (L === null)      
    	    return false;   
    	if (O === L)  // 当 O 显式原型 严格等于  L隐式原型 时，返回true
    	    return true;   
    	L = L.__proto__;  
    }
}

2. Handwritten bind function

• The existence of call(), apply(), and bind() methods is to change the pointing of this in the function body
• The call() and bind() methods receive parameters respectively, and the apply() method receives parameters in the form of an array, and their first parameters are the pointers of this, which can be omitted or null
• The call() and apply() methods will be executed immediately. The bind() method will not be executed immediately, it will return a function, the function can be stored in a variable, and then the return value of the function can be obtained through the variable

Function.prototype.bind1 = function () {
    
     // 这块不可以使用箭头函数，因为 this 的指向不同
  // arguments 可以获取一个函数的所有参数，arguments 是一个伪数组
  // 使用 Array.from() 方法将 arguments 伪数组转化成数组
  const args = Array.from(arguments)
  // 获取 this 指向取出数组第一项，数组剩余的就是传递的参数
  const _this = args.shift()
  const self = this // 当前函数 fn1.bind(...) 中的 fn1
  return () => {
    
    
    return self.apply(_this, args)
  }
}
 
function fn1(a, b, c) {
    
    
  console.log('this', this)
  console.log(a, b, c)
}
 
const fn2 = fn1.bind1({
    
    x: 100}, 10, 20, 30)
const res = fn2()

Reference article: https://www.cnblogs.com/datiangou/p/10192664.html

4. Vue

1.complie build process

Mainly parse, optimize, and generate.
The function of compile is to parse the template and generate the render AST of the rendered template,
which is to describe the feature items of a thing in the form of data.
The first step is to parse to receive the original template of the template and generate it according to the nodes and data of the template. The second step of the corresponding AST
optimize traverses each AST node recursively and marks the static nodes, so that it can be compared which part does not need to be changed, and when the page is updated, reduce the comparison of this part of the DOM. The third step generate converts the first two
steps Generate a complete AST and assemble it into a render string function. Then, generate receives the AST step by step, recursively processes it step by step, and stitches it little by little until it is completed

2.diff algorithm process

Comparison of vue2 and vue3diff algorithms

In Vue2.0, when the data changes, it will generate a new DOM tree, compare it with the previous DOM tree, find different nodes and update them. But the comparison process is a full comparison, that is, each node will be compared with each other. But it is obvious that the content in some nodes will not change, so it will definitely consume time for us to compare them. So in Vue3.0, this part of the content is optimized: when creating a virtual DOM tree, a static tag will be added according to whether the content in the DOM will change. Then, when comparing with the last virtual node, only these nodes with static marks will be compared.

1. When the component is created and updated, Vue will execute the internal update function, which uses the virtual dom tree generated by the render function to compare the old and new trees, find the differences, and finally update to the real dom 2. The process of comparing
differences It is called diff, and Vue internally uses a function called patch to complete the process. When comparing, Vue uses depth-first and same-level comparison for comparison. Same-level comparison means that it will not compare across structures.
3. When judging whether two nodes are the same, Vue judges through the key and tag of the virtual node.
Specifically, first compare the root node, and if they are the same, then Hang the reference of the real dom associated with the old node to the new node, then update the property to the real dom as needed, and then compare its child node arrays; if they are not the same, recursively create all the real dom according to the information of the new node, and hang at the same time Go to the corresponding virtual node, and then remove the old dom.
4. When comparing its child node arrays, vue uses two pointers for each child node array, pointing to the head and tail respectively, and then keeps moving closer to the middle for comparison. The purpose of this is to reuse the real dom as much as possible, with as little as possible Destroy and create real dom. If they are found to be the same, enter the same comparison process as the root node, and if they are found to be different, move the real dom to a suitable position.
5. This recursive traversal continues until the entire tree is compared.

3. vue responsive principle

Vue2.x

Step 1: Hijack the data through Object.defineProperty in the Observer, and bind the getter and setter.
Getter is used to return data and notify Dep to collect subscribers.
The setter is used to set new values ​​and notify Dep of data changes.
Step 2: Compile parses the instructions (v-text, v-html, { { }}, etc.) and prepares to initialize the page.
Step 3: Execute 3 before initializing the page, instantiate the Watcher, and bind the corresponding watcher for the data that will be rendered to the page (there is a callback function for updating the view in the watcher).
Step 4: The getter will be triggered when the data is fetched, and the getter will return the data to render the page, and execute 4-1 to tell Dep to collect the watcher bound for the data before, and then Dep will execute 4-2 to collect the watcher.
Step 5: When the data changes, the setter will be triggered, the setter will set a new value for the data, and execute 5 to tell the Dep that the data has changed, and the Dep will notify the Watcher that the data has changed, and the watcher will execute a callback to update the page.

Vue3.x
can monitor the addition and deletion of attributes.
You can monitor the change of an index value of the array and the change of the length of the array.

Through the proxy object, all requests are intercepted, and the module is updated in a targeted manner

    let datas = {
    
    
        num: 0
    }
    let proxy = new Proxy(datas, {
    
    
        get(target, property) {
    
    
            return target[property]
        },
        set(target, property, value) {
    
    
            target[property] += value
        }
    })

The difference between the two
The difference between vue2 and vue3
a. The biggest limitation of the defineProperty API is that it can only monitor singleton properties.

• The responsive implementation in Vue2.x is based on the descriptor in defineProperty. It traverses + recurses the attributes in data, and sets getters and setters for each attribute.
• This is why Vue can only respond to the predefined attributes in data. Using subscripts in Vue to directly modify the value of an attribute or add a pre-existing object attribute cannot be monitored by a setter. This is a limitation of defineProperty.

b. The monitoring of the Proxy API is for an object

Then all operations on this object will enter the monitoring operation, which can completely proxy all attributes, which will greatly improve performance and better code.
Proxy can be understood as setting up a layer of "interception" before the target object. External access to the object must first pass through this layer of interception. Therefore, a mechanism is provided to filter and rewrite external access.

c. Reactive is lazy

• In Vue.js 2.x, for an object with deep property nesting, if you want to hijack its internal deep changes, you need to recursively traverse the object and execute Object.defineProperty to make each layer of object data responsive , which will undoubtedly consume a lot of performance
• Using the Proxy API in Vue.js 3.x cannot monitor deep-level property changes inside the object, so its processing method is to recursively respond in the getter. The advantage of this is that the internal properties that are actually accessed will change Responsive, simply can be said to be responsive on demand, reducing performance consumption

4. What are the vue3.x compiler optimizations?

Generate Block Tree

The granularity of Vue2.x
data update and triggering re-rendering is component level. A single component needs to traverse the entire vnode tree of the component. The
speed of rendering efficiency is positively related to the size of the component: the larger the component, the slower the rendering efficiency
and for some without modification The nodes are also traversed, which is a waste of performance.
Vue3.x
has achieved the analysis of the static template through the compilation phase, and compiled the generated Block tree.
Each block only needs to track the dynamic nodes contained in itself.
The rendering efficiency is no longer proportional to the size of the template. correlated, but positively correlated with the number of dynamic nodes in the template

slot compilation optimization

Vue2.x
will re-render the child component every time the parent component is updated.
Vue3.x
will only update the dynamically generated child components. For example, using v-if, v-for, etc. will cause the slot to change dynamically

Diff Algorithm Optimization
For details, see above 4.2 Diff Algorithm Optimization

5. The difference between vuex and global variables

1. Vuex will lose data when refreshing the page; global variables will not
2. When multiple vuex components share a state, they can be updated in real time; global variables cannot be updated

6. Vue communication method

provide/inject dependency injection
emit on
props emit
vuex
ref

Five. CSS

1. What is BFC

BFC is the Block Formatting Context (Block Formatting Context)

triggers under certain conditions

• floating element float
• display
• postion positioning element
• overflow

characteristic

• Vertically, elements are placed one at a time from top to bottom
• The margins of two adjacent sibling boxes of the same BFC will be superimposed
• BFC is an independent layout container without interference from internal and external elements

Solvable problem

• Margin collapse problem
  How will the margin be calculated at this time?
  1. Both are positive numbers, take the larger value
  2. Both are negative numbers, take the larger absolute value
  3. One positive and one negative, take the sum of the two values

• clear floating question

Reference article: https://blog.csdn.net/qq_44815747/article/details/114164636?spm=1001.2014.3001.5506

2. What is the box model and the height calculation of the box model

w3c box model
width height= content
IE weird box model
width height=content+border+padding

The actual height of the element = border+padding+height

3. CSS vertical center

第一种: flex方式
 body {
    
    
    display: flex;
    align-items: center; /*定义body的元素垂直居中*/
}

body{
    
    
		display:flex;
		flex-direction:column;
	    justify-content: center; /*定义body的里的元素水平居中*/
}

第二种: 绝对定位+transform   //无需知道被居中元素的大小
child{
    
    
	position:absolute;
	top:50%
	transform:translateY(-50%);
}

第三种: padding方式 //给父元素设置相等的上下内边距
#box{
    
    
	width: 300px;
	background:#ddd;
	padding: 100px O;
}
#child{
    
    
	width: 150px;
	height:100px;
	background: orange;
}

4. CSS achieves 0.5px

通过缩放实现
  .a2{
    
    
      height: 1px;
      background-color: #f00;
      -webkit-transform: scaleY(.5);
      transform:scaleY(.5);
}
通过伪元素实现
  .border {
    
    
        position: relative;
    }
    .border::after {
    
    
        content: " ";
        position: absolute;
        width: 100%;
        height: 1px;
        background: red;
        transform: scaleY(0.5);
    }

5. CSS realizes zebra crossing

Use the css property background: liner-gradient

6. Front-end engineering

1. The difference between Vite and Webpack

• vite starts the server first, and loads the module lazily; webpack packs the files first and then starts the server
• Because vite is lazy loading, it will be slower (but negligible) when entering the page at the beginning; webpack will respond faster because it is packaged first
• vite hot update only updates the edited module, and uses HTTP for negotiation caching; webpack will rebuild the entire package

Vite packaging principle

When the script tag is of moudle type, the browser will send a get request to the service, first find the main.js file, detect the package introduced by import, and return the requested file to the browser for analysis by hijacking the browser's request

Webpack packaging principle

1. Gradually recursively identify dependencies and build a dependency graph
2. Convert the code into an AST abstract syntax tree
3. Take the processing code in the AST stage
4. Turn the AST abstract syntax tree into code recognizable by the browser and output

7. Browser

What happens when the url is entered in the browser address bar and the request returns

Firstly, the url will be parsed, and the ip will be searched according to the dns system. The two parties will perform three handshakes to establish a link, and then request the html file. If there is an html cache locally, it will be fetched directly.

Why the url needs to be parsed

Because the network standard stipulates that the URL can only be letters, numbers and some special symbols, if it is not escaped, there will be ambiguity, causing browser recognition errors

How to perform DNS optimization on the front end

前端的dns优化，可以在html页面头部写入dns缓存地址
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

dns resolution process

1. Enter a domain name such as www.baidu.com in the browser, the operating system will first check whether the local hosts file has a record, and if so, return the corresponding IP 2.
If the local hosts file has no record, it will check the local dns Whether the resolver has a cache
3. If there is a cache, it will go to the dns server configured on our computer to query the cache
4. Otherwise, it will go to the root DNS root server, and then determine which server manages the .com. If it cannot be resolved, it will look for baidu. Can the com server resolve it until the ip address of www.baidu.com can be found

What is the difference between encodeURIComponent and encodeURI

encodeURIComponent has a wider range of encoding and is suitable for encoding parameters, and encodeURI is suitable for encoding the URL itself (locaion.origin)

The three-way handshake of the http protocol

The first handshake: host A sends a TCP packet with bit code SYN=1 to the server, and randomly generates a confirmation number (this is part of the tcp packet), host B receives the SYN code until A requests to establish a connection
; Second handshake: After receiving the request, host B sends a confirmation number (seq+1 of host A) to A, syn=1, seq = random number TCP packet; third handshake: host A checks the confirmation number after receiving
it Whether it is correct, that is, whether the confirmation number sent by A for the first time is +1, and whether the bit code ack is 1, if correct, host A will send the confirmation number again (seq+1 of host B), ack=1, host B After receiving, confirm the seq value and ack=1, then the connection is established successfully.

why not two handshakes

Because in the second handshake, host B cannot confirm whether host A has received the confirmation request, that is, B is ready to send data, but A has not received it, so it is very easy to attack B. Receive, the server is easy to hang

browser cache

Three-level cache principle
1. First search in memory, if there is, load it directly.
2. If it does not exist in the memory, it will be searched in the hard disk, and if there is, it will be loaded directly.
3. If there is no hard disk, then make a network request.
4. The requested resources are cached to the hard disk and memory.
Cache classification
1. Strong cache
Keywords: Expires: the absolute time of failure Cache-Control: np-cache or set max-age time
When the browser loads resources, it will first judge whether it is a hit based on the information in the header of the local cache resource Strong
cache , if it hits
, it will directly use the resources in the cache without performing network request operations Contains the If-Modify-Since field to determine whether the time hits the cache. The disadvantage is that if the resource changes in a short time, Last-modify will not change the
ETag identifier: if the browser requests that the ETag is inconsistent, it will be updated
when the strong cache When there is no hit, the browser will send a request to the server, and the server will judge whether it hits the cache according to part of the information in the header. If it hits, it will return 304, telling the browser that the resource has not been updated, and the local
cache can be used. Advantages of
caching 1. Reduce redundant data transmission
2. Reduce the burden on the server and greatly improve the performance of the website
3. Speed ​​up the client page loading speed

Reference article: Thoroughly understand browser cache

CSRF attack and XSS attack

CSRF (Cross-site request forgery) Cross-site request forgery
is generally common in website fraud, such as unfamiliar links stealing your cookie information
Solutions:
1. Token verification
2. Referer verification, only accepting requests from this site, all external sites are allowed Do not accept
XSS (Cross Site Scripting): Cross-domain scripting attacks
Inject JS and HTML codes into the website to tamper with the website
Vue and React are both based on Dom, so avoid a lot of xss
and also pay attention to reducing v-html embedded Operation of js code

Eight. Performance optimization

The length is long, so I opened another article
vue optimization - 1. Front-end performance optimization and attention points

Nine. Algorithm

Bubble Sort

Compare adjacent elements. If the first is bigger than the second, swap them both.
Do the same for each pair of adjacent elements, from the first pair at the beginning to the last pair at the end

var arr=[1,35,21,2,565,888,96554,1222];   //先把他们放到一个数组
for(var i=1;i<arr.length;i++){
    
        // 比较的轮数，这里就代表总共比较7轮
     for(var j=0;j<arr.length-1;j++){
    
         //每一轮比较的次数
             //交换2个元素的值
            if(arr[j]>arr[j+1]){
    
    
                var tmp=arr[j];    //这里var 了个tmp，作用就是作为一个arr[j]和arr[j+1]交换的载体（空间），在此处不可以直接交换
                arr[j]=arr[j+1];
                arr[j+1]=tmp
              }
    }
}
console.log(arr);

quick sort

Divide the array into two parts, and find a reference point, put the one smaller than the current reference point on the left, and put the larger one on the right. When both sides are in order, the sorting is realized

function quickSort(arr) {
    
    
    let len = arr.length;
    if (len === 0) return arr;
    let first = arr[0];
    let lesser = [], greater = [];
    for (let i = 1; i < len; i++) {
    
    
      if (arr[i] < first) {
    
    
        lesser.push(arr[i]);
      } else {
    
    
        greater.push(arr[i]);
      }
    }
    return quickSort(lesser).concat(first, quickSort(greater))
}
var temp = quickSort([8, 12, 50, 2, 6, 7]);
console.log('最终值:'+temp);

selection sort

First find the smallest (largest) element in the unsorted sequence and store it at the beginning of the sorted sequence.
Then continue to find the smallest (largest) element from the remaining unsorted elements, and then put it at the end of the sorted sequence.
Repeat the second step until all elements are sorted

function swap(arr, index1, index2) {
    
    
  let temp = arr[index1];
  arr[index1] = arr[index2];
  arr[index2] = temp;
}

function selectSort(arr) {
    
    
  let len = arr.length;
  let max;
  for (let i = len - 1; i >= 1; i--) {
    
    
    max = i;
    for (let j = 0; j < i; j++) {
    
    
      if (arr[j] > arr[max]) {
    
    
        max = j;
      }
    }
    swap(arr, i, max);
  }
  return arr;
}

console.log(selectSort([15, 8, 14, 2]));

merge sort

Select an element in the list as the reference value, sort around this reference value, and put the elements in the list that are smaller than the reference value into the bottom of the array than the top.

function mergeSort(arr) {
    
    
  let len = arr.length;
  if (len < 2) return arr;
  let middle = Math.floor(len / 2),
    left = arr.slice(0, middle),
    right = arr.slice(middle);
  return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right) {
    
    
  let result = [];
  while (left.length > 0 && right.length > 0) {
    
    
    if (left[0] <= right[0]) {
    
    
      result.push(left.shift());
    } else {
    
    
      result.push(right.shift());
    }
  }

  while(left.length) result.push(left.shift());
  while(right.length) result.push(right.shift());

  return result;
}

binary search

Find the element index based on the ordered sequence , otherwise return -1

function binarySearch(arr, target) {
    
    
  let len = arr.length;
  let low = 0,
    high = len - 1;
  while (low <= high) {
    
    
    let middle = Math.floor((low + high) / 2);
    if (arr[middle] < target) {
    
    
      low = middle + 1;
    } else if (arr[middle] > target) {
    
    
      high = middle - 1;
    } else {
    
    
      return middle;
    }
  }
  return -1;
}
console.log(binarySearch([2, 4, 5, 6, 7], 7));

binary tree

Pre-order traversal: root node-left node-right node
In-order traversal: left node-root node-right node
Post-order traversal: left node-right node-root node

traversed according to pre-order The result is BADCE.
The result of inorder traversal is ABCDE.
The result of subsequent traversal is ACEDB.
The result of traversing according to the level is BADCE.

10. Language game

How do you think the previous company is doing?
First, give a rough compliment to the previous company, and then talk about the reasons why you don’t want to stay. Don’t make complaints about this or that. For example, I think the previous company did a good job in various aspects, whether it is the company environment, management system, or team atmosphere, but the technology stack update is relatively slow, and the salary adjustment system is not ideal.

Why do you want to work on the front end
? I think the front end is more interesting. You can see the interface and make fun things to show off to your parents, children, and girlfriends.

How do you usually study?
Read paper books, e-books, videos, blog forums.

Whatever books you
have read, just say what you have read, and don’t make it up. I have heard that some interviewers will ask you what color is the cover of a certain book, what is the table of contents and other wonderful questions.

What do you think are your strengths/weaknesses?
Strengths lie in active learning and willingness to share. The disadvantage is that you can't learn the content you are not interested in, such as database.

Give an example to prove that you are an excellent author in the xx community who is willing to learn.
The company's annual progress award
Open source project

Your four words about your career plan
are straight up, with one specialty and more expertise.

Do you have anything else you want to ask me?
I usually ask about the size of the technical team .
How many people are there in the technical team?

What technology stack are you currently using?
What technology stack do you plan to use in the
future? Can you decide the direction of the future technology stack?

Then there is my role in the team,
what work I am responsible
for, and the degree of decision-making for the project