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

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

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

(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.rhkb.cn/news/329027.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-19讲 串口实验UART

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

嵌入式硬件中PCB走线与过孔的电流承载能力分析

简介 使用FR4敷铜板PCBA上各个器件之间的电气连接是通过其各层敷着的铜箔走线和过孔来实现的。 由于不同产品、不同模块电流大小不同,为实现各个功能,设计人员需要知道所设计的走线和过孔能否承载相应的电流,以实现产品的功能,防止过流时产品烧毁。 文中介绍设计和测试FR4敷…

Windows系统安装OpenSSH使用VScode远程连接内网Linux服务器开发

文章目录 &#x1f4a1;推荐 前言1、安装OpenSSH2、VS Code配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网…

Nginx/阿里云/二级域名的配置和使用

阿里云域名解析配置如下&#xff1a; nginx配置如下&#xff1a; 访问地址&#xff1a; zhadmin.iotzzh.com image.png

Hotcoin Research | 市场洞察:2024年5月13日-5月19日

加密货币市场表现 目前&#xff0c;加密货币总市值为1.32万亿&#xff0c;BTC占比54.41%。 本周行情呈现震荡上行的态势&#xff0c;BTC在5月15日-16日&#xff0c;有一波大的拉升&#xff0c;周末为震荡行情。BTC现价为67125美元。 上涨的主要原因&#xff1a;美国4月CPI为3…

深度学习之基于YoloV5钢材微小缺陷检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与目标 在钢材生产过程中&#xff0c;由于各种因素&#xff0c;钢材表面可能会出现微小缺陷&#xff…

C# OpenCvSharp 模拟生成车辆运行视频

C# OpenCvSharp 模拟生成车辆运行视频 目录 效果 项目 代码 下载 效果 项目 代码 using OpenCvSharp; using OpenCvSharp.Extensions; using System; using System.Diagnostics; using System.Drawing; using System.Windows.Forms; namespace OpenCvSharp_Demo { p…

海外云手机的运作原理和适用场景

海外云手机是一种基于云计算技术的虚拟手机服务&#xff0c;通过将手机操作系统和应用程序托管在远程服务器上&#xff0c;实现用户可以通过互联网连接来使用和管理手机功能&#xff0c;而无需实际拥有物理手机。以下是有关海外云手机的相关信息&#xff1a; 海外云手机的运作原…

树莓派3B+入门(无外设)

昨日刚到一块树莓派3B&#xff0c;甚是喜爱&#xff0c;然半宿未眠 1、下载 在官网先下载烧录文件https://www.raspberrypi.com/software/ 下载完毕打开&#xff0c;选择&#xff0c;根据自己板子型号定 操作系统用最新的就行&#xff0c;64位不太稳定 储存卡&#xff0c;需…

超声波清洗机哪家好一点?四款超一流超声波清洗机大盘点

在追求极致清洁和维护精密工具、设备及珍贵物品的时代&#xff0c;超声波清洗机显得尤为重要。不仅因其高效、快速的清洁效果&#xff0c;更因其能够触及传统手工清洁所不能及的微小缝隙。无论你是珠宝设计师、机械工程师、还是热爱生活的普通家庭用户&#xff0c;超声波清洗机…

C语言例题43、打印倒立金字塔

#include <stdio.h>void main() {int i, j;for (i 5; i > 0; i--) {for (j 5; j > i; j--) {//输出空格printf(" ");}for (j 2 * i; j > 1; j--) {//输出星号printf("* ");}printf("\n");} }运行结果&#xff1a; 本章C语言…

【高阶数据结构(四)】图的最短路径问题

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:高阶数据结构专栏⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多数据结构   &#x1f51d;&#x1f51d; 高阶数据结构 1. 前言2. 单源最短…

基于springboot实现大学生就业需求分析系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现大学生就业需求分析系统演示 摘要 信息数据从传统到当代&#xff0c;是一直在变革当中&#xff0c;突如其来的互联网让传统的信息管理看到了革命性的曙光&#xff0c;因为传统信息管理从时效性&#xff0c;还是安全性&#xff0c;还是可操作性等各个方面来讲…

移动端适配(rem,vw)+响应式布局

1.1视口标签&#xff08;逻辑分辨率和设备匹配&#xff09; 1.2二倍图&#xff08;防止失真&#xff09; 二、适配方案 一、rem 1.1媒体查询 1.2、引入js文件&#xff08;remflexble.js&#xff09; 1.2、less Less 是一种动态样式语言&#xff0c;它扩展了 CSS 的功能&#…

sklearn之线性回归——以上证红利指数为例

文章目录 线性回归概念使用sklearn实现上证中立指数预测内置数据集的加载与处理 外部数据集的加载和处理数据内容数据加载和处理 开始预测分割数据集导入线性回归模型查看线性回归模型的系数绘制预测结果预测效果评估 最终代码 线性回归 线性回归&#xff08;Linear Regressio…

大数据比赛-环境搭建(二)

一、ubuntu安装google 1、下载google的Linux安装版 链接&#xff1a;https://pan.baidu.com/s/1w4Hsa1wbJDfC95fX2vU_1A 提取码&#xff1a;xms6 或者&#xff1a;Google Chrome 64bit Linux版_chrome浏览器,chrome插件,谷歌浏览器下载,谈笑有鸿儒 (chromedownloads.net) …

AI办公自动化:用kimi批量把word转换成txt文本

在Kimichat中输入提示词&#xff1a; 你是一个Python编程专家&#xff0c;要完成一个Python脚本编写的任务&#xff0c;具体步骤如下&#xff1a; 打开文件夹&#xff1a;F:\aword 读取里面docx格式的word文档&#xff0c; 提取word文档中的第一行文字作为txt文本文档的标题…

【Python】使用requests采集数据存入mysql或文件

一、什么是requests requests包是一个使用Python编写的HTTP请求库&#xff0c;使得发送HTTP请求和处理HTTP响应变得更加简单。以下是对requests包的详细介绍&#xff1a; 用途&#xff1a; requests包主要用于与HTTP交互&#xff0c;能够发送HTTP请求和处理HTTP响应。它支持处…

软考--试题六--抽象工厂模式(Abstract Factory)

抽象工厂模式(Abstract Factory) 意图 提供一个创建一系列相关或相互依赖对象的接口&#xff0c;而无须指定他们具体的类 结构 适用性 1、一个系统要独立于它的产品的创建、组合和表示时 2、一个系统要由多个产品系统中的一个来配置时 3、当要强调一系列相关的产品对象的设…

【Linux系统编程】第十九弹---进程状态(下)

​​​​​​​ ✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、僵尸进程 2、孤儿进程 3、运行状态 4、阻塞状态 5、挂起状态 6、进程切换 总结 1、僵尸进程 上一弹…