2020-07 学习笔记整理

For-in 和 for-of

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for…of

传统的 for 循环有局限性，forEach 和 map 适应数组的循环，所以有了for in 和 for of 循环。

for…of… 循环：可以循环可枚举对象（数组，对象，Map， set， 伪数组，构造器等），循环获取内部元素，可以使用break跳出，不能循环可枚举对象原型链上的属性和方法。

for…in… 可以循环数组的项，以及对象上的函数等（包括原型链上的函数），使用前需要注意。

结论：遍历数组优先使用 for forEach map 处理，遍历对象优先使用 for…of… 获取对象的属性

原地算法

不使用额外的堆内存空间（可以使用临时变量）使用：倒转数组；判断回文

二分算法

二分，判断，然后递归或者while循环；

二分前提是排序的数组；确定二分的边界和最终值，避免死循环；

二分算法可以用来快速查找数组中是否有指定元素；或者快速排序法（选择数组中第一个元素作为根元素，然后定义两个空数组，分别存放比根元素大的元素和小的元素，然后遍历数组剩下的项和根元素对比，当道两个空数组中，然后把大数组，根元素，小数组合并起来即可）大数组和小数组继续执行二分法排序。

贪心算法

主要用于可以把问题逐步分解的情况，贪心算法可能不是最好的办法，所以需要考虑是否适合使用贪心算法。主要可以解决的问题是背包问题（重量有限，尽量装价值最多的商品）那么可以计算不同产品的价格重量比值，然后存放不同的商品。或者硬币找零问题等等。

数字格式设置

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

这个内置方法，可以把一个数字转换成不同格式的货币，分隔符，单位，有效数字等。

第一个参数是 locale 语言，例如传入德国，那么小数点和逗号是相反的设置。

第二个参数是 option 可选参数，配置对象。对象的属性有 style currency unit 可以设置货币数字分隔符等。

性能优化

React中，性能优化的目标是减少不必要的渲染

内置方法：使用 shouldComponentUpdate 判断 state props 变化时，是否更新组件；使用 PureComponent 设置纯组件，如果是纯组件，那么组件内部自动浅对比 props 然后进行渲染，这个PureComponent 会继承到子组件中，所以需要在叶节点中使用这个组件。如果是函数组件使用 React.memo() 优化（实际没用到）。

手动优化：减少父组件向子组件的不必要的Props；减少State的使用，尽量使用属性，避免不必要的渲染；如果是引用类型，那么需要 clone 复制新对象，实现组件更新。

Ref 是 Null 的 bug

有些情况下，this.ref.current 是 null，无法直接获取DOM节点。通常问题的原因是，在界面初始化时，还没有渲染这个节点，所以DOM获取不到，获取到的是NUll。通常在事件回调函数中调用是没问题的，但是在 render 或者 DidMount 阶段中获取可能获取不到。

setState 传递对象和函数

setState 执行是异步的，如果传递对象，可能会产生错误.

如果频繁调用这个函数，那么后一个执行时，获取的 this.state.count 是错误的，结果就错误了

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

可以改成传一个函数，每次获取最新的state，这样计数就是正确的

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

bash 中批量创建操作文件

需要调用 bash 的 API（创建删除目录，创建删除文件，循环，操作中增加变量的写法）

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

使用 for-do-done 完成循环（for循环的条件在外面，注意是两个点）删除文件无法回退，注意脚本执行