2020-07 study notes sorting

For-in and for-of

Official documents ：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for…of

Conventional for Cycles have limitations ,forEach and map Adapt to array loops , So there is for in and for of loop .

for…of… loop ： You can loop through enumerable objects （ Array , object ,Map, set, Pseudo array , Constructors, etc ）, Loop to get internal elements , have access to break Jump out of , Properties and methods on the prototype chain of enumerable objects cannot be cycled .

for…in… You can loop through the items of an array , And functions on objects, etc （ Including functions on the prototype chain ）, Attention should be paid to before use .

Conclusion ： Traversing arrays takes precedence for forEach map Handle , Traversing objects takes precedence for…of… Get the properties of an object

in-place algorithm

Do not use additional heap memory space （ You can use temporary variables ） Use ： Invert array ; Palindrome

Bisection algorithm

Two points , Judge , Then recursively or while loop ;

The binary premise is the sorted array ; Determine the boundary and final value of the dichotomy , Avoid the dead cycle ;

Bisection algorithm can be used to quickly find whether there are specified elements in the array ; Or quick sort （ Select the first element in the array as the root element , Then define two empty arrays , Store elements larger and smaller than the root element respectively , Then traverse the remaining items of the array and compare them with the root element , When Tao is in two empty arrays , Then put the large array , Root element , Small arrays can be combined ） Large and small arrays continue to perform binary sorting .

Greedy Algorithm

It is mainly used in situations where problems can be decomposed step by step , Greedy algorithms may not be the best way , Therefore, we need to consider whether it is suitable to use greedy algorithm . The main problem that can be solved is the knapsack problem （ Limited weight , Try to pack the most valuable goods ） Then the price weight ratio of different products can be calculated , Then store different items . Or coin change, etc .

Number formatting

Intl.NumberFormat(locale, option).format(10000);

This built-in method , You can convert a number into different currency formats , Separator , Company , Significant figures, etc .

The first parameter is locale Language , For example, it was introduced into Germany , So the decimal point and comma are the opposite settings .

The second parameter is option Optional parameters , Configuration object . The properties of an object are style currency unit You can set currency number separator, etc .

performance optimization

React in , The goal of performance optimization is to reduce unnecessary rendering

Built-in methods ： Use shouldComponentUpdate Judge state props When the change , Update component ; Use PureComponent Set pure components , If it's a pure component , Then the components are automatically shallow compared props Then render , This PureComponent Will be inherited into sub components , So you need to use this component in the leaf node . If it is a function component, use React.memo() Optimize （ Not actually used ）.

Manual optimization ： Reduce unnecessary from parent components to child components Props; Reduce State Use , Try to use attributes , Avoid unnecessary rendering ; If it's a reference type , You need to clone Copy new objects , Implement component update .

Ref yes Null Of bug

In some cases ,this.ref.current yes null, Can't get... Directly DOM node . Usually the cause of the problem is , During interface initialization , This node has not been rendered yet , therefore DOM Can't get , What you get is NUll. It is usually OK to call in the event callback function , But in render perhaps DidMount It may not be obtained in the stage .

setState Passing objects and functions

setState Execution is asynchronous , If you pass the object , Errors may occur .

If this function is called frequently , Then when the latter is executed , Acquired this.state.count It's wrong. , The result is wrong

this.setState({
    
  count: this.state.count + 1,
});

You can pass a function instead , Get the latest every time state, So the count is correct

this.setState((state) => {
    
  return {
    
    count: state + 1
  }
});

bash Create operation files in batch

Need to call bash Of API（ Create delete directory , Create delete file , loop , Add the way to write variables in the operation ）

#!/bin/bash
for a in {
    1..10}
do
	mkdir test$a
done

Use for-do-done Complete the cycle （for The condition of the loop is outside , Note that there are two points ） Deleting a file cannot be rolled back , Note the script execution