前端面试:项目细节重难点问题分享

面试官提问:我现在给你出一个项目实际遇到的问题:由于后端比较忙,所以我们这边的列表数据排序需要前端最近实现,那你会怎么实现排序呢?

答:我的回答:确实,数据都是由后端实现的,前端只是负责获取后展示数据到页面,但如果前端来实现列表数据排序,我必须了解以下内容:

(1)内容1:数据结构是什么?数据结构是一个数组里的每一个元素都是对象,每个对象里有name、id和age三个属性,根据上面的描述,我给大家mock了5条JSON数据,代码如下:

(2)内容2:排序规则是什么?如果name+id+age都有值,第一展示;如果name+id或name+age有值,第二展示;如果只有name有值最后展示。

(3)内容3:没有值的字段在列表展示什么?如果该字段没有值,则展示--。

(4)问题:前端需要自己写出排序规则再对原生sort方法进行封装即可完成上述需求:

(5)解决(代码实现):

(6)效果展示:

(7)知识点:sort()方法

- 作用:对数组的元素进行排序

- 参数:两个参数 a 和 b,表示要比较的两个元素,并返回一个数值:如果 a < b,则返回值 < 0;如果 a > b,则返回值 > 0;如果 a === b,则返回值 === 0

- 返回值:返回排序后的数组

- 注意:会直接修改原数组,而不是创建一个新的数组

相关推荐
YeeWang10 分钟前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript
造梦师阿鹏11 分钟前
004.从 API 裸调到 LangChain
经验分享·ai·大模型·ai技术·大模型应用开发
gnip12 分钟前
Jenkins部署前端项目实战方案
前端·javascript·架构
Orange30151126 分钟前
《深入源码理解webpack构建流程》
前端·javascript·webpack·typescript·node.js·es6
lovepenny1 小时前
Failed to resolve entry for package "js-demo-tools". The package may have ......
前端·npm
超凌1 小时前
threejs 创建了10w条THREE.Line,销毁数据,等待了10秒
前端
车厘小团子1 小时前
🎨 前端多主题最佳实践:用 Less Map + generate-css 打造自动化主题系统
前端·架构·less
慧翔天地人才发展学苑1 小时前
大厂 | 华为半导体业务部2026届秋招启动
华为·面试·职场和发展·跳槽·求职招聘·职场晋升
芒果1251 小时前
SVG图片通过img引入修改颜色
前端
海云前端12 小时前
前端面试ai对话聊天通信怎么实现?面试实际经验
前端