2024年Web前端最全为什么我认为数据结构与算法对前端开发很重要？，正在准备面试

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

“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]]].$$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：那我问一下，如何让几列图片之间的高度差最小？

B：这个需要后端发来的数据里面有图片的高度，然后我就可以看当前高度最小的是哪里列，将新图片插入那一列，然后再看看新的高度最小的是哪一列。

A：我觉得你没有理解我的问题，我的意思是如何给后端发来的图片排序，让几列图片之间的高度差最小？

B：（想了一段时间）对不起，这个问题我没有思路。

A：你是软件工程专业的对吧？你们数据结构课有没有学动态规划？

B：可能有讲吧，但是我没什么印象了。

对话大概就是这样，虽然面试最终还是pass了，但这个问题确实让我很在意，因为我觉得，高度差“最”小，真的能用很简单的算法就解决吗？

这个问题的实质，其实就是有一个数组，将数组元素分成n份，每份所有元素求和，如何使每份的和的差最小。

搜索上面这个问题，很快就能找到相关的解答，很基本的一类动态规划问题——背包问题。

之前我确实看过背包问题的相关概念（也仅仅是相关概念）。当时我看到这样一段话：

许多使用递归去解决的编程问题，可以重写为使用动态规划的技巧去解决。动态规划方案通常会使用一个数组来建立一张表，用于存放被分解成众多子问题的解。当算法执行完毕，最终的解将会在这个表中很明显的地方被找到。

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

a5b97f9ccba8.png)

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？