零禅智能前端一面（12.27）#

开始前先让做了题目

完善代码

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

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


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

function dedupId(arr) {
    
}

手写 tab 切换

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

</div>
</template>


<script setup>
const list = ref([
  { title: '农业频道', content: '农业内容' },
  { title: '军事频道', content: '军事内容' },
  {title: '科技频道', content: '科技内容' },
])
</script>


<style>
 </style>

拼写 sql

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

打印输出日志

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)

接口请求完善下述的 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>

手写 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 => {

})

接下来是面试问的题目

解释一下打印输出日志部分代码是怎么运行的？
为什么要找前端实习（可能面试官看我第一次找实习问的）？
什么时候可以入职？
怎么解决前后端连接时的跨域问题？
vue 中 watch 和 computed 有什么区别？
watch 和 watch effect 有什么区别？
vue3 中 ref 和 reactive 有什么区别？
vue3 的性能为什么会比 vue2 好？
通过什么渠道学习的 vue？