字节飞书前端三面(55min)

字节前端飞书三面(55min)

介绍项目

让我挑一个项目介绍一下，我选了网易云音乐仿写项目。把进度条缓冲以及歌词滚动两个难点的实现着重讲解了一下。

后面面试官反问:

如果在循环播放歌曲的时候, 当前歌曲即将播放完时实现歌词继续向上滚动又展示第一行歌词怎么实现？

emmm, 这个问题答的不是很好, 我回答了把歌词数组给repeat重复一下, 然后面试官又问如果循环播放三次/四次呢？

后面面试官提示用类似轮播图无缝切换的方式实现, 于是用轮播图的原理给回答了一下。

场景题

输入一个字符数组，转化为如下格式

//input ["a","b","c","d","e","f","g"]

//output {"a":{"b":{"c":{"d":{"e":{"f":"g"}}}}}}
//一开始很懵, 后面思路起来想到应该从后往前推就做出来了
function handler(arr){
    const len = arr.length;
    let prev = {
        [arr[len-2]]:arr[len-1]
    }
    for(let i=len-3;i>=0;i--){
        prev = {
            [arr[i]]:prev
        }
    }
    return prev
}

如何获取页面中出现的所有dom元素的标签类型

得到一个数组，数组的每一项是一个标签名

//其实只要知道如何获取页面中所有元素就能做出来, 通过document.querySelectorAll("*")获取
const all = Array.from(document.querySelectorAll("*"));
const hash = {};
const res = [];
all.forEach(it=>{
    if(!hash[it.tagName]){
        res.push(it.tagName);
        hash[it.tagName] = true;
    }
})
console.log(res)

对框架的理解

因为我是vue2和react都学过, 在简历里面都写了，所以两个框架都问到了。

说说vue和react的异同

早就预料到可能会问这个, 因此之前自己有总结过:

相同点:

核心库都只关注ui层面的问题解决，路由/状态管理都由其他库处理。
都使用了虚拟dom来提高重渲染效率。
都采用了组件化思想，将应用中不同功能抽象成一个组件，提高了代码复用性。
都能进行跨平台，react使用react native，vue使用weex
都有自己的构建工具:

vue: vue-cli

react: create-react-app

不同点:

最大的不同是组件的编写方式

vue推荐使用类似于常规html模板的方式来编写组件, 基于vue强大的指令系统来进行数据的绑定和添加事件监听。在vue中，一个组件就是一个.vue文件。

而react中采用jsx语法，每一个jsx表达式都是一个react元素. 在react中，一个组件本质就是一个函数或者一个类。
虚拟dom渲染效率方面

由于vue对数据进行了劫持，因此每一个响应式数据都能进行依赖跟踪。当组件重新渲染时，不必重新渲染它的整个子组件树，而是只渲染应该重渲染的子组件。

在react中，一旦组件状态变化导致重渲染后，其整个子组件树都会默认重新渲染。可以通过pureComponent或者shouldComponentUpdate来进行优化。
响应式方面

vue由于使用defineProperty或者proxy, 能对数据进行劫持。因此只要修改了响应式数据本身就能导致组件的重渲染。

而在react中，并没有对数据本身进行劫持，需要手动调用setState才能触发组件的重渲染。并且react强调使用不可变数据，即每次更改状态时，新状态的引用必须和旧状态不同。如果说没有使用不可变数据并且又在组件内使用了pureComponent或者shouldComponentUpdate进行优化，可能会导致状态变化组件没有重新渲染。
高阶组件

react中存在HOC(高阶组件)的概念，因为react中的每一个组件本质都是一个函数或者类，都是编写在js代码中。因此可以轻松的实现高阶组件来对组件进行扩展。而vue采用模板编译的方式编写组件，无法使用HOC, 通常通过mixin来扩展组件.
指令系统

vue有一套强大的指令系统并且支持自定义指令来封装一些功能。

react则更偏向底层，使用javascript原生代码进行封装功能。