最后更多分享:前端字节跳动真题解析
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
var data = [{
“value”: “浙江”,
“children”: [{
“value”: “杭州”,
“children”: [{
“value”: “西湖”
}]
}]
}, {
“value”: “四川”,
“children”: [{
“value”: “成都”,
“children”: [{
“value”: “锦里”
}, {
“value”: “方所”
}]
}, {
“value”: “阿坝”,
“children”: [{
“value”: “九寨沟”
}]
}]
}]
一个具有层级结构的数据,实现这个功能非常容易,因为这个结构和组件的结构是一致的,递归遍历就可以了。
但是,由于后端通常采用的是关系型数据库,所以返回的数据通常会是这个样子:
var data = [{
“province”: “浙江”,
“city”: “杭州”,
“name”: “西湖”
}, {
“province”: “四川”,
“city”: “成都”,
“name”: “锦里”
}, {
“province”: “四川”,
“city”: “成都”,
“name”: “方所”
}, {
“province”: “四川”,
“city”: “阿坝”,
“name”: “九寨沟”
}]
前端这边想要将数据转换一下其实也不难,因为要合并重复项,可以参考数据去重的方法来做,于是我写了这样一个版本。
‘use strict’
/**
-
将一个没有层级的扁平对象,转换为树形结构({value, children})结构的对象
-
@param {array} tableData - 一个由对象构成的数组,里面的对象都是扁平的
-
@param {array} route - 一个由字符串构成的数组,字符串为前一数组中对象的key,最终
-
输出的对象层级顺序为keys中字符串key的顺序
-
@return {array} 保存具有树形结构的对象
*/
var transObject = function(tableData, keys) {
let hashTable = {}, res = []
for( let i = 0; i < tableData.length; i++ ) {
if(!hashTable[tableData[i][keys[0]]]) {
let len = res.push({
value: tableData[i][keys[0]],
children: []
})
// 在这里要保存key对应的数组序号,不然还要涉及到查找
hashTable[tableData[i][keys[0]]] = { $$pos: len - 1 }
}
if(!hashTable[tableData[i][keys[0]]][tableData[i][keys[1]]]) {
let len = res[hashTable[tableData[i][keys[0]]].$$pos].children.push({
value: tableData[i][keys[1]],
children: []
})
hashTable[tableData[i][keys[0]]][tableData[i][keys[1]]] = { $$pos: len - 1 }
}
res[hashTable[tableData[i][keys[0]]]. p o s ] . c h i l d r e n [ h a s h T a b l e [ t a b l e D a t a [ i ] [ k e y s [ 0 ] ] ] [ t a b l e D a t a [ i ] [ k e y s [ 1 ] ] ] . pos].children[hashTable[tableData[i][keys[0]]][tableData[i][keys[1]]]. pos].children[hashTable[tableData[i][keys[0]]][tableData[i][keys[1]]].pos].children.push({
value: tableData[i][keys[2]]
})
}
return res
}
var data = [{
“province”: “浙江”,
“city”: “杭州”,
“name”: “西湖”
}, {
“province”: “四川”,
“city”: “成都”,
“name”: “锦里”
}, {
“province”: “四川”,
“city”: “成都”,
“name”: “方所”
}, {
“province”: “四川”,
“city”: “阿坝”,
“name”: “九寨沟”
}]
var keys = [‘province’, ‘city’, ‘name’]
console.log(transObject(data, keys))
还好keys的长度只有3,这种东西长了根本没办法写,很明显可以看出来这里面有重复的部分,可以通过循环搞定,但是想了很久都没有思路,就搁置了。
后来,有一天晚饭后不是很忙,就跟旁边做数据的同事聊了一下这个需求,请教一下该怎么用循环来处理。他看了一下,就问我:“你知道trie树吗?”。我头一次听到这个概念,他简单的给我讲了一下,然后说感觉处理的问题有些类似,让我可以研究一下trie树的原理并试着优化一下。
讲道理,trie树这个数据结构网上确实有很多资料,但很少有使用JavaScript实现的,不过原理倒是不难。尝试之后,我就将transObject
的代码优化成了这样。(关于trie树,还请读者自己阅读相关材料)
var transObject = function(tableData, keys) {
let hashTable = {}, res = []
for (let i = 0; i < tableData.length; i++) {
let arr = res, cur = hashTable
for (let j = 0; j < keys.length; j++) {
let key = keys[j], filed = tableData[i][key]
if (!cur[filed]) {
let pusher = {
value: filed
}, tmp
if (j !== (keys.length - 1)) {
tmp = []
pusher.children = tmp
}
cur[filed] = { $$pos: arr.push(pusher) - 1 }
cur = cur[filed]
arr = tmp
} else {
cur = cur[filed]
arr = arr[cur.$$pos].children
}
}
}
return res
}
这样,解决方案就和keys的长短无关了。
这大概是我第一次,真正将数据结构的知识和前端项目需求结合在一起。
再谈谈我在面试遇到的问题
目前为止我参加过几次前端开发方面的面试,确实有不少面试官会问道一些算法。通常会涉及的,是链表、树、字符串、数组相关的知识。前端面试对算法要求不高,似乎已经是业内的一种共识了。虽说算法好的前端面试肯定会加分,但是仅凭常见的面试题,而不去联系需求,很难让人觉得,算法对于前端真的很重要。
直到有一天,有一位面试官问我这样一个问题,下面我按照自己的回忆把对话模拟出来,A指面试官,B指我:
A:你有写过瀑布流吗?
B:我写过等宽瀑布流。实现是当用户拉到底部的一定高度的时候,向后端请求一定数量的图片,然后再插入到页面中。
A:那我问一下,如何让几列图片之间的高度差最小?
文末
如果30岁以前,可以还不知道自己想去做什么的话,那30岁之后,真的觉得时间非常的宝贵,不能再浪费时间在一些碎片化的事情上,比如说看综艺,电视剧。一个人的黄金时间也就二,三十年,不能过得浑浑噩噩。所以花了基本上休息的时间,去不断的完善自己的知识体系,希望可以成为一个领域内的TOP。
同样是干到30岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说30岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。
269页《前端大厂面试宝典》
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总
JavaScript
心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
前端面试题汇总
JavaScript