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

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

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

(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

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

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

相关推荐

  1. 前端项目有关面试

    2024-05-25 18:00:48       64 阅读
  2. 前端面试常见问题

    2024-05-25 18:00:48       39 阅读
  3. Scala 难点总结

    2024-05-25 18:00:48       38 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-25 18:00:48       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-25 18:00:48       106 阅读
  3. 在Django里面运行非项目文件

    2024-05-25 18:00:48       87 阅读
  4. Python语言-面向对象

    2024-05-25 18:00:48       96 阅读

热门阅读

  1. Spring: OncePerRequestFilter

    2024-05-25 18:00:48       31 阅读
  2. 缪尔赛思又来到了你的面前(哈希)

    2024-05-25 18:00:48       27 阅读
  3. #php把pdf文件转成图片#

    2024-05-25 18:00:48       32 阅读
  4. 在已创建的git工程中添加.gitignore

    2024-05-25 18:00:48       36 阅读
  5. git忽略文件不生效解决方案

    2024-05-25 18:00:48       37 阅读
  6. git-将老项目的分支推送到新项目的新分支上

    2024-05-25 18:00:48       39 阅读
  7. ffmpeg3.1.1版本连接ftp服务器失败

    2024-05-25 18:00:48       30 阅读
  8. ubuntu22部署 vue 和 springboot项目

    2024-05-25 18:00:48       34 阅读