题目

截图怎么实现

• 获取某块区域的dom
• dom转canvas (htmlToCanvas插件)
• canvas转二进制(canvas.toBolb方法，剪贴板不支持base64)
• 复制二进制图像(浏览器对jpeg的兼容性不太好，这里用png)到剪贴板(navigator.clipboard.write)

二叉树层序遍历, 每层的节点放到一个数组里

链表中环的入口节点

64个运动员, 8个跑道, 如果要选出前四名, 至少跑几次

• 8*8取每组前4，8次
• 然后把八个4的第一名薅出来比赛，1次，这个时候就只需要前4*4

A1	A2	A3	A4
B1	B2	B3	B4(舍弃)
C1	C2	C3(舍弃)	C4(舍弃)
D1	D2(舍弃)	D3(舍弃)	D4(舍弃)

• A1自动晋级，肯定跑的最快，剩余A2 A3 A4 B1 B2 B3 C1 C2比赛，如果C1是第四名及以后，就不需要加赛(C1如果是第二或者第三，就要考虑D1和其他人的关系)
• 10或者11

几个手写

Function.prototype.myBind = function (context) {
    let args = Array.prototype.slice.call(arguments, 1)
    let _this = this;
    return function F() {
        let newArgs = Array.prototype.slice.call(arguments)
        return _this.apply(this instanceof F ? this : context, args.concat(newArgs))
    }
}

function add(a, b, c, d) {
    console.log(a, b, c, d);
    console.log(this);
}

const newFn = add.myBind('ctx', 1, 2);
const res = new newFn(3, 4)
console.log(res);
newFn(5, 6)

Function.prototype.myCall = function (ctx, ...args) {
    // 注意这里不要写window因为可能是node
    // 如果传进来的是基本类型，包裹成对象
    var ctx = ctx ? Object(ctx) : globalThis
    // Symbol保证唯一性
    var key = Symbol()
    ctx[key] = this
    var result = ctx[key](...args)
    delete ctx[key]
    return result
}

function add(a, b) {
    console.log(this, a, b);
    return a + b
}
console.log(add.myCall(1, 3, 5));

Function.prototype.myApply = function (context) {
    let _this = context ? Object(context) : globalThis;
    const prop = Symbol()
    _this[prop] = this;
    let args = arguments[1]
    let result;
    if (Array.isArray(args)) {
        result = _this[prop](...args);
    } else {
        result = _this[prop]();
    }
    delete _this[prop]
    return result
}

// 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不是能找到类型的prototype
function myInstanceof(left, right) {
    // 获得类型的原型
    let prototype = right.prototype
    // 获得对象的原型
    left = left.__proto__
    // 判断对象的类型是否等于类型的原型
    while (true) {
        if (left === null) return false
        if (prototype === left) return true
        left = left._proto_
    }
}

链式调用

// dispatch('a').exec(); // 输出a

// dispatch('a').println('b').exec(); // 输出a b

// dispatch('a').wait(3).println('b').exec(); // 输出a 延迟三秒 b

// dispatch('a').waitFirst(3).println('b').exec(); // 延迟三秒 输出a b

function dispatch(str) {
    function printFunc(_str) {
        return () => new Promise((resolve, reject) => {
            console.log(_str)
            resolve(_str)
        })
    }
    let tasks = [printFunc(str)];
    return {
        println(text) {
            tasks.push(printFunc(text));
            return this;
        },
        wait(seconds) {
            tasks.push(() => new Promise(resolve => setTimeout(resolve, seconds * 1000)));
            return this;
        },
        waitFirst(seconds) {
            tasks.unshift(() => new Promise(resolve => setTimeout(resolve, seconds * 1000)));
            return this;
        },
        exec() {
            tasks.reduce((prev, next) => {
                return prev.then(next);
            }, Promise.resolve());
            tasks = [];
        }
    };
}

获取值的类型

function getType(value) {
    if (value === null) return 'null'
    if (typeof value === 'object') {
        return Object.prototype.toString.call(value).slice(8, -1).toLowerCase()
    } else {
        return typeof value;
    }
}

console.log(getType(1))//number
console.log(getType("1"))// string
console.log(getType(null))//null
console.log(getType(undefined))// undefined
console.log(getType({}))// object
console.log(getType(function () { }))//function
console.log(getType([]))// array

解析url参数

function getUrlParams(url) {
    let reg = /([^?&=]+)=([^?&=]+)/g
    let obj = {}
    url.replace(reg, function () {
        obj[arguments[1]] = arguments[2]
    })
    return obj
}

let url = 'https://www.junjin.cn?a=1&b=2'
console.log(getUrlParams(url)) // { a: 1, b: 2 }