字节飞书前端面试面经

一面面经

面试官很友善，虽然中途网络不好断了几次，但是也没有烦躁哈哈，遇到不会的也会给我提示，总之体验极佳，因为全凭回忆，问题内容和项目经历关系比较大，仅做参考。

手写代码题

1. 最大子序和：

给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。

简单题，考察动态规划，求出以每个元素结尾的子序列和，参考：leetcode原题

2. js手写一个深拷贝函数

需要考虑循环引用的问题，可惜我Map用的不熟练，get和set操作写错了哈哈，代码如下：

function clone(target, map = new Map()) {
    if (typeof target === 'object') {
        let cloneTarget = Array.isArray(target) ? [] : {};
        if (map.get(target)) {
            return map.get(target);
        }
        map.set(target, cloneTarget);
        for (const key in target) {
        	if (target.hasOwnProperty(target[key]) )
            cloneTarget[key] = clone(target[key], map);
        }
        return cloneTarget;
    } else {
        return target;
    }
};

发散问题：for in 语句是否会出现什么问题？如何解决？

for in 会把原型链上的属性也遍历上，需要判断是否是本身的属性，使用 hasOwnProperty 方法，然后我回答的是for…in 循环进行遍历的是所有可枚举的属性（对象自身和原型链上的）
可以参考一下：for in和for of的区别

3. 防抖函数的实现

什么是防抖和节流？请实现一个防抖函数

防抖：在事件被触发n秒后执行回调，如果在这n秒内又被触发，则重新计时，例子：按钮多次提交，只执行最后一次
节流：在规定时间内，只能触发一次函数，单位时间内触发多次函数，只有一次生效，例子：拖拽场景
区别：防抖是延迟执行，节流是间隔执行，函数节流即每隔一段时间就执行一次
参考文章

最初版本如下，被指出了几点问题：

1. fn是一个有参数的函数，如何传值？需要使用apply给fn绑定上参数；
2. 如果使用fn.apply(this, argument)替换setTimeout里面fn有什么问题？apply绑定后会立即执行，因此还需要用function包一层；
3. apply和bind的区别是什么？一个是立即执行，一个是返回函数；
4. 在fn.apply(this, argument)外面再裹一层function可以嘛？
5. 替换成箭头函数，和普通函数有什么区别？

// 初版
function debounce(fn, delay) {
  // 维护一个 timer，用来记录当前执行函数状态
  let timer = null;
  return function() {
    // 清理掉正在执行的函数，并重新执行
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  }
}

// 最终修改
function debounce(fn, delay) {
  // 维护一个 timer，用来记录当前执行函数状态
  let timer = null;
  return function() {
    // 清理掉正在执行的函数，并重新执行
    clearTimeout(timer);
    timer = setTimeout(()=>{fn.apply(this,arguments)}, delay);
  }
}

4. 判断输出顺序

先问了一下宏任务和微任务的概念，然后问promise熟悉吗？然后写了一段代码（promise和setTimeout）判断输出顺序。

概念题

1. 浏览器缓存

• sessionStorage：本次会话的信息，比如当前用户的vipType
• localStorage：理论上存永久发生的，比如记住上次登陆方式

2. http缓存

• http请求头的相关字段：Expires、Cache-Control、Last-Modified、Etag
• if modified和expire实现有什么区别
• 如果没有修改返回的状态码？304；如果过期返回的状态码？200；参考
• 强缓存和协商缓存：参考

参考：HTTP缓存机制详解

3. KO框架

• 框架的优点：双向绑定
• computed属性如何实现的：这题不会哈哈，还没复习到这么深的层次
• 参考：理解computed属性

4. 前端优化

针对项目中的秒杀系统的项目问的一系列问题：

• CDN分布式缓存 ：放静态资源，比如html、css、图片等，不同地方的客户端访问离自己最近的CDN服务器
• 页面静态化处理怎么做的：因人而异

5. 微信小程序

做过一个微信小程序的项目，问小程序开发有什么特点？

• 双向绑定机制不一样，需要手动setData
• 生命周期函数：onLoad、onShow、onReady等等

总结

感觉整体回答的还行，其实主要还是看coding的能力，代码如果都写出来了问题就不会太为难你，本来以为只有一面，结果直接顺着就二面了，中途都没咋休息（orz），有时间再更新二面的内容。