前端面试必须掌握的手写题

最新推荐文章于 2024-06-07 09:58:11 发布

alice11fe

最新推荐文章于 2024-06-07 09:58:11 发布

阅读量398

点赞数

文章标签：前端 javascript json

本文链接：https://blog.csdn.net/zz1999aa/article/details/126047546

版权

本文详述了前端面试中常见的手写题，包括封装异步fetch、小孩报数问题、JSONP、VirtualDOM转换、柯里化、apply与call实现、浅拷贝、发布订阅模式等，涵盖了JavaScript基础、异步处理、数据结构等多个方面，旨在帮助面试者提升技能。

摘要由CSDN通过智能技术生成

前端面试题视频讲解

封装异步的fetch，使用async await方式来使用

(async () => {
   
    class HttpRequestUtil {
   
        async get(url) {
   
            const res = await fetch(url);
            const data = await res.json();
            return data;
        }
        async post(url, data) {
   
            const res = await fetch(url, {
   
                method: 'POST',
                headers: {
   
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });
            const result = await res.json();
            return result;
        }
        async put(url, data) {
   
            const res = await fetch(url, {
   
                method: 'PUT',
                headers: {
   
                    'Content-Type': 'application/json'
                },
                data: JSON.stringify(data)
            });
            const result = await res.json();
            return result;
        }
        async delete(url, data) {
   
            const res = await fetch(url, {
   
                method: 'DELETE',
                headers: {
   
                    'Content-Type': 'application/json'
                },
                data: JSON.stringify(data)
            });
            const result = await res.json();
            return result;
        }
    }
    const httpRequestUtil = new HttpRequestUtil();
    const res = await httpRequestUtil.get('http://golderbrother.cn/');
    console.log(res);
})();
复制代码

小孩报数问题

有30个小孩儿，编号从1-30，围成一圈依此报数，1、2、3 数到 3 的小孩儿退出这个圈，然后下一个小孩重新报数 1、2、3，问最后剩下的那个小孩儿的编号是多少?

function childNum(num, count){
   
    let allplayer = [];    
    for(let i = 0; i < num; i++){
   
        allplayer[i] = i + 1;
    }

    let exitCount = 0;    // 离开人数
    let counter = 0;      // 记录报数
    let curIndex = 0;     // 当前下标

    while(exitCount < num - 1){
   
        if(allplayer[curIndex] !== 0) counter++;    

        if(counter == count){
   
            allplayer[curIndex] = 0;                 
            counter = 0;
            exitCount++;  
        }
        curIndex++;
        if(curIndex == num){
   
            curIndex = 0               
        };           
    }    
    for(i = 0; i < num; i++){
   
        if(allplayer[i] !== 0){
   
            return allplayer[i]
        }      
    }
}
childNum(30, 3)
复制代码

实现 jsonp

// 动态的加载js文件
function addScript(src) {
   
  const script = document.createElement('script');
  script.src = src;
  script.type = "text/javascript";
  document.body.appendChild(script);
}
addScript("http://xxx.xxx.com/xxx.js?callback=handleRes");
// 设置一个全局的callback函数来接收回调结果
function handleRes(res) {
   
  console.log(res);
}
// 接口返回的数据格式
handleRes({
   a: 1, b: 2});
复制代码

将VirtualDom转化为真实DOM结构

这是当前SPA应用的核心概念之一

// vnode结构：
// {
   
//   tag,
//   attrs,
//   children,
// }

//Virtual DOM => DOM
function render(vnode, container) {
   
  container.appendChild(_render(vnode));
}
function _render(vnode) {
   
  // 如果是数字类型转化为字符串
  if (typeof vnode === 'number') {
   
    vnode = String(vnode);
  }
  // 字符串类型直接就是文本节点
  if