【第三期】本週咱們 37 人學了什麼

程序員這行若是想一直作下去，那麼持續學習是必不可少的。

你們找工做一般會喜歡技術氛圍好點的團隊，由於這樣可以幫助本身更好的成長，可是並非每一個團隊都擁有這樣的氛圍。因而萌發一個念頭，想創建一個地方，讓一些人能在這塊地方記錄本身學習到的內容。這些內容一般會是一個小點，可能並不足以寫成一篇文章。可是這個知識點可能不少人也不知道，那麼經過這種記錄的方式讓別人一樣也學習到這個知識點就是一個很棒的事情了。

若是你也想參與這個記錄的事情，歡迎貢獻你的一份力量，地址在這裏。

本週總共有 37 人貢獻了他們所學到的知識，選取了一部分不錯的分享並整合成文，更詳細的內容推薦前往倉庫閱讀。

TS 中使用 typeof 關鍵字能夠自動獲取數據類型

在寫 React 項目時，有些時候，你的 state 可能會有默認值，好比：

const initialState = {
   username: '',
   mobile: '',
   isVip: false,
   addresses: [],
}

type IState = typeof initialState

class Comp extends Component<any, IState> {
   constructor(props) {
        super(props);
        this.state = {
            ...initialState
        };
    }
}
複製代碼

這樣就不用分開定義 state 的初始值和 state 的類型了。

位運算

請注意 位運算適用於 32 位整數，因此精度可能會丟失

• 用 "|" 取整

let num=1.5
num=num|0; // 1
複製代碼

• 用 ">>" 取半

let num=4;
num=num>>1; // 2
複製代碼

• 用 ">>" 加倍

let num=2;
num=num<<1; / / 4
複製代碼

• 用 "^" 兩值交換

let a=1;
let b=2;

a^=b;
b^=a;
a^=b;
// a===2,b===1
複製代碼

• 用 "&" 判斷奇數

let n=3;
let m=4;
n&1===1; // true 奇數
m&1===1; // false 偶數
複製代碼

• 用 "~" 判斷項是否存在

let firstname="Ma";
let fullname="Jack Ma";
let isExist=!!~fullname.indexOf(firstname); // true
複製代碼

arguments 的坑

注意嚴格模式下，沒有這個問題

• 當非嚴格模式中的函數 沒有 包含 剩餘參數、默認參數和解構賦值，那麼arguments對象中的值會跟蹤參數的值（反之亦然）

function sidEffecting(ary) {
  ary[0] = ary[2];
}
function bar(a,b,c) {
  c = 10 // 注意這裏，其實它修改的就是 arguments 對象裏的參數
  sidEffecting(arguments);
  return a + b + c;
}
bar(1,1,1);   // 21
複製代碼

• 當非嚴格模式中的函數 有 包含剩餘參數、默認參數和解構賦值，那麼arguments對象中的值不會跟蹤參數的值（反之亦然）

function sidEffecting(ary) {
  ary[0] = ary[2];
}
function bar(a,b,c=3) {
  c = 10
  sidEffecting(arguments);
  return a + b + c;
}
bar(1,1,1); // 12
複製代碼

用canvas實現文字漸變效果

var context = canvas.getContext('2d')
var g = context.createLinearGradient(0,0,canvas.width,0)
g.addColorStop(0, 'red')
g.addColorStop(0.5, 'blue')
g.addColorStop(1, 'purple')
context.fillStyle = g
context.font = '36px fantasy'
context.fillText('hello canvas', 0, 100)
複製代碼

效果動圖

ES6 proxy 深度代理一個對象

function deepProxy(object, handler) {
    if (isComplexObject(object)) {
        addProxy(object, handler);
    }
    return new Proxy(object, handler);
}

function addProxy(obj, handler) {
    for (let i in obj) {
        if (typeof obj[i] === 'object') {
            if (isComplexObject(obj[i])) {
                addProxy(obj[i], handler);
            }
            obj[i] = new Proxy(obj[i], handler);
        }
    }
}

function isComplexObject(object) {
    if (typeof object !== 'object') {
        return false;
    } else {
        for (let prop in object) {
            if (typeof object[prop] == 'object') {
                return true;
            }
        }
    }
    return false;
}

let person = {
    txt: 123,
    name: 'tnt',
    age: 26,
    status: {
        money: 'less',
        fav: [1, 2, 3]
    }
};
let proxyObj = deepProxy(person, {
    get(target, key, receiver) {
        console.log(`get--${target}--${key}`);
        return Reflect.get(target, key);
    },
    set(target, key, value, receiver) {
        console.log(`set--${target}--${key}-${value}`);
        return Reflect.set(target, key, value);
    }
});
proxyObj.status.test = 13;
proxyObj.status.fav.push('33');
複製代碼

格式化秒爲 04:19 類型的小函數

const convertDuration = time => {
  let minutes = Math.floor(time / 60);
  let seconds = Math.floor(time - minutes * 60);
  minutes = String(minutes).length < 2 ? String(minutes).padStart(2,'0'): minutes;
  seconds = String(seconds).length < 2 ? String(seconds).padStart(2,'0'): seconds;
  return minutes + ":" + seconds;
};

convertDuration(308); // 05:08
convertDuration(6000); // 100:00
複製代碼

hooks 與 react-hot-loader 衝突

以前把老的 React 項目升級成了最新版，在使用 hooks 的時候遇到了一個問題。當時經過谷歌找到了問題所在，升級了 react-hot-loader 包之後就順便解決了問題，爲了繼續作工做就沒有具體去了解緣由。

今天有時間了就搜索了一番資料，總結了一下內容：

在正確使用 hooks 的狀況下出現瞭如下報錯：

Uncaught Error: Hooks can only be called inside the body of a function component. 複製代碼

Hooks 確實有限制必須在函數組件中使用，可是我確實正確的使用了。因而搜索了一波資料，發現了一個 issus 出現了與我同樣的問題：Incompatibility with react-hot-loader。

在閱讀 issus 的過程當中，發現 react-hot-loader 開發者給出了以下解答：

大體意思是無狀態組件（也就是函數組件）會被轉換成類組件，這是由於無狀態組件沒有更新的方法。

所以搜索了下 react-hot-loader 的工做原理，發現官方一樣給出了一份文檔：How React Hot Loader works。

內容中有說到爲了渲染 react-tree，不得不把全部的無狀態組件都轉換成了無狀態的類組件。

最後

這周的分享內容質量很高，我也從中汲取到了一些知識。

這是一個須要你們一塊兒分享才能持續下去的事情，光靠我一人分享是作不下去的。歡迎你們參與到這件事情中來，地址在這裏。

最後，你們也能夠加羣一同交流與學習。