无良某司线上面试题

前言

面试题来源于一家广东无良公司的前端线上笔试，为本人真实经历，不过时间不是今年的，但它让我念念不忘，为什么说这家（汕头阿米巴）是无良公司呢？

1. 单休，工资低，月薪不到 5k，不交社保，工资避税以现金发放，正式员工还没年终。
2. 新人延长试用期后，等项目做得差不多了执行劝退。
3. 工作氛围差，领导以施压新人为乐（嘴脸让人见一顿就想打一顿），丢一些来自远古的前后不分离的 x 山项目或者人已跑路、没有什么代码注释的项目给人维护，还不喜欢用 Vue （那时 Vue3 都没出），就喜欢用 React （不用 hook ），写的代码一团糟，喜欢 PUA ，对下属毫无帮助，让其自生自灭。

所以说了这么多，这种公司会出什么面试题呢？一起来看看吧，主角闪亮登场，噔噔噔！

第一题：实现下面的 countdown 函数，用于计算起止时间的间隔信息

function countdown(form, to) {
  // 在这里填写答案
  return {
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
    milliseconds: 0
  }
}

// 参考用例
const from = Date.now();
const to = from + 3 * 3600 * 1000 + 6 * 60 * 1000 + 9 * 1000 + 0;
const info = countdown(from, to);
console.log(info);
// 输出结果参考
// {
//   days: 0,
//   hours: 3,
//   minutes: 6,
//   seconds: 9,
//   milliseconds: 0
// }

热身题，学过 js 的一般都有练过，直接给出解法：

function countdown(form, to) {
  const interval = to - form;
  const second = interval / 1000;
  const minute = second / 60;
  const hour = minute / 60;
  const days = Math.floor(hour / 24);
  const hours = Math.floor(hour % 24);
  const minutes = Math.floor(minute % 60);
  const seconds = Math.floor(second % 60);
  const milliseconds = Math.floor(interval % 1000);
  return {
    days,
    hours,
    minutes,
    seconds,
    milliseconds
  }
}

const from = Date.now();
const to = from + 3 * 3600 * 1000 + 6 * 60 * 1000 + 9 * 1000 + 0;
const info = countdown(from, to);
console.log(info);
// {
//   days: 0,
//   hours: 3,
//   minutes: 6,
//   seconds: 9,
//   milliseconds: 0
// }

第二题：字符串模板替换

// 时长: 15 分钟
// 实现下面的 format 函数，用于替换字符串模板中对于的占位符。
// ps: 代码越简洁越加分
function format(){
  // 在这里填写答案
}

// 参考用例: 
const output = format('{name}今年{age}岁了.',{
  name:'小狮子', 
  age:18
});
console.log(output);
// 输出结果参考: 小狮子今年18岁了。

解法一：

function format (template, data) {
  // replace() 第二个参数是在每次匹配时调用的函数，它会将返回值用作替换文本
  return template.replace(/(\{[a-zA-Z]*\})/g, (matched = '') => {
    // 第一次匹配 matched 为 {name}
    // 第二次匹配 matched 为 {age}
    // 去掉 matched 的 {}
    const key = matched.replace(/\{|\}/g, '');
    return data[key]
  });
}

const output = format('{name}今年{age}岁了.',{
  name:'小狮子', 
  age:18
});
console.log(output);
// 小狮子今年18岁了。

解法二：

function format(template, data) {
  // 思路：遍历分别提取键与值，使用正则将{键}逐一使用 values 里的值替换
  let str = template;
  const keys = [];
  const values = [];
  for (let key in data) {
    if (data.hasOwnProperty(key)) {
      keys.push(key);
      values.push(data[key]);
    }
  }
  for (let i = 0; i < keys.length; i++) {
    str = str.replace(new RegExp("{" + keys[i]+"}", "g"), values[i]);
  }
  return str;
}

const output = format('{name}今年{age}岁了', {
  name: '小狮子',
  age: 18,
});

console.log(output);

题外话，这明显能让人联想到 Vue 的模板，所以还有一种变种题是这样的：

// 模仿 Vue 的模板，写一个字符串模版渲染函数 render。支持{{ 表达式 }}语法，例如：
const data = {
  name: 'xiaoming',
  age: 20,
  info: {
   address: 'chengdu'
  }
 };

const template = "我叫{{ name }}, 家住{{ info.address }}, 今年{{ age }}岁了，明年就{{ age + 1 }}岁了。"
 
render(template, data) // "我叫xiaoming, 家住chengdu, 今年20岁了，明年就21岁了。"

给出一种解法：

const data = {
  name: 'xiaoming',
  age: 20,
  info: {
   address: 'chengdu'
  }
 };

const template = "我叫{{ name }}, 家住{{ info.address }}, 今年{{ age }}岁了，明年就{{ age + 1 }}岁了。"

function render(template, data) {
  // 匹配 {{ }} 花括号里的字符
  const expressionRegex = /{{(.*?)}}/g;
  
  // 用 data 中的相应值替换模板中的每个表达式
  const renderedTemplate = template.replace(expressionRegex, (match, expression) => {
    // 使用 eval 函数对 data 的表达式求值  
    // expression 依次为字符串：name 、info.address、 age、age + 1
    const value = eval(`data.${expression}`);
    return value;
  });
  
  return renderedTemplate;
}

const result = render(template, data);
console.log(result); // "我叫xiaoming, 家住chengdu, 今年20岁了，明年就21岁了。"

第三题：异步任务链式调用

/**
* 请写出两种或两种以上实现方法满足: execute 对应的 id 按顺序打印
* PS: 尝试只修改 start 函数有严重加分
* PS: 使用 promise
*/

let id = [0, 1, 2, 3, 4];

function start(id) {
  execute(id).catch(console.error);
}

function execute(id) {
  // 在这里填写答案
}

start(id);
/* 输出结果参考:
* id 0
* id 1
* id 2
* id 3
* id 4
*/

不知道他们去哪里复制的，题目还没复制完全，人家原题是这样的：

/**
 * 请写出两种或两种以上实现方法满足: execute 对应的 id 按顺序打印
 * PS: 尝试只修改 start 函数体
 *
 * 输出结果参考:
 * id 0
 * id 1
 * id 2
 * id 3
 * id 4
 */

function start(id) {
  execute(id).catch(console.error);
}

// 测试代码 (请勿更改):
for (let i = 0; i < 5; i++) {
  start(i);
}

function sleep() {
  const duration = Math.floor(Math.random() * 500);
  return new Promise(resolve => setTimeout(resolve, duration));
}

function execute(id) {
  return sleep().then(() => {
    console.log("id", id);
  });
}

只好不修改 start 函数：

let id = [0, 1, 2, 3, 4];

function start(id) {
  execute(id).catch(console.error);
}

function execute(id) {
  let result = Promise.resolve();
  id.forEach(item => {
    result = result.then(new Promise((resolve, reject) => {
      resolve()
      console.log('id', item)
    }));
  });
  return result;  
}

start(id);
/* 输出结果参考:
* id 0
* id 1
* id 2
* id 3
* id 4
*/

再列出原题解法一：

function start(id) {
  if (!this.processList) this.processList = [];
  this.processList.push({ id });
  clearTimeout(this.t);
  this.t = setTimeout(() => {
    (async () => {
      let target = this.processList.shift();
      while (target) {
        await execute(target.id);
        target = this.processList.shift();
      }
    })();
  }, 0);
}

for (let i = 0; i < 5; i++) {
  start(i);
}

function sleep() {
  const duration = Math.floor(Math.random() * 500);
  return new Promise(resolve => setTimeout(resolve, duration));
}

function execute(id) {
  return sleep().then(() => {
    console.log("id", id);
  });
}

原题解法二：

function start(id) {
  start.promises = !start.promises
    ? execute(id)
    : start.promises.then(() => execute(id));
}

for (let i = 0; i < 5; i++) {
  start(i);
}

function sleep() {
  const duration = Math.floor(Math.random() * 500);
  return new Promise(resolve => setTimeout(resolve, duration));
}

function execute(id) {
  return sleep().then(() => {
    console.log("id", id);
  });
}

第四题：手写真实 DOM 转虚拟 DOM

// 请在 30 分钟内，不使用浏览器 API 实现简单的 html 源代码解析函数，返回所有节点树关系结构的数据
function parse(html) {
  // 在这里完成这个函数的实现
}


// 在不修改下面代码的情况下，能满足下面列举的使用
let doc = parse(`
  <html>
    <head>
      <title>Hello</title>
    </head>
    <body>
      <div id="container">
        <div class="header"></div>
        <div class="content"></div>
        <div class="footer"></div>  
      </div>
    </body>     
  </html>   
`);

console.log(JSON.stringify(doc, undefined, 2));

// 运行结果输出
// {
//   tag: 'html',
//   children: [
//     {
//       tag: 'head',
//       children: [
//         {
//           tag: 'title',
//           children: []
//         }
//       ]
//     },
//     {
//       tag: 'body',
//       children: [
//         {
//           tag: 'div',
//           children: [
//             {
//               tag: 'div',
//               children: []
//             },
//             {
//               tag: 'div',
//               children: []
//             },
//             {
//               tag: 'div',
//               children: []
//             }
//           ]
//         }
//       ]
//     },
//   ]
// }

什么？你四道题全部做出来了！恭喜你，稳了，获得一份月薪不到 5k 的前端工作！（虽然还有一轮面试）

什么？你想入职！小年轻，你来，你来，看我整不整你就完事了！

什么？这道你做不出来！题目和你在其它地方看的不一样？无所谓，出着玩的，一般人都做不出来，何况线上笔试还是限时的，做不出来的那当然是只好有请 ChatGPT AI + 人工提示调试完成啦！顺便一提，那时还没有出现 ChatGPT 。

使用浏览器 API 实现的版本

你说不使用浏览器 API 实现就不使用吗？那我偏要使用浏览器 API 实现，该怎么实现呢？

function parse(html) {
  const parser = new DOMParser();
  // 将 HTML 字符串解析为 DOM
  const docNode = parser.parseFromString(html, "text/html");
  // 获取 DOM 的根元素，即 <html> 元素
  const dom = docNode.firstChild;
  // 定义一个递归函数 converter，它接受一个 DOM 节点作为参数，并将其转化为 JavaScript 对象。
  function converter(dom) {
    const obj = {
      tag: dom.tagName.toLowerCase(),
      // 使用 Array.from(dom.children) 获取当前 DOM 节点的子节点，
      // 通过 .map(converter) 递归地调用 converter 函数，
      // 将子节点转化为对象，并将这些子节点对象作为数组存储在 children 属性中。
      children: Array.from(dom.children).map(converter)
    };
    return obj;
  }

  return converter(dom);
}

let doc = parse(`
  <html>
    <head>
      <title>Hello</title>
    </head>
    <body>
      <div id="container">
        <div class="header"></div>
        <div class="content"></div>
        <div class="footer"></div>  
      </div>
    </body>     
  </html>   
`);

console.log(JSON.stringify(doc, undefined, 2));

有请解说：

这段代码通过递归解析 HTML DOM，将其转化为嵌套的 JavaScript 对象，其中包括标签名和子元素，

最终输出为 JSON 字符串表示 HTML 文档的结构。

不使用浏览器 API 实现的版本

不带注释版：

function parse(html) {
  const result = { tag: 'root', children: [] };
  let currentParent = result;
  const stack = [];

  const tagReg = /<(\/?)(\w+)(\s*\/?)>/;

  let i = 0;
  while (i < html.length) {
    const match = html.slice(i).match(tagReg);
    if (match) {
      let tag = match[2];
      i += match.index + match[0].length;

      if (match[1] === "/") {
        if (stack.length > 0) {
          currentParent = stack.pop();
        }
      } else if (match[3] !== "/") {
        const newParent = {
          tag: tag,
          children: [],
        };
        
        if (currentParent.children) {
          currentParent.children.push(newParent);
        }
        if (Object.keys(currentParent).length > 0) {
          stack.push(currentParent);
        }
        currentParent = newParent;
      }
    } else {
      i++;
    }
  }

  return result.children[0];
}

let html = `
  <html>
    <head>
      <title>Hello</title>
    </head>
    <body>
      <div>
        <div></div>
        <div></div>
        <div></div>  
      </div>
    </body>     
  </html>   
`;
let doc = parse(html);

console.log(JSON.stringify(doc, undefined, 2));

js 使用栈构建树的原理：

一个变量向另一个变量复制引用类型的值（两个变量相互影响），即使那个变量已经 push 进一个数组里

核心代码可简化为如下例子（ F12 打开控制台，输入以下代码查看结果便知）：

const a = { tag: 'root', children: [] }
let b = a

const c = { tag: 'html' , children: [] } 
b.children.push(c)
console.log('a', JSON.stringify(a))
console.log('b', JSON.stringify(b))
b = c


const d = { tag: 'head', children: [] }
b.children.push(d)
console.log('a', JSON.stringify(a))
console.log('b', JSON.stringify(b))
b = d

const e = { tag: 'title', children: [] } 
b.children.push(e)
console.log('a', JSON.stringify(a))
console.log('b', JSON.stringify(b))
b = e

带注释版：

function parse(html) {
  const result = { tag: 'root', children: [] };
  let currentParent = result;
  // 该数组用于在遇到结束标签时保存先前的 currentParent ，以便之后可以重新设置 currentParent
  const stack = [];

  const tagReg = /<(\/?)(\w+)(\s*\/?)>/;

  let i = 0;
  // html.length 模板字符串的长度包含空格及换行  
  while (i < html.length) { 
    // 匹配下一个标签
    const match = html.slice(i).match(tagReg);
    if (match) {
      // (\w+) 匹配到标签名  
      let tag = match[2];
      // 寻找下一个标签   
      // match.index 表示 match[0] 第一个字符所在的索引，举例：第一次 match[0] 为 <html> ，第二次 match[0] 为 <head>
      i += match.index + match[0].length;
      // (/?) 匹配到如果是结束标签，检查 stack 数组，如果不为空，则弹出一个父节点，将其设置为 currentParent
      if (match[1] === "/") {
        if (stack.length > 0) {
          // 引用类型赋值    
          // 第五次遇到 </title> 
          // currentParent 赋值为 { tag: 'head', children: Array(1) }  
          // 第六次遇到 </head> 
          // currentParent 赋值为 { tag: 'html', children: Array(1) }
          currentParent = stack.pop();
        }
      } else if (match[3] !== "/") {
        // 如果是开始标签，创建一个新的节点对象 newParent ，将其标签名设置为匹配的标签，初始化 children 为一个空数组。
        // 第一次遇到 <html> newParent: { tag: 'html' , children: [] } 
        // 第二次遇到 <head> newParent: { tag: 'head', children: [] }
        // 第三次遇到 <title> newParent: { tag: 'title', children: [] }   
        // 第七次遇到 <body> newParent: { tag: 'body', children: [] }  
        const newParent = {
          tag: tag,
          children: [],
        };
        // 然后将 newParent 添加到 currentParent 的 children 中，并将 currentParent 添加到 stack 数组中。
        if (currentParent.children) {
          // 第一次 currentParent { tag: 'root', children: [{ tag: 'html' , children: [] }] }  
          // 第二次 currentParent { tag: 'html', children: [{ tag: 'head', children: [] }] }    
          // 第三次 currentParent { tag: 'head', children: [{ tag: 'title', children: [] }] }  
          // 第七次 currentParent { tag: "html", children: [{ tag: 'head', children: [{ tag: 'title', children: [] }] }, { tag: 'body',  children: [] }] } 
          currentParent.children.push(newParent);
        }
        if (Object.keys(currentParent).length > 0) {
          // 第一次 stack: [{ tag: 'root', children: [{ tag: 'html' , children: [] }] }]
          // 第二次 stack: [
          //  { tag: 'root', children: [{ tag: 'html' , children: [{ tag: 'head', children: [] }] }] } , 
          //  { tag: 'html' , children: [{ tag: 'head', children: [] }] }
          // ] 
          // 第三次 stack: [{ tag: 'root', children: Array(1) } , { tag: 'html', children: Array(1) } , { tag: 'head',  children: Array(1) }]
          // 第七次 stack: [
          //   { tag: 'root', children: [
          //     { tag: 'html', children: [
          //       { tag: 'head', children: Array(1) }, 
          //       { tag: 'body', children: Array(0) }
          //     ] }
          //   ] }, 
          //   { tag: 'html', children: Array(2) }
          // ] 
          stack.push(currentParent);
        }
        // 最后，将 newParent 设置为 currentParent ，以便下一次迭代中的子元素可以将其添加到这个新父节点下。
        // 引用类型赋值  
        // 第一次 currentParent: { tag: 'html' , children: [] }  
        // 第二次 currentParent: { tag: 'head', children: [] } 
        // 第三次 currentParent：{ tag: 'title', children: [] }  
        // 第七次 currentParent：{ tag: 'body', children: [] }  
        currentParent = newParent;
      }
    } else {
      // 如果不是标签，只是文本内容或其他字符，继续往前移动  
      i++;
    }
  }

  return result.children[0];
}

let html = `
  <html>
    <head>
      <title>Hello</title>
    </head>
    <body>
      <div>
        <div></div>
        <div></div>
        <div></div>  
      </div>
    </body>     
  </html>   
`;
let doc = parse(html);

console.log(JSON.stringify(doc, undefined, 2));

再次有请解说：

这段 JavaScript 代码实现了一个不同的 HTML 解析器，它通过扫描 HTML 字符串并使用栈来构建 DOM 树的结构。

以下是代码的实现思路和原理：

1. 创建一个名为result的根节点对象，该对象包含一个tag属性，初始值为'root'，以及一个children属性，初始化为空数组。result代表整个 DOM 树的根。
2. 初始化一个名为currentParent的变量，开始时将其设置为result，表示当前处理的父节点。
3. 初始化一个名为stack的数组，该数组用于在遇到结束标签时保存先前的currentParent，以便之后可以重新设置currentParent。
4. 使用正则表达式tagReg来匹配 HTML 标签，这个正则表达式可以匹配形如 <tag>、</tag>、<tag/> 这样的标签。
5. 通过循环遍历 HTML 字符串，查找匹配的标签。在循环中，根据正则匹配结果，判断标签是开始标签、结束标签还是自闭合标签。
6. 如果是结束标签，检查 stack 数组中是否还有父节点，如果有，则弹出一个父节点，将 currentParent 更新为 stack 中的最后一个元素，表示回到上一层父节点。
7. 如果是开始标签，创建一个新的节点对象newParent，将其标签名设置为匹配的标签，初始化children为一个空数组。然后将newParent添加到currentParent的children中，并将currentParent添加到stack数组中。最后，将newParent设置为currentParent，以便下一次迭代中的子元素可以将其添加到这个新父节点下。
8. 如果不是标签，只是文本内容或其他字符，继续往前移动索引。
9. 最终，返回result的第一个子节点，这就是整个 DOM 树的根节点。
10. 最后，使用JSON.stringify将 DOM 树表示为 JSON 字符串，并在控制台输出。

结尾

为什么封面和文章图片选的都是进击的巨人呢？因为这就像推翻象牙塔的墙，接受社会的毒打啊！

请在下方留下你的评论，分享到此结束，感谢您的阅读，期待您的留言！

另附 github 博客笔记分享，希望可以帮助到有缘人。