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

devtools/2024/9/24 21:19:00/

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

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

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

3c00f7dd29b74e6c97c1d478ae5bc830.png

 

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

6bd4a06fa4744b3c819811f468789f7d.png

 

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

0e15d1f478f9460c94acba510653c57d.png

 

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

0e92d5debe35462d916bf5d1169cff8b.png 

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

e5aad3ce3ff345a9b6a8cc629a05fcb2.png

2240522863794bd2afbf362dcd2bd452.png 

b64ef475bb29445fa8a4451c83ca98bc.png 

 4093ce5a1090451eb0fdeefb37e421ee.png

 

(6)效果展示:

7c624224b5f34aec907cc6598085cd40.png

 

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

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

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

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

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


http://www.ppmy.cn/devtools/43962.html

相关文章

前端面试题日常练-day40 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末 1. Bootstrap 的栅格系统是基于&#xff08; &#xff09;进行布局的。A. 像素 B. 百分比 C. 媒体查询 2. 在 Bootstrap 中&#xff0c;要创建一个按钮&#xff0c;可以使用&#xff08; &#xff…

多模态交互式 AI 代理的兴起:探索 Google 的 Astra 和 OpenAI 的 ChatGPT-4o应用

OpenAI的发展 聊天GPT-4o 和 谷歌的阿斯特拉 标志着交互式人工智能代理的新阶段&#xff1a;多模式交互式人工智能代理的兴起。这次旅程开始于 Siri 和 Alexa的&#xff0c;它将语音激活的人工智能带入主流用途&#xff0c;并通过语音命令改变了我们与技术的交互。尽管有影响&a…

怎么学编程入门:一步步揭开编程世界的神秘面纱

怎么学编程入门&#xff1a;一步步揭开编程世界的神秘面纱 在数字化飞速发展的今天&#xff0c;编程已成为一项不可或缺的技能。然而&#xff0c;对于初学者来说&#xff0c;编程的世界似乎充满了无尽的困惑和挑战。那么&#xff0c;怎么学编程入门呢&#xff1f;接下来&#…

德克萨斯大学奥斯汀分校自然语言处理硕士课程汉化版(第二周) - 多类别分类和神经网络

多类别分类和神经网络 1. 多类别分类2. 多类别感知机和多类别逻辑回归3. 多类别分类的场景4. 分类公平性5. 神经网络6. 神经网络可视化7. 神经网络的前向传播和反向传播8. 神经网络的训练与优化 1. 多类别分类 分类是一个预测建模问题&#xff0c;它涉及到在给定输入的情况下…

海外仓储管理系统:提升效率,标准化海外仓管理,科技赋能业务

海外仓作为跨境物流的关键一环&#xff0c;完全可以说海外仓的效率直接决定了后续物流的整体运作效率。 对于海外仓而言&#xff0c;一套高效&#xff0c;易用的海外仓储系统&#xff0c;无疑将成为提升企业竞争力的重要工具&#xff0c;帮助海外仓实现从野蛮生长到标准化管理…

基于springboot+vue的社区医院管理服务系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

企业如何打造通证经济生态闭环详解(中)

全球化企业通证积分管理系统中通证积分如何发行&#xff1f; 首先提倡的是健康、绿色的通证资产&#xff0c;所有的通证资产不能通过与现金的买卖获得&#xff0c;是通过在平台完成对应的任务获得&#xff0c;是通过奖励的形式释放给用户。主要有哪些形式的任务可以释放通证积…

每日复盘-20240529

20240529 六日涨幅最大: ------1--------300956--------- 英力股份 五日涨幅最大: ------1--------301361--------- 众智科技 四日涨幅最大: ------1--------301361--------- 众智科技 三日涨幅最大: ------1--------300637--------- 扬帆新材 二日涨幅最大: ------1--------30…