食杂零售暑期前端面试题

暑期考察基础比较多。

基础知识

1. 数组和链表

   • 数组和链表的区别是什么？
   • 读取和删除操作的时间复杂度分别是多少？

2. 网络

   • 什么是 TCP 和 UDP？它们之间有什么区别？
   • HTTP 和 HTTPS 的区别是啥？

3. 操作系统

   • 什么是进程与线程？

4. JavaScript 基础

   • Array 上有什么方法？（例如：map, push）
   • cookie、localStorage、sessionStorage 有什么区别？
   • setState 是同步还是异步？具体做了什么？

5. 事件冒泡

   分析以下代码，当点击 A 元素时，控制台的输出是什么？

   <div id="B">
     <div id="A"></div>
   </div>

   document.getElementById('A').addEventListener('click', () => { console.log('A') });
   document.getElementById('B').addEventListener('click', () => { console.log('B') });

6. CSS 布局

   分析以下 CSS，描述 a, b, c 三个元素的排列情况。

   [a][b][c]
   
   a, b, c {
       display: inline-block;
       width: 100px;
       height: 100px;
   }
   
   b {
      position: absolute;
      top: 50px;
   }

7. 跨域

   • 跨域的原因及方案是什么？如何解决跨域问题？

---

代码题

1. 树形结构取值

给定以下树形结构，实现一个函数，当输入节点 id 时，返回从根节点到该节点的路径 id 数组。

数据结构：

const data = {
  id: 1,
  children: [
    {
      id: 2,
      children: [
        { id: 4, children: [] }
      ],
    },
    {
      id: 3,
      children: null
    }
  ]
};

const findPath = () => {
  let path = [];
}

示例：

• 输入 4，输出 [1, 2, 4]
• 输入 3，输出 [1, 3]
• 输入 5，输出 []

2. 代码输出题

分析以下异步代码，写出其在控制台的最终输出顺序。

async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}

async function async2() {
  console.log('async2');
}

console.log('start');
async1();

setTimeout(() => {
  console.log('timer1');
  Promise.resolve().then(function () {
    console.log('promise1');
  });
}, 0);
 
Promise.resolve().then(function () {
  console.log('promise2');
});
 
new Promise(resolve => {
  console.log('Promise3');
  resolve();
}).then(() => {
  console.log('Promise3 then');
});
 
console.log('end');

预期输出：

// start、async1 start、async2、Promise3、end、async1 end、promise2、Promise3 then、timer1、promise1