【第三期】本周咱们 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，不得不把全部的无状态组件都转换成了无状态的类组件。

最后

这周的分享内容质量很高，我也从中汲取到了一些知识。

这是一个须要你们一块儿分享才能持续下去的事情，光靠我一人分享是作不下去的。欢迎你们参与到这件事情中来，地址在这里。

最后，你们也能够加群一同交流与学习。