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循环的条件在外面,注意是两个点)删除文件无法回退,注意脚本执行

你可能感兴趣的:(JavaScript,web前端,读书笔记)