Js常见手写题总结（作者手写）

于 2023-12-26 10:10:37 发布
阅读量374 收藏 7
点赞数 6
文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42089660/article/details/135215083
版权

Js常见手写题总结

间隔时间打印

0-9每间隔1s打印一个数字。

async/await

(async () => {
    for (let i = 0; i < 10; ++i) {
        await new Promise(resolve => {
            console.log(i);
            setTimeout(resolve, 1000);
        });
    }
})();

模拟递归调用

const print = (start, end) => {
    if(start >= end) return void 0;
    new Promise(resolve => {
        setTimeout(resolve, 1000);
    }).then(() => {
        console.log(start);
        print(start + 1, end);
    })
}
print(0, 10);

构造链式调用

let promiseChain = Promise.resolve();
(() => {
    for (let i = 0; i < 10; ++i) {
        promiseChain = promiseChain.then(() => {
            console.log(i);
            return new Promise(resolve => setTimeout(resolve, 1000));
        });
    }
})();

不使用let

let promiseChain = Promise.resolve();
(() => {
    for (var i = 0; i < 10; ++i) {
        (i => {
            promiseChain = promiseChain.then(() => {
                console.log(i);
                return new Promise(resolve => setTimeout(resolve, 1000));
            });
        })(i);
    }
})();

Promise

实现Promise与then

实现Promise与then

实现Promise.all

const promiseFactory = delay => new Promise(r => setTimeout(() => r(delay), delay));
const promiseAll = promises => {
    return new Promise((resolve, reject) => {
        const promiseStatus = new Array(promises.length).fill(false);
        const result = new Array(promises.length).fill(null);
        promises.forEach((item, index) => {
            item.then(res => {
                result[index] = res;
                promiseStatus[index] = true;
                if(promiseStatus.every(it => it)) resolve(result);
            }).catch(err => {
                result[index] = err;
                reject(result);
            })
        })
    })
}
promiseAll([
    promiseFactory(1000),
    promiseFactory(2000),
    promiseFactory(3000),
]).then(console.log); // 三秒后输出 [1000, 2000, 3000]

排序

常见排序与复杂度

常见排序与复杂度

字典序排序

const arr = [123, 356, 2, 6, 999, 311];
arr.sort();
console.log(arr); // [123, 2, 311, 356, 6, 999]

最大的第K个数

const adjust = (index, arr) => {
    let changeIndex = -1;
    const n = arr.length;
    if(index < n && arr[index] < arr[index * 2 + 1]){
        changeIndex = index * 2 + 1;
        [arr[index], arr[index * 2 + 1]] = [arr[index * 2 + 1], arr[index]];
    }
    if(index < n && arr[index] < arr[index * 2 + 2]){
        changeIndex = index * 2 + 2;
        [arr[index], arr[index * 2 + 2]] = [arr[index * 2 + 2], arr[index]];
    }
    if(changeIndex !== -1) adjust(changeIndex, arr);
}
const find = (arr, k) => {
    for(let n = arr.length, i = n-1; i>=0; --i) adjust(i, arr);
    for(let i=0; i<k-1; ++i){
        arr.shift();
        [arr[0], arr[arr.length - 1]] = [arr[arr.length - 1], arr[0]];
        adjust(0, arr);
    }
    console.log(arr.shift());
}
const k = 3;
const arr = [4, 3, 5, 1, 6, 2, 7, 8];
find(arr, k);

防抖和节流

// 防抖
const d = function(time, funct, ...args){
    let timer = null;
    return () => {
        clearTimeout(timer);
        timer = null;
        timer = setTimeout(() => funct(...args), time);
    }
}
window.onscroll = d(1000, (a) => console.log(a), 1);

// 节流
const t = function(time, funct, ...args){
    let timer = null;
    return () => {
        if(!timer){
            funct(...args);
            timer = setTimeout(() => {
                clearTimeout(timer);
                timer = null;
            }, time);
        }
    }
}
window.onscroll = t(1000, (a) => console.log(a), 1);

继承

// 寄生组合继承
function Parent(from){
    this.name = "parent";
    this.say = function(){
        console.log(this.name);
    }
    this.from = from;
}
function Child(from){
    Parent.call(this, from);
    this.name = "child";
}
let f = function(){};
f.prototype = Parent.prototype;
Child.prototype = new f();
Child.prototype.construce = Child;
let child = new Child("child");
child.say(); // child
console.log(child.from); // child

十进制转二进制

计算

(function(num){
    num = num >> 0;
    const target = [];
    while(num){
        target.unshift(num % 2);
        num = (num / 2) >> 0;
    }
    console.log(target.join(""));
})(10);

API

console.log(Number(10).toString(2));

带并发限制的异步调度器

Js实现一个带并发限制的异步调度器Scheduler，保证同时运行的任务最多有两个。

// Start
class Scheduler {
    constructor() {
        this.max = 2;
        this.task = [];
        this.pending = [];
    }
    add(fn){
        const dispatch = () => {
            for(let i=0; i<this.max; ++i){
                if(!this.task[i] && this.pending.length){
                    const runFn = this.pending.shift();
                    this.task[i] = true;
                    runFn().then(() => {
                        this.task[i] = false;
                        runFn.resolve();
                        dispatch();
                    })
                }
            }
        }
        const pr = new Promise(resolve => {
            fn.resolve = resolve;
            this.pending.push(fn);
        });
        dispatch();
        return pr;
    }
}
// End
const timeout = (time) => new Promise(resolve => {
    setTimeout(resolve, time);
})
const scheduler = new Scheduler();
const addTask = (time, order) => {
    scheduler
    .add(() => timeout(time))
    .then(() => console.log(order));
}
addTask(2000, "1");
addTask(1000, "2");
addTask(3000, "3");
addTask(2000, "4");
// 2  第一秒
// 1  第二秒
// 3  第四秒
// 4  第四秒

// Start
class Scheduler {
    constructor() {
        this.max = 2;
        this.task = [];
        this.pending = [];
    }
    add(fn){
        return new Promise(resolve => {
            fn.resolve = resolve;
            if(this.task.length < this.max) {
                this.dispatch(fn);
            } else {
                this.pending.push(fn);
            }
        })
    }
    dispatch(pr){
        this.task.push(pr);
        pr().then(() => {
            pr.resolve();
            this.task.splice(this.task.indexOf(pr), 1);
            if(this.pending.length) {
                this.dispatch(this.pending.shift());
            }
        })
    }
}
// End
const timeout = (time) => new Promise(resolve => {
    setTimeout(resolve, time);
})
const scheduler = new Scheduler();
const addTask = (time, order) => {
    scheduler
    .add(() => timeout(time))
    .then(() => console.log(order));
}
addTask(2000, "1");
addTask(1000, "2");
addTask(3000, "3");
addTask(2000, "4");
// 2  第一秒
// 1  第二秒
// 3  第四秒
// 4  第四秒

拍平数组

迭代式

const arr = [1, [2, 3], [[[4, 5, 6]], [7, 8, 9]]];
const flat = (arr) => {
    let i = 0;
    const newArray = [...arr];
    while(i < newArray.length){
        if(Array.isArray(newArray[i])){
            const tmp = newArray[i];
            newArray.splice(i, 1, ...tmp);
        }else{
            ++i;
        }
    }
    return newArray;
}
console.log(flat(arr));

递归式

const arr = [1, [2, 3], [[[4, 5, 6]], [7, 8, 9]]];
const flat = (arr) => {
    const newArray = [];
    arr.forEach(item => {
        if(Array.isArray(item)) newArray.push(...flat(item));
        else newArray.push(item);
    })      
    return newArray;
}
console.log(flat(arr));

手写apply、call、bind

Function.prototype._apply = function(base, args){
    base.fn = this;
    const result = base.fn(...args);
    delete base.fn;
    return result;
}
Function.prototype._call = function(base, ...args){
    return this._apply(base, args);
}
Function.prototype._bind = function(base, ...args){
    const functionArgsLength = this.length;
    const curArgsLength = args.length;
    if(curArgsLength >= functionArgsLength){
        return this._apply(base, args);
    }else{
        return (...newArgs) => {
            return this._bind(base, ...args, ...newArgs);
        }
    }
}
function fn(num1, num2){
    console.log(this.num, num1, num2);
}
const obj = { num: 1 }
fn._apply(obj, [2, 3]);
fn._call(obj, 4, 5);
fn._bind(obj)(6)(7);

new操作符

function Student(name){
    this.name = name;
}
Student.prototype.say = function(){
    console.log("I'm", this.name);
}
const _new = (fn, ...args) => {
    const obj = Object.create(fn.prototype);
    const res = fn.apply(obj, args);
    if ((typeof res === "object" && res !== null) || typeof res === "function") {
        return res;
    }
    return obj;
}
const student = _new(Student, "A");
console.log(student);
student.say();

数组去重

Set

const arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
const newArr = Array.from(new Set(arr)); // [...(new Set(arr))]
console.log(newArr); // [1, 2, 3, 5]

indexOf

// 使用find、findIndex、includes思路相同
const arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
const newArr = [];
arr.forEach((v) => {
    if(newArr.indexOf(v) === -1)  newArr.push(v);
})
console.log(newArr); // [1, 2, 3, 5]

利用对象

const arr = [1, 2, 3, 1, 1, 1, 3, 5, 3];
const obj = {};
arr.forEach((v) => {
    if(!obj[v]) obj[v] = 1;
})
console.log(Object.keys(obj).map(item => Number(item))); // [1, 2, 3, 5]

串行执行Promise

reduce

const arr = [
    () => Promise.resolve(1),
    res => Promise.resolve(res * 2),
    res => Promise.resolve(res * 2),
    res => Promise.resolve(res * 3),
    res => new Promise(r => setTimeout(() => r(res), 1000))
];
arr.reduce((pre, cur) => {
    return pre.then(res => cur(res));
}, Promise.resolve()).then(res => {
    console.log(res);
});

async/await

const arr = [
    () => Promise.resolve(1),
    res => Promise.resolve(res * 2),
    res => Promise.resolve(res * 2),
    res => Promise.resolve(res * 3),
    res => new Promise(r => setTimeout(() => r(res), 1000))
];
(async () => {
    let preResult = null;
    for (let i = 0; i < arr.length; i++) {
        const fn = arr[i];
        preResult = await fn(preResult);
        console.log(preResult);
    }
})();

远程相加

假如现在本地无法实现加法功能，现有其他团队提供的远程Api可以实现两个数相加的功能，现需要改进Api使其能够实现多个数相加。

const addRemote = (a, b) => {
    return new Promise(r => setTimeout(r, 1000, a + b));
}
const add = (...args) => {
    const cur = [].concat(args);
    return new Promise(r => {
        if(cur.length % 2 === 1) cur.push(0);
        const batchAdd = [];
        for(let i=0; i<cur.length; i += 2){
            batchAdd.push(addRemote(cur[i], cur[i+1]));
        }
        Promise.all(batchAdd).then(res => {
            if(res.length === 1){
                r(res.pop());
            }else{
                add(...res).then(r);
            }
        })
    })
}
add(1, 2, 4, 5, 6).then(res => console.log(res));
曲永庆的小屋
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js手写题汇总（面试前必刷）
helloworld1024fd的博客
11-09 1276
实现node中回调函数的机制，node中回调函数其实是内部使用了观察者模式。 实现Event(event bus) event bus既是node中各个模块的基石，又是前端组件通信的依赖手段之一，同时涉及了订阅-发布设计模式，是非常重要的基础。简单版： 面试版： 模板引擎实现 实现深拷贝 浅拷贝： 浅拷贝指的是将一个对象的属性值复制到另一个对象，如果有的属性的值为引用类型的话，那么会将这个引用的地址复制给对象，因此两个对象会有同一个引用类型的引用。浅拷贝可以使用 Object.assign 和展开
前端常见手写题、算法题
04-25
css、js常见手写题、js继承相关、js数组相关、排序算法、设计模式、树场景题、异步相关、正则相关、组件设计
js常见的手写代码题
weixin_46947007的博客
04-09 101
【代码】js常见的手写代码题。
14道高频手写JS面试题及答案，巩固你的JS基础
qq_49900295的博客
08-07 2023
作为前端开发，JS是重中之重，最近结束了面试的高峰期，基本上offer也定下来了就等开奖，趁着这个时间总结下14个手写JS问题，这些都是高频面试题，希望对你能有所帮助。
36个JS手写题
m0_59628052的博客
09-14 1107
数据类型判断 typeof 可以正确识别：Undefined、Boolean、Number、String、Symbol、Function 等类型的数据，但是对于其他的都会认为是 object，比如 Null、Date 等，所以通过 typeof 来判断数据类型会不准确。但是可以使用 Object.prototype.toString 实现。 function typeOf(obj) { - let res = Object.prototype.toString.call(obj).split('
常见的js手写题【总结】
weixin__BJ050106的博客
08-09 294
努力!奋斗!爱折腾的程序员, 不会没关系, 最重要的是我们一起学习!~常见的 js手写大家经常会在工作面试中遇到, 这次也总结了一些,发现有很多js的文章, 我也总结了下自己的经常的用到的,方便自己学习,今天也给大家分享出来, 欢迎大家一起学习交流, 有更好的方法欢迎评论区指出, 后序我也将持续整理总结,也欢迎补充其他的js手写~...
前端面试常见手写题整理.zip
02-28
前端面试常见手写题整理.zip
fe-interview-handwrite:前端面试常见手写题整理
04-27
前端面试手写题整理前端面试常见的手写题，面试出现概率极高，建议每个都过自己过一遍。你也可以提交 PR，提供你面试遇到的题目。代码汇总请参照 。高频：★★★ 中频：★★ 低频：★JavaScript 原理 ★★ ★★ ★★...
JavaScript_天天造轮子手写面试常见源码.zip
最新发布
05-20
JavaScript
js手写程序代码面试题es6语法实现
07-03
常见代码面试题精选记录：包括斐波那契数列、递归方法求斐波那契数列第n项、动态规划方法求斐波那契数列第N项、数组最大最小值、输入数组重复元素以及个数、数组交集，补集，并集、数组结构加工、.数组求和
JavaScript 常见手写题汇总
JackChan
12-30 237
JavaScript 常见手写题汇总
2021-04-05
m0_55857594的博客
04-05 176
数据类型判断 typeof 可以正确识别：Undefined、Boolean、Number、String、Symbol、Function 等类型的数据，但是对于其他的都会认为是 object，比如 Null、Date 等，所以通过 typeof 来判断数据类型会不准确。但是可以使用 Object.prototype.toString 实现 function typeOf(obj) { let res = Object.prototype.toString.call(obj).split(’ ')[1] re
最全的手写JS面试题
Rainydaysqu的博客
08-04 444
1 compose 题目描述:实现一个 compose 函数 // 用法如下: function fn1(x) { return x + 1; } function fn2(x) { return x + 2; } function fn3(x) { return x + 3; } function fn4(x) { return x + 4; } const a = compose(fn1, fn2, fn3, fn4); console.log(a(1)); // 1+4+3+2+
手写js面试题集
weixin_34050519的博客
04-11 266
实现一个遍历domtreefunction domtree(dom,index=0){ index++;//domtree深度 if (dom.nodeType === Node.ELEMENT_NODE) { console.log(dom.tagName+":"+index) } let childNodes = dom.childNodes; for (let i=0;i&lt...
死磕 36 个 JS 手写题（搞懂后，提升真的大）
程序员小明1024
07-17 219
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rgba(51, 51, 51, 1) } .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .ma...
JS 常见手写题
刘鹏翔的一些分享
06-20 884
1，new 的过程； function myNew(func) { let res = {}; if (func.prototype !== null) { res.__proto_ = unc.prototype; } let ret = func.apply(re...
js手写题总结
Tarafireworks的博客
10-19 125
大数相加 function add(num1, num2) { var l1 = num1.length; var l2 = num2.length; var k = 0; var arr = []; var l = Math.max(l1,l2); for(let i = 0;i <l;i++){ k += Number(num1.charAt(l1-i-1))+Number(num2.charAt(l2-i-1));
22 道高频 JavaScript 手写题及答案
qq2276031的博客
05-03 466
JavaScript笔试部分 实现防抖函数（debounce） 防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。 那么与节流函数的区别直接看这个动画实现即可。 手写简化版: // 防抖函数 const debounce = (fn, delay) => { let timer = null; return (.....
盘点那些 JS 手写题
p1967914901的博客
04-02 844
盘点那些 JS 手写题盘点那些 JS 手写题1. JS 基础1. 手写 Object.create2. 手写 instanceof 方法3. 手写 new 操作符4. 手写一个通用的类型检测方法5. 手写 call 函数6. 手写 apply 函数7. 手写 bind 函数8. 手写 Array.isArray9. 手写数组的 flat 方法10. 手写数组的 push 方法11. 手写数组的 filter方法12. 手写数组的 map 方法13. 手写字符串的 repeat 方法14. 手写 Promis
JS API的手写题有哪些
07-14
JS API的手写题主要包括以下几个方面： 1. DOM 操作：手写实现常见的 DOM 操作，如获取元素、添加/删除元素、修改元素属性等。 2. Ajax 请求：手写实现使用原生 JavaScript 发起 Ajax 请求，包括发送 GET/POST ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值