搜索
查看
编辑修改
首页
UNITY
NODEJS
PYTHON
AI
GIT
PHP
GO
CEF3
JAVA
HTML
CSS
搜索
小蓝xlanll
这个屌丝很懒,什么也没留下!
关注作者
热门标签
jquery
HTML
CSS
PHP
ASP
PYTHON
GO
AI
C
C++
C#
PHOTOSHOP
UNITY
iOS
android
vue
xml
爬虫
SEO
LINUX
WINDOWS
JAVA
MFC
CEF3
CAD
NODEJS
GIT
Pyppeteer
article
热门文章
1
【MSP432电机驱动学习—上篇】TB6612带稳压电机驱动模块、MG310电机、霍尔编码器
2
如何刷Leetcode?【从400到700到900的全网总结篇】_带你刷leetcode
3
多示例学习相关知识_多彁的知识,弽集多彁的实例,反复分析体会多彁的彃用
4
mysql保存数据提示:Out of range value for column错误_mysql执行sql 提示 out of range
5
php curl 连接超时,phpcurl超时设置详解
6
基于linux的网络编程_linux 网络编程
7
前端项目使用docker编译发版和gitlab-cicd发版方式
8
什么是SLA服务可用性
9
火焰识别python_基于Python的火焰识别程序
10
构建Web UI自动化测试平台
当前位置:
article
> 正文
前端面试:项目细节重难点问题分享
作者:小蓝xlanll | 2024-05-28 13:28:50
赞
踩
前端面试:项目细节重难点问题分享
面试官提问:我现在给你出一个项目实际遇到的问题:由于后端比较忙,所以我们这边的列表数据排序需要前端最近实现,那你会怎么实现排序呢?
答:我的回答:确实,数据都是由后端实现的,前端只是负责获取后展示数据到页面,但如果前端来实现列表数据排序,我必须了解以下内容:
(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
- 返回值:返回排序后的数组
- 注意:会直接修改原数组,而不是创建一个新的数组
声明:
本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:
https://www.wpsshop.cn/w/小蓝xlanll/article/detail/637759
推荐阅读
article
OneDrive
一直
后台占用
CPU
的一种
解决办法
...
系统版本:Windows 7 ultimate x64Onedrive版本:17.3.6998.0830最近发现Oned...
赞
踩
article
【
保驾护航
】
HarmonyOS
应用开发者基础认证-题库-2024_
关于
video
组件
的
回调
事件
,下列...
通过系统化
的
课程学习,熟练掌握ArkTSArkUI预览器模拟器SDK等
HarmonyOS
应用开发
的
关键概念,具备基础
的
应...
赞
踩
article
uniapp
的
App
端
内嵌
uniapp
的
H5
端
并实现通讯
传参
_
uniapp
和h5传值...
uniapp
的
App
端
内嵌
uniapp
的
H5
端
并实现通讯
传参
,网上有好多方法,实用
的
不太多,找到自己合适
的
方法
_
unia...
赞
踩
article
华睿
相机
sdk
开发
_
basler
相机
sdk
开发
例子说明——
c++
...
1 软硬件准备:
basler
aca1600-20gm
相机
,win10 x64, vs2013,opencv3.12 下...
赞
踩
article
Windows
10
IoT
Enterprise
2019
LTSC
High
End
OEM
S...
是
Windows
10 的一个变体,专门用于工业设备、嵌入式系统和物联网设备。指的是长期服务渠道版本,这意味着该版本专...
赞
踩
article
2024年Web
前端
最全
vue
后台
项目
中遇到
的
技术难点以及
解决方案
,2024
前端
大厂
面试
真题_
vue
...
对于框架原理只能说个大概,真
的
深入某一部分具体
的
代码和实现方式就只能写出一个框架,许多细节注意不到。开源分享:【大厂
前端
...
赞
踩
article
Git
使用
笔记
总结
_
git
使用
经验
总结
用法...
Git
使用
总结
文章目录
Git
使用
总结
Git
介绍
Git
安装Win版本安装Linux版本安装yum命令安装方式编译
Git
源码...
赞
踩
article
浅谈水坑攻击之结合
xss
平台钓鱼
获取
浏览器
记录和
微信
数据
_
xss
获取
微信
...
希望各位读者看完我们的文章以后自己去实践一下,只有学到脑子里的东西才是自己的,如果遇到困难,可以加本人
微信
(i
_
stil...
赞
踩
article
微信
小
程序
webview
和
小
程序
通讯_
微信
小
程序
和
webview
通信...
1.1需要再
小
程序
嵌入vr页面,同时在vr页面添加操作按钮与
小
程序
进行通信交互1.3 开发工具:uniapp开发
小
程序
1...
赞
踩
article
数据结构
栈和
队列
...
栈与
队列
--C语言实现
数据结构
栈和
队列
个人主页:星纭-CSDN博客 系列文章专栏:
数据结构
...
赞
踩
article
Manjaro
软件
配置与
安装
_
manjaro
安装
软件
...
已经入
manjaro
的坑,因为xfce4轻量、稳定,于是选择的
manjaro
桌面环境为xfce4。这里记下关于manja...
赞
踩
article
【
性能
测试
】13年老鸟总结,常见
性能
瓶颈
定位
分析
(超详细)_
性能
测试
常见问题
定位
...
压测过程中TPS上不去?请求响应时间过长?硬件资源不足:服务器的CPU、内存、磁盘等硬件资源不足,无法支撑高并发的请求处...
赞
踩
article
Camera
TTC
估计
_ttc
计算
高度...
本章我们将介绍使用
Camera
估计
与前车的
TTC
(Time To Collision)。首先我们将展示如何基于Camer...
赞
踩
article
Manjaro
/
Arch
软件配置
安装
_
manjaro
安装
arch
命令...
双系统
Arch
Linux 配置双系统挂载磁盘_
manjaro
安装
arch
命令
manjaro
安装
arch
命令 ...
赞
踩
article
Jenkins
+
SVN
自动化构建部署_
jenkins
svn
...
Jenkins
+
SVN
_
jenkins
svn
jenkins
svn
花了几天时间终于简单把Je...
赞
踩
article
Carsim
联合
Simulink
的车辆
AEB
仿真(时间、
距离
算法
)_安全
距离
逻辑
算法
...
最近在做关于
AEB
的联合仿真,做一个简单的记录以及教学。Carisim版本:
Carsim
2019.0Matlab版本:M...
赞
踩
article
【
Shader
】角色受击闪白效果
_
unity
2d
游戏
shader
处理受到伤害
的
闪红...
Shader
"Custom/BeAttackFlashColor"{ Properties {
_
MainTex (...
赞
踩
article
Web
安全
之
水坑
攻击
(
Watering
Hole
Attack
)详解...
水坑
攻击
(
Watering
Hole
Attack
)是一种精心策划的网络
攻击
策略,针对目标群体的用户,通过感染他们经常访...
赞
踩
article
VisionPro
无法连接
IDS
USB
相机
_
visionpro
使用usb
相机
...
VisionPro
无法连接
IDS
USB
相机
,需要安装AIK Driver来解决该问题。然而官网上无法下载此驱动,导致I...
赞
踩
article
Unity
图集
优化原理_
unity
图集
原理...
Unity
优化_
unity
图集
原理
unity
图集
原理 Uni...
赞
踩
相关标签
harmonyos
华为
鸿蒙
前端
uni-app
华睿相机sdk 开发
物联网
微软
vue.js
面试
git
git使用
git秘籍
gitblit
SourceTree
安全
网络安全
web安全
xss
小程序
微信小程序
uniapp
webview
数据结构