813 字
4 分钟
零禅智能前端一面
2024-12-27

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

题目#

  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?
零禅智能前端一面
https://blog.xbxin.com/posts/interview/zerozen-front-end-interview/
作者
binxin
发布于
2024-12-27
许可协议
CC BY-NC-SA 4.0