字节跳动前端一面凉经

Part One —— 自我介绍

面试官好，我是广东工业大学信息工程学院信息工程专业大二的xxx。我积极勤奋，有一定的学习能力和创新能力。同时有着今日事今日毕的习惯，希望通过各种机会锻炼和磨砺自己。前端的主要技术栈是Vue。

以上就是我简单的自我介绍环节。面试官再次确认了一下我的技术栈后，就进入了下一环节。

Part Two —— 项目介绍

这里我挑了目前正在参加大创项目和互联网+比赛的项目：MES生产管理系统

我这里分三大点介绍了我的这个项目：

登录注册和忘记密码功能
1. 登录和注册的大部分功能采用了常规的axios表单发送请求
2. 注册和忘记密码采用了60s倒计时功能这里面试官问了一些这个倒计时功能的问题
产品数据展示
1. 用echarts实现数据折线图展示
2. 实现按月查按年查等查询功能
机械臂信息展示
1. 展示机械臂信息
2. 根据时间戳进行维修时间的排序，越紧急的放在前面
3. 点击小的机械臂信息展示大的信息内容

然后介绍完这个项目之后，面试官就说他已经想好出什么题给我了

Part Three —— 做题

第一题

题目：做一个倒计时函数，当页面关闭后，倒计时仍然能正常进行。

这题拿到手，我首先第一印象就是，题目出的这么硬核的吗。

然后我就着手去思考如何实现这个功能。

我刚开始的思路：

先完成普通倒计时功能
再实现记录功能这里的记录功能我直接就想到了localStorage这个浏览器存储功能存储时间戳

然后我就根据这个思路往下写，发现越写越乱，因为上述的方法做到第二步后要不断修改第一步的内容，导致越写越乱。

做了十五分钟后，面试官开始询问我的思路，我将我的思路和他讲后，他将我的思路以正确的方式梳理了一遍。

/**
 * 一、页面开启时判断storage里是否存在状态(key等内容)
 *  	1.有则读取并使用
 *  	2.无则新建
 * 二、进行倒计时
 * 三、页面关闭时，更新storage中的状态
 */

然后就对我教导做事前需要理清思路再动手，不然会越整越乱

第二题

题目：拍平数组[1,2,[3,4,[5],[6]]]

这一题我拿到手我觉得soeasy，然后用了toString()方法直接暴力拍平，然后再逐个处理。

结果刚写完，就被面试官说了：“这种做法属于流氓做法，没有掌握到这题的核心”。

这个时候我就慌了，我就开始瞎试。面试官看到我有点慌，就提醒我使用递归。

我就在想递归，不就无脑递归嘛，然后一层函数包一层函数有个返回值这样。

无脑递归无脑着，我就忘记要怎么写了，也是越写越乱。。。。

结果当然就是寄。

面后题目过程

第一题

function timeDown(target){
    this.get(target)
    this.countDown(target)
}
timeDown.prototype.get = function(target){
    let storage = window.localStorage
    if(isNaN(storage.oldTarget)){
        storage.removeItem('timer')
        storage.removeItem('oldTarget')
    }
    //如果不存在
    if(!storage.timer){
        this.target = target
        //console.log(this.target)
    }else{
        let distance = Math.round((Number(new Date()) - storage.timer)/1000)
        if(distance >= storage.oldTarget){
            storage.removeItem('timer')
            storage.removeItem('oldTarget')
        }else{
            this.target = storage.oldTarget - distance
        }
    }
}
timeDown.prototype.countDown = function(target){
    let timer ; 
    let storage = window.localStorage
    //console.log(this.target)
    if(this.target == undefined) this.target = target
    timer = setInterval(()=>{
        if(this.target == 0) {
            clearInterval(timer)
            storage.removeItem('timer')
            storage.removeItem('oldTarget')
        }
        console.log(this.target)
        this.target -= 1
        this.set()
    },1000)
}
timeDown.prototype.set = function(){
    let storage = window.localStorage
    //console.log('我是set')
    if(this.target!=0){
        let target = this.target
        window.onunload = function(){
            storage.timer = Number(new Date())
            storage.oldTarget = target
        }
    }
}
let time = new timeDown(100)

第二题

function paiping(){
    let arr = [1,2,[3,4,[5],[6]]]
    function fun(array){
        let res = []
        //console.log(Array.isArray(array))
        if(Array.isArray(array)){
            //console.log(array)
            for(let i = 0;i<array.length;i++){
                let ans = fun(array[i])
                //console.log(ans)
                res.push(...ans)
                //console.log(res,'我是数组',array)
            }
        }else{
            //console.log('我是数字',array)
            res.push(array)
            //console.log(res,'我是数字',array)
        }
        return res
    }
    return fun(arr)
}