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

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

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

(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

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

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

相关推荐
无聊的老谢2 分钟前
Vue 3 + Leaflet 实现高性能 Web GIS 基站监控平台
前端·javascript·vue.js
之歆4 分钟前
Day23_Bootstrap 前端框架完全指南:从栅格系统到组件化开发
开发语言·前端·javascript·前端框架·bootstrap·ecmascript·less
前端 贾公子4 分钟前
3.响应式系统基础:从发布订阅模式的角度理解 Vue2 的数据响应式原理(上)
前端·javascript·vue.js
2501_940041747 分钟前
纯前端高阶实战:涵盖3D、音频可视化与复杂交互的开发命题
前端
AIFQuant8 分钟前
外汇交易平台技术栈深度解析:行情 API、清算、风控、前端一体化方案
前端·python·websocket·金融·restful
NiceCloud喜云8 小时前
Opus 4.8 的 Effort Control 怎么选:Low 到 Max 五档策略
android·java·大数据·前端·c++·python·spring
杨连江8 小时前
仿人脑抑制机制的图像识别网络抗全域异常激活算法研究
经验分享·神经网络
wordbaby9 小时前
React Native + RNOH:跨页面数据回传的最佳实践与避坑指南
前端·react native
丷丩9 小时前
MapLibre GL JS第22课:查看本地GeoJSON
前端·javascript·map·mapbox·maplibre gl js
jiayong239 小时前
面试中遇到不熟悉问题的应对策略深度解析
面试·职场和发展