零禅智能前端一面:笔试题 + Q&A

先做了几道题目，然后开始面试

题目

1. 完善代码

   // 将6插入到5后面 使得arr变成 [1,2,3,4,5,6,7,8,9]
   const arr = [ 1,2,3,4,5,7,8,9]

2. 按照 id 去重，完善 dedupById 方法，具有同一个 id 的记录只保留第一次出现的记录

   
   const arr = [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 1, name: '王五', age: 18, … }, … ]
   
   function dedupId(arr) {
   
   }

3. 手写 tab 切换

   // 不用写css样式，把基本的html结构和js逻辑写出就可以
   // 比如进入腾讯新闻应用 有若干个频道: 农业频道、军事频道、科技频道
   // 用户点击农业频道，可以预览农业频道下方的内容，点击军事频道同理
   // 点击到哪个频道，对应频道标题高亮(标题字体颜色变为红色)以提醒用户现在处于哪个频道
   <template>
   <div>
   
   </div>
   </template>
   
   
   <script setup>
   const list = ref([
     { title: '农业频道', content: '农业内容' },
     { title: '军事频道', content: '军事内容' },
     {title: '科技频道', content: '科技内容' },
   ])
   </script>
   
   
   <style>
    </style>

4. 拼写 sql

   // user 表有 name, id, mobile 等属性
   // goods表有 name, id, user_id等属性
   // 查出goods表中的商品以及对应的用户名称

5. 打印输出日志

   new Promise((resolve, reject) => {
     console.log(1);
     setTimeout(() => {
       resolve(2);
       reject(4);
       console.log(5);
     }, 1000);
     console.log(3);
   })
     .then((res) => console.log('resolve', res))
     .catch((err) => console.log('error', err));
   console.log(7);

6. 接口请求：完善下述的 submit 函数 和 submit1

   <template>
       <div>
           <button @click="submit">
   
           </button>
       </div>
   </template>
   
   <script setup>
       // 场景介绍: 当用户点击当前页面button时提交请求(requestA、requestB)并且跳转下一页面
       //
   
      // A和B request 请求为一个接口请求，不需要补充，调用效果会过若干秒后接口请求成功或者失败
      // 失败后会throw Error
       const requestA = async () => {
   
       }
   
      // A和B request 请求为一个接口请求，不需要补充，调用效果会过若干秒后接口请求成功或者失败，并且返回后台数据
       const requestB = async () => {
           …
       }
   
   
       const jumpToC(){
           router.push('/C')
       }
   
   
   
       const submit = async() => {
          // 补充sumit 效果， A 和B 接口请求成功后跳转下一页面jumpToC， A B接口不要求调用顺序
       }
       const submit1 async () => {
             // 补充sumit1 效果， A 和B 接口请求无论成功与否，都跳转下一页 A B接口不要求调用顺序
       }
   
       const router = useRouter()
       const jumpToC = () => {
           router.push('./c')
       }
   </script>

7. 手写 promisefy, 转换 callback 形式为 promise 形式

   type Payload = {
       url: string;
       data: any;
       success: (res: any): void;
       fail(reason: any): void
   }
   
   functino Ajax(payload: Payload) {
   
   }
   // 正常调用ajax获取接口数据
   Ajax({
       url: '',
       method: 'post',
       success(data) {
           console.log(data)
       }
   })
   
   // 提供一个辅助函数将接受Payload类型参数的函数转换成Promisefy形式
   function promisefy () {
   
   }
   // 借助promisefy 可以向下面形式一样调用Ajax
   promisefy(Ajax)({ url: '', method: 'post' }).then(data => {
   
   })

面试

1. 解释一下打印输出日志部分代码是怎么运行的？
2. 为什么要找前端实习？
3. 什么时候可以入职？
4. 怎么解决前后端连接时的跨域问题？
5. vue 中 watch 和 computed 有什么区别？
6. watch 和 watch effect 有什么区别？
7. vue3 中 ref 和 reactive 有什么区别？
8. vue3 的性能为什么会比 vue2 好？
9. 通过什么渠道学习的 vue？