前端小知識10點

時間 2020-02-26

標籤前端知識 10點简体版

原文原文鏈接

一、js精度問題：爲何0.1+0.2=0.30000000000000004？
詳細推導過程，請看：JavaScript之0.1+0.2=0.30000000000000004的計算過程javascript

二、 Number.toFixed() 的 bughtml

  注意返回結果是字符串 
  1.005.toFixed(2) // '1.00'
複製代碼

沒有返回'1.01'的緣由：
1.005在 JS 中的存儲值是1.00499999999999989，四捨五入得1.00java

推薦使用 number-precision 來消除偏差，精準進行四則運算react

三、git fetch 更新分支
應用場景：
當你將本地的新分支上傳到 remote 後，另外一開發使用git branch -a沒有查看到你上傳到remote的新分支git

當你將本地的新分支上傳到 remote 後，其餘開發可執行es6

git fetch
git branch -a
git checkout [新分支]
複製代碼

來更新、查看、切換到新分支github

四、git cherry-pick [commit-id] 在分支A上合併分支B的某次commit
應用場景：
當你只想把分支 A 的某一次 commit 合併到分支 B 上的時候web

使用：sql

git checkout branchA
//查看並複製某次 commit-id
git log

git checkout branchB
//將 branchA 的某次 commit 合併至 branchB 中
git cherry-pick [commit-id]
複製代碼

五、Object.is
① 關於Object.is()的做用及用法，請看：
React源碼解析之PureComponet的淺比較 apache

② 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…

十、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>
    );
  }
}
複製代碼