一年经验面试字节抖音电商，分享下面经！一年经验面试字节抖音电商，

前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心，今天分享一个一年经验的字节抖音电商面经
一面 1、自我介绍？
略
2、问项目
略
3、leetcode第112题，《路径总和》

const hasPathSum = (root, sum) => { if (root == null) { // 遍历到null节点 return false; } if (root.left == null && root.right == null) { // 遍历到叶子节点 return sum - root.val == 0; // 如果满足这个就返回true。否则返回false } // 不是上面的情况，则拆成两个子树的问题，其中一个true了就行 return hasPathSum(root.left, sum - root.val) || hasPathSum(root.right, sum - root.val); }

4、你知道哪些JS数组的API？

方法	作用	是否影响原数组
push	在数组后添加元素，返回长度	?
pop	删除数组最后一项，返回被删项	?
shift	删除数组第一项，返回被删项	?
unshift	数组开头添加元素，返回长度	?
reserve	反转数组，返回数组	?
sort	排序数组，返回数组	?
splice	截取数组，返回被截取部分	?
join	将数组变字符串，返回字符串	?
concat	连接数组	?
map	相同规则处理数组项，返回新数组	?
forEach	遍历数组	?
filter	过滤数组项，返回符合条件的数组	?
every	每一项符合规则才返回true	?
some	只要有一项符合规则就返回true	?
reduce	接受上一个return和数组下一项	?
flat	数组扁平化	?
slice	截取数组，返回被截取区间	?

5、手写reduce

Array.prototype.sx_reduce = function (callback, ...args) { let start = 0, pre if (args.length) { pre = args[0] } else { pre = this[0] start = 1 } for (let i = start; i < this.length; i++) { pre = callback(pre, this[i], i, this) } return pre }

6、讲一下HTTP缓存？

文章图片

7、谈谈vue和react的区别和优劣？

vue2对ts支持较差，vue3时已解决
vue2对jsx支持较差，vue3时已解决
vue 和 react都是单向数据流
vue多用模板 template，react多用 jsx
vue和react都使用虚拟dom和diff算法
vue是双向绑定，react是单向绑定
vue和react都倡导组件化开发
vue和react都支持服务端渲染
vue2的状态管理工具vuex，vue3用pinia，react用redux、mobx、recoil
vue的diff算法比react更高效
react的写法更贴近js原生

8、hooks用过吗？聊聊react中class组件和函数组件的区别？
我的React比较菜。。

class组件：state和props都是固定的地址
函数式组件：state和props每次都会跟着渲染更新而更新

9、前端性能优化你会怎么做？

列表优化：懒加载、虚拟列表、分页
重绘回流：合并修改、requestAnimationFrame、will-change
提交优化：防抖
网络请求：控制并发量、取消重复请求、合并请求、http缓存
webpack优化：代码压缩、gzip、CDN、代码分割、合理设置hash、图片转base64

10、反问环节
略
二面 1、自我介绍？
略
2、项目中遇到最复杂的是什么？最有技术难度的是什么？
略
3、算法题

fn([['a', 'b'], ['n', 'm'], ['0', '1']]) => ['an0', 'am0', 'an1', 'am1', 'bn0', 'bm0', 'bn1', 'bm0']

解答

const fn = (arr) => { const length = arr.length const res = [] const dfs = (items, str = '', index = 1) => { if (index > length) { res.push(str) } else { for (const item of items) { dfs(arr[index], str + item, index + 1) } } } dfs(arr[0])return res }

4、手写

u.console('breakfast').setTimeout(3000) .console('lunch').setTimeout(3000) .console('dinner')

【一年经验面试字节抖音电商，分享下面经！】解答

class U { constructor() { this.tasks = [] setTimeout(() => { this.next() }) } next() { const task = this.tasks.shift() task && task() } console(str) { const task = () => { console.log(str) this.next() } this.tasks.push(task) return this } setTimeout(delay) { const task = () => { setTimeout(() => { this.next() }, delay) } this.tasks.push(task) return this } }

5、事件代理是什么？
当子元素都需要绑定同样的事件的时候，这个时候可以把事件直接绑定在父元素上，并通过target对象来判断执行不同的子元素操作，这样可以大大减少绑定事件的数量，减少DOM操作，提高性能
6、e.target和e.currentTarget的区别？

e.target ：触发事件的元素
e.currentTarget ：事件所绑定的元素

7、写一个事件代理函数，需要判断child是parent的子节点？

function proxy(event, cb, parent, child) { parent[event] = function (e) { if (parent.contains(child) && e.target === child) { cb.call(this) } } }

8、看代码说结果？

var length = 10; function fn() { return this.length + 1; } var obj1 = { length: 5, test1: function () { return fn() } } obj1.test2 = fn; obj1.test1.call() // 1 obj1.test1() // 11 obj1.test2.call() // 11 obj1.test2() // 6

9、从输入Url到页面渲染发生了什么？写个提纲？