前端小知识10点

一、js精度问题：为何0.1+0.2=0.30000000000000004？
详细推导过程，请看：JavaScript之0.1+0.2=0.30000000000000004的计算过程

二、 Number.toFixed() 的 bug

  注意返回结果是字符串 
  1.005.toFixed(2) // '1.00'
复制代码

没有返回'1.01'的缘由：
1.005在 JS 中的存储值是1.00499999999999989，四舍五入得1.00

推荐使用 number-precision 来消除偏差，精准进行四则运算

三、git fetch 更新分支
应用场景：
当你将本地的新分支上传到 remote 后，另外一开发使用git branch -a没有查看到你上传到remote的新分支

当你将本地的新分支上传到 remote 后，其余开发可执行

git fetch
git branch -a
git checkout [新分支]
复制代码

来更新、查看、切换到新分支

四、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]
复制代码

五、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
复制代码

参考：developer.mozilla.org/en-US/docs/…

六、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()
复制代码

七、JS 数组去重的几种方式
最简单的：

  const newArr = [...new Set(arr)] 
复制代码

除此以外的其余方法也能帮助你对数据结构了解的更深刻：
www.cnblogs.com/zhishaofei/…

八、JS 中的 & 是什么意思
例：

  12 & 6 = ?
复制代码

解释：
&表示位的与运算，将十进制数字转为二进制，而后每一位进行比较，有1且相等就为1，不然为0，注意——true强制转换为1，false强制转换为0

计算过程：

  //12
  1100
  //6
  0110
  //=
  0100 // 4
复制代码

因此

  12 & 6 = 4
复制代码

九、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;
  }
}
复制代码

详情请参考：
zh-hans.reactjs.org/docs/react-…

zh-hans.reactjs.org/blog/2018/0…

zh-hans.reactjs.org/blog/2018/0…

十、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>
    );
  }
}
复制代码

详情请参考：
zh-hans.reactjs.org/docs/react-…

---

（完）