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

news2024/9/22 13:32: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.coloradmin.cn/o/1707016.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2024年上半年软件设计师试题及答案(回忆版)--选择题

基础知识选择题 基础知识选择题 1,2,3][4,5,6][1,2,3,4,5,6] &#xff08;总&#xff1a;1分&#xff09; &#xff08;注意&#xff1a;括号内的是截止当前题目总分&#xff09; vlan不能隔绝内外网 &#xff08;2分&#xff09; 链路层使用交换机&#xff0c;…

关于已配好java环境但双击无法打开jar包的解决方案

如果你已经装好了 java 环境直接跳到最后看解决方法即可 先说一下你安装的 java 环境&#xff0c;如果完全是默认选项安装&#xff0c;则会安装 jdk 和 jre&#xff0c;并且在安装 jre 时还需要安装目录下为空&#xff0c;其实 jre 的安装是多余的&#xff0c;因为安装的 jdk 里…

Integer包装类

面试题&#xff1a; 自动装箱:把基本数据类型会自动的变成其对应的包装类 自动拆箱:把包装类自动的变成其对象的基本数据类型 package Integer;public class Demo {public static void main(String[] args) {Integer i 10;String binaryString Integer.toBinaryString(i);Str…

pyqt QLineEdit单行文本框控件

pyqt QLineEdit单行文本框控件 介绍效果代码 介绍 QLineEdit 是 PyQt中的一个控件&#xff0c;用于输入和编辑单行文本。它允许用户输入和编辑一行纯文本&#xff0c;并提供了许多有用的功能&#xff0c;如文本验证、密码输入&#xff08;显示为点或星号&#xff09;、自动完成…

ICode国际青少年编程竞赛- Python-6级训练场-递归入门

ICode国际青少年编程竞赛- Python-6级训练场-递归入门 1、 def recur(n):# 边界条件if n<1:return# 额外动作Dev.step(n)Dev.turnRight()# 递归调用recur(n-1)recur(8)2、 def recur(n):# 边界条件if n<1:return# 额外动作Dev.step(n)Dev.turnLeft()# 递归调用recur(n-1)…

一些Spring的理解

说说你对Spring的理解 首先Spring是一个生态&#xff1a;可以构建企业级应用程序所需的一切基础设施 但是&#xff0c;通常Spring指的就是Spring Framework&#xff0c;它有两大核心&#xff1a; IOC和DI 它的核心就是一个对象管理工厂容器&#xff0c;Spring工厂用于生产Bea…

初识STM32单片机-TIM定时器

初识STM32单片机-TIM定时器 一、定时器概述二、定时器类型2.1 基本定时器(TIM6和TIM7)2.2 通用定时器(TIM2、TIM3、TIM4和TIM5)2.3 高级定时器(TIM1和TIM8) 三、定时中断基本结构和时基单元工作时序3.1 定时器基本结构3.2 预分频器时序3.3 计数器时序3.3.1 计数器有无预装时序(…

七大获取免费https的方式

想要实现https访问最简单有效的的方法就是安装SSL证书。只要证书正常安装上以后&#xff0c;浏览器就不会出现网站不安全提示或者访问被拦截的情况。下面我来教大家怎么去获取免费的SSL证书&#xff0c;又如何安装证书实现https访问。 一、选择免费SSL证书提供商 有多家机构提…

国产PS插件新选择;StartAI平替中的佼佼者!

前言 在设计的世界里&#xff0c;每一个细节都至关重要。设计师们常常面临时间紧迫、创意受限、工具复杂等挑战。Photoshop虽强大&#xff0c;但繁琐的操作和高昂的成本往往令人望而却步。今天我就为大家介绍一款PSAI插件——StartAI&#xff0c;一款专为Photoshop设计的国产A…

手绘任意波

上位机发送手绘波形数据&#xff0c;下位机接收并输出。 支持 STM32 STC arduino Pico 等多种单片机&#xff0c;内置或外置 DAC 实现。 ​​​​​​​ 篇幅所限&#xff0c;更多内容请访问我的网站&#xff1a; jiangge12.github.io 十二江哥的网站 (jiangge12.github.io)…

什么是期权内在价值?怎么计算?

今天期权懂带你了解什么是期权内在价值&#xff1f;怎么计算&#xff1f;内在价值&#xff0c;也称为内涵价值、内在价格&#xff0c;指的是若期权合约到期&#xff0c;权利方能够赚到的市场价与行权价之间的差价收益。 什么是期权内在价值&#xff1f; 期权的内在价值是指期权…

window安装ffmpeg播放本地摄像头视频

1、安装ffmpeg ffmpeg官方网站&#xff1a;FFmpeg 下载后解压文件夹名为ffmpeg 2、设置环境变量 目录 1、安装ffmpeg 设置环境变量 以F:\software\after\ffmpeg\bin为例 在命令行中输入ffmpeg出现下方代表安装成功 3、通过ffmpeg播放本地电脑摄像头 鼠标右击开始按钮&…

R语言学习 - 箱线图一步法

箱线图 - 一步绘制 绘图时通常会碰到两个头疼的问题&#xff1a; 1、有时需要绘制很多的图&#xff0c;唯一的不同就是输入文件&#xff0c;其它都不需要修改。如果用R脚本&#xff0c;需要反复替换文件名&#xff0c;繁琐又容易出错。 (R也有命令行参数&#xff0c;不熟&…

3D开发工具HOOPS在BIM系统中的应用

建筑信息模型是一种革命性的建筑设计、施工和管理方法。它通过创建和利用数字信息来优化建筑项目的设计、施工和运营过程。在这个过程中&#xff0c;3D开发工具HOOPS扮演着至关重要的角色&#xff0c;为BIM系统提供了强大的技术支持和丰富的功能。HOOPS中文网http://techsoft3d…

IC开发——verdi基本用法

1. 基础知识 1.1. verdi VCS和Verdi这两个工具&#xff0c;这两个工具目前都属于synopsys公司。VCS主要负责编译运行Testbench和RTL&#xff0c;并负责生成相应的波形文件。而verdi主要负责加载波形文件&#xff0c;查看信号的波形及其对应的代码来进行调试验证。Verdi最开始…

Vulnhub靶机 whowantsobeking :1 打靶 渗透详细过程(萌新)

Vulnhub靶机搭建配置 先搭建vulnhub靶机&#xff1a;https://www.vulnhub.com/entry/who-wants-to-be-king-1,610/ 下载镜像之后whowantsobeking.ova后&#xff0c;用VMware Workstation Pro打开依次点击文件-打开&#xff0c;选择我们刚才下载的ova文件打开&#xff0c;修改…

EpicDesigner编辑器的源码修改和扩展“数据库”进行数据库字段设置

项目介绍&#xff1a; EpicDesigner是一个功能强大、开箱即用的拖拽式低代码设计器。它基于 Vue3 开发&#xff0c;兼容多套 UI 组件库&#xff0c;除了基础的页面设计功能&#xff0c;EDesigner 还提供了强大的扩展功能&#xff0c;可以让开发者根据自己的需求自由扩展和定制…

全局配置Maven

如果开着项目&#xff0c;就file->close project 如果创建有问题可以转到这篇rIDEA2024创建maven项目-CSDN博客https://blog.csdn.net/weixin_45588505/article/details/139271562?spm1001.2014.3001.5502

Android环境下Mesa初始化流程重学习之eglInitialize

Mesa初始化流程重学习之eglInitialize 引言 说来也惭愧&#xff0c;Mesa搞了这么久了&#xff0c;每次都想深入下&#xff0c;可是每次都是浅尝辄止了。这次趁着有了一定的闲暇时间并且有了调试景嘉微显卡的机会&#xff0c;还是想重新学习下&#xff0c;深入研究下&#xff0…

人生二选一:央企就业?美国做博士后?—请看她的抉择

一位30岁的女博士&#xff0c;收到国内央企和德国、美国的博士后邀请函&#xff0c;她该如何选择&#xff1f;知识人网小编推荐这篇文章&#xff0c;为大家解开谜题的同时&#xff0c;也给有同样纠结的学者提供一些启迪。 去年12月底的一个晚上&#xff0c;我收到美国一所高校发…