前端小知识10点(2020.2.10)
1、js精度问题
为什么0.1+0.2=0.30000000000000004？
详细推导过程，请看：
JavaScript之0.1+0.2=0.30000000000000004的计算过程
2、Number.toFixed() 的 bug
注意返回结果是字符串
1.005.toFixed(2) // '1.00'
没有返回'1.01'的原因：
1.005在 JS 中的存储值是1.00499999999999989，四舍五入得1.00
推荐使用 number-precision(https://github.com/nefe/number-precision) 来消除误差，精准进行四则运算
3、git fetch 更新分支
应用场景：
当你将本地的新分支上传到 remote 后，另一开发使用git branch -a没有查看到你上传到remote的新分支
当你将本地的新分支上传到 remote 后，其他开发可执行
git fetch
git branch -a
git checkout [新分支]
来更新、查看、切换到新分支
4、git cherry-pick [commit-id] 在分支A上合并分支B的某次commit
应用场景： 当你只想把分支 A 的某一次 commit 合并到分支 B 上的时候
使用：
git checkout branchA
//查看并复制某次 commit-id
git log
git checkout branchB
//将 branchA 的某次 commit 合并至 branchB 中
git cherry-pick [commit-id]
5、Object.is
① 关于Object.is()的作用及用法，请看：
React源码解析之PureComponet的浅比较
② Object.is与===的区别：
+0 === -0 //true
Object.is(+0,-0) //false
//NaN 即 window.NaN 是es5 的
//Number.NaN 是 es6 的
Number.NaN === NaN //false
Object.is(Number.NaN,NaN) //true
参考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description
6、leaflet-path-drag库设置某个图形的draggable为true时，如何移除该图形
import L from "leaflet";
import "leaflet-editable";
import "leaflet-path-drag";
const item = L.circle(e.latlng, {
radius: 4,
draggable: true,
fillOpacity: 1,
}).addTo(map);
设置draggable后，不能直接调用remove移除：
//item.remove() 会抛出错误，看的源码才找出如何调用的
item._path.remove()
7、JS 数组去重的几种方式
最简单的：
const newArr = [...new Set(arr)]
除此之外的其他方法也能帮助你对数据结构了解的更深入： https://www.cnblogs.com/zhishaofei/p/9036943.html
8、JS 中的 & 是什么意思
例：
12 & 6 = ?
解释：
&表示位的与运算，将十进制数字转为二进制，然后每一位进行比较，有1且相等就为1，否则为0，注意——true强制转换为1，false强制转换为0
计算过程：
//12
1100
//6
0110
//=
0100 // 4
所以
12 & 6 = 4
9、getDerivedStateFromProps
getDerivedStateFromProps 的存在只有一个目的：让组件在 props 变化时更新 state
也就是说：当你组件state的值在任何时候都取决于props，那就使用它：
class ExampleComponent extends React.Component {
state = {
isScrollingDown: false,
lastRow: null,
};
static getDerivedStateFromProps(props, state) {
if (props.currentRow !== state.lastRow) {
return {
isScrollingDown: props.currentRow > state.lastRow,
lastRow: props.currentRow,
};
}
// 返回 null 表示无需更新 state。
return null;
}
}
详情请参考： https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops
https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state
https://zh-hans.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
10、getSnapshotBeforeUpdate
getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。
也就是说当你想获取滚动位置，DOM 元素尺寸的时候，就是用它：
class ScrollingList extends React.Component {
constructor(props) {
super(props);
this.listRef = React.createRef();
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// 我们是否在 list 中添加新的 items ？
// 捕获滚动位置以便我们稍后调整滚动位置。
if (prevProps.list.length < this.props.list.length) {
const list = this.listRef.current;
return list.scrollHeight - list.scrollTop;
}
return null;
}
componentDidUpdate(prevProps, prevState, snapshot) {
// 如果我们 snapshot 有值，说明我们刚刚添加了新的 items，
// 调整滚动位置使得这些新 items 不会将旧的 items 推出视图。
//（这里的 snapshot 是 getSnapshotBeforeUpdate 的返回值）
if (snapshot !== null) {
const list = this.listRef.current;
list.scrollTop = list.scrollHeight - snapshot;
}
}
render() {
return (
<div ref={this.listRef}>{/* ...contents... */}</div>
);
}
}
详情请参考： https://zh-hans.reactjs.org/docs/react-component.html#getsnapshotbeforeupdate
小进进还没开通留言功能，觉得不错的话，点「在看」、转发朋友圈都是一种支持 (●'◡'●)ﾉ 。
腾讯云开发者
