今日学习总结

好看的代码截图网站

好看的代码截图网站

utf-8转中文

var value = '&#x6210'
function utfTranslate(value){
    return unescape(value.replace(/&#x/g,'%u').replace(/\u/g,'%u').replace(/;/g,''))
}
utfTranslate(value)
//成

正常script、asycn、defer

之前我知道defer最好，但不求甚解，看了这个图，清晰多了。

deno

deno今天正式发布了，点击: 了解一下 去 => github地址

in运算符

今天看到实现map等数组方法里，通过下标是否in数组来判断当前这一项是否为空。重新认识一下in运算符：

如果指定的属性在指定的对象或其原型链中，则in运算符返回true。

prop in object

prop: 一个字符串类型或者symbol类型的属性名或者数组索引（非symbol类型将会强制转为字符串）。

如何创建一个包含数字1-50的数组

今天别人问我一个这样的问题，我想了下，其实原理是创建一个50个值的数组，然后通过数组一些方法返回的下标进行重新构建新数组，或者通过array from的回调函数返回下标组成的数组，这样可以写出很多炫技的写法。

Array.from({length:100}, (v, k) => k)

Array.from(Array(100), (v, k) =>k)

//这个比较特殊，keys直接返回索引键的迭代器对象
Array.from(new Array(100).keys())

new Array(50).fill(0).map((v, k) => k)

Object.keys(Array.apply(null, {length: 100})).map(v => +v)

Object.keys(Array(100).fill(0)).map(v => +v)

>> 以及 >>>

看实现数组的一些方法里，使用了>>>，同时也引申出了>>，它们有什么异同呢?
>>(有符号移位)：该操作符会将第一个操作数向右移动指定的位数。向右被移出的位被丢弃，拷贝最左侧的位以填充左侧

-9 >> 2
11111111111111111111111111110111  // -9 -> 11111111111111111111111111111101   // -3

>>>(无符号移位)：该操作符会将第一个操作数向右移动指定的位数。向右被移出的位被丢弃，左侧用0填充。因为符号位变成了 0，所以结果总是非负的

9 >>> 2
00000000000000000000000000001001   // 9 ->  00000000000000000000000000000010 // 2

移位0有什么意义?

原来移位操作符在移位前做了两种转换，第一将不是number类型的数据转换为number，第二将number转换为无符号的32bit数据，也就是Uint32类型。

Uint32类型是如何转换的?

1. 如果不能转换为Number，那就为0
2. 如果为非整数，先转换为整数，参考公式sign(n) ⋅ floor(abs(n))

function ToInteger(x) {
    x = Number(x);
    return x < 0 ? Math.ceil(x) : Math.floor(x);
}

3. 如果是正数，返回正数
4. 如果是负数，返回负数 + 2的32次方

function modulo(a, b) {
    return a - Math.floor(a / b) * b;
}
function ToUint32(x) {
    return modulo(ToInteger(x), Math.pow(2, 32));
}

使用提前return消灭不必要的else语句

反向思考，让人耳目一新，值得借鉴

实现数组map方法

        Array.prototype.map = function (callbackfn, thisArg) {
            // 处理数组类型异常
            if (this === null || this === undefined) {
                throw new TypeError("Cannot read property 'map' of null or undefined");
            }
            // 处理回调类型异常
            if (Object.prototype.toString.call(callbackfn) != "[object Function]") {
                throw new TypeError(callbackfn + ' is not a function')
            }

            // 草案中提到要先转换为对象
            let O = Object(this);
            let T = thisArg;

            let len = O.length >>> 0;
            let A = new Array(len);
            for (let k = 0; k < len; k++) {
                // in 表示在原型链查找
                // 如果用 hasOwnProperty 是有问题的，它只能找私有属性
                if (k in O) {
                    let kValue = O[k];
                    // 依次传入this, 当前项，当前索引，整个数组
                    let mappedValue = callbackfn.call(T, kValue, k, O);
                    A[k] = mappedValue;
                }
            }
            return A;
        }

        const arr = new Array(10)
        arr[5] = 5
        arr.map(v => {
            return v.a
        })
        // [empty × 5, 5, empty × 4]

实现数组reduce方法

        Array.prototype.reduce = function (callbackfn, initialValue) {
            // 异常处理，和 map 一样
            // 处理数组类型异常
            if (this === null || this === undefined) {
                throw new TypeError("Cannot read property 'reduce' of null or undefined");
            }

            // 处理回调类型异常
            if (Object.prototype.toString.call(callbackfn) != "[object Function]") {
                throw new TypeError(callbackfn + ' is not a function')
            }

            let O = Object(this);
            let len = O.length >>> 0;
            let k = 0;
            let accumulator = initialValue;

            // 没有初始值
            if (accumulator === undefined) {
                for (; k < len; k++) {
                    // 查找原型链
                    if (k in O) {
                        accumulator = O[k];
                        k++;
                        console.log(k)
                        break;
                    }
                }
            }
            
            // 表示数组全为空
            if (k === len && accumulator === undefined) {
                throw new Error('Each element of the array is empty');
            }
            for (; k < len; k++) {
                if (k in O) {
                    // 注意，核心！
                    accumulator = callbackfn.call(undefined, accumulator, O[k], k, O);
                }
            }
            return accumulator;
        }