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

2024-04-18码农

前言

大家好，我是林三心， 用最通俗易懂的话讲最难的知识点 是我的座右铭， 基础是进阶的前提 是我的初心，今天分享一个一年经验的 字节抖音电商 面经

一面

1、自我介绍？

略

2、问项目

略

3、leetcode第112题，【路径总和】

const hasPathSum = (root, sum) => { if (root == null) { // 遍历到null节点 returnfalse; } 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')

解答

classU{ 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) returnthis } setTimeout(delay) { const task = () => { setTimeout(() => { this.next() }, delay) } this.tasks.push(task) returnthis } }

5、事件代理是什么？

当子元素都需要绑定同样的事件的时候，这个时候可以把事件直接绑定在父元素上，并通过target对象来判断执行不同的子元素操作，这样可以大大减少绑定事件的数量，减少DOM操作，提高性能

6、e.target和e.currentTarget的区别？

e.target ：触发事件的元素

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

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

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

8、看代码说结果？

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