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

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

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

(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.mzph.cn/diannao/13901.shtml

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

相关文章

基于MetaGPT构建单智能体

前言 在之前的文章中&#xff0c;我们详细地描述了Agent的概念和组成&#xff0c;在代码案例中体验了Agent的记忆、工具、规划决策模块&#xff0c;并通过几个Agent框架来加强读者对Agent开发设计与应用的理解&#xff0c;接下来我们就要进入智能体Agent的实际开发中&#xff0…

教师专属的成绩发布小程序

还在为成绩发布而烦恼&#xff1f;还在担心家长无法及时获得孩子的学习反馈&#xff1f;是否想要一个既安全又高效的工具来简化你的教学工作&#xff1f;那么&#xff0c;易查分小程序可能是你一直在寻找的答案。 现在的老师们有了超多的工具来帮助我们减轻负担&#xff0c;提高…

多式联运奇迹:探索 GPT-4o 的尖端功能

取得的显着进展的DigiOps与人工智能已经标志着重要的里程碑&#xff0c;随着时间的推移塑造了人工智能系统的能力。从早期基于规则系统的出现机器学习和深入学习&#xff0c;人工智能已经发展得更加先进和通用。 生成式预训练 Transformer (GPT) by OpenAI 已特别值得注意。每…

微服务远程调用 RestTemplate

Spring给我们提供了一个RestTemplate的API&#xff0c;可以方便的实现Http请求的发送。 同步客户端执行HTTP请求&#xff0c;在底层HTTP客户端库(如JDK HttpURLConnection、Apache HttpComponents等)上公开一个简单的模板方法API。RestTemplate通过HTTP方法为常见场景提供了模…

Algoriddim djay Pro Ai for Mac:AI引领,混音新篇章

当AI遇上音乐&#xff0c;会碰撞出怎样的火花&#xff1f;Algoriddim djay Pro Ai for Mac给出了答案。这款专业的DJ混音软件&#xff0c;以AI为引擎&#xff0c;引领我们进入混音的新篇章。 djay Pro Ai for Mac的智能混音功能&#xff0c;让每一位DJ都能感受到前所未有的创作…

计算机系统基础 7 分支程序的实现

简单条件转移指令 根据单个标志位的值&#xff08;CF&#xff0c; SF&#xff0c;OF&#xff0c;PF&#xff0c;ZF&#xff09;来确定是否转移&#xff0c; 如果条件成立&#xff0c;则&#xff08;EIP&#xff09; 位移量 ➡ EIP&#xff0c;否则什么也不做。 注意&#xff0…

深度学习500问——Chapter09:图像分割(4)

文章目录 9.10 Mask-RCNN 9.10.1 Mask-RCNN 的网络结构示意图 9.10.2 RCNN行人检测框架 9.10.3 Mask-RCNN 技术要点 9.11 CNN在基于弱监督学习的图像分割中的应用 9.11.1 Scribble 标记 9.11.2 图像级别标记 9.11.3 DeepLabbounding boximage-level labels 9.11.4 统一的框架 9…

作为 App 开发者会推荐安装的 Mac App

Xcode&#xff0c;作为 App 开发者&#xff0c;必须安装的工具。当然&#xff0c;有经验的开发者不会从 Mac App Store 下载&#xff0c;而是从网站下载&#xff0c;除了安装过程更可控&#xff0c;也方便多版本共存。此外&#xff0c;我不信任任何第三方下载方式&#xff1a; …

表面简单实则暗藏玄机的面试题:Java数组适合做队列吗?

Java数组本身是一种线性数据结构&#xff0c;它可以用来存储一系列固定大小的元素。尽管数组可以用于实现队列的一些基本操作&#xff0c;比如入队&#xff08;enqueue&#xff09;和出队&#xff08;dequeue&#xff09;&#xff0c;但由于其固定的大小&#xff0c;它并不适合…

开关电源重点可靠性测试项目与测试方法

为确保开关电源在复杂工作环境下的安全性与稳定性&#xff0c;各种安全性测试成为不可或缺的环节。本文将深入探讨几项关键的安全性测试项目&#xff0c;帮助用户全面了解如何评估开关电源的可靠性和安全性。 一、过压保护测试方法 目的是为了检测当输出电压过高时&#xff0c;…

项目9-网页聊天室2(登录)

0.前端知识储备 Ajax请求中的async:false/true的作用 - front-gl - 博客园 (cnblogs.com) 01.前端页面展示 02.后端代码 2.1 CONTROLLER RequestMapping("/login")public Result login(String username, String password, HttpSession httpSession){User user …

乡村振兴与农村社会治理现代化:加强农村社会治理体系和治理能力现代化建设,提升乡村治理效能,为美丽乡村建设提供坚实保障

一、引言 在全面推进乡村振兴的伟大实践中&#xff0c;农村社会治理现代化是不可或缺的重要一环。随着时代的发展&#xff0c;传统的农村社会治理方式已经无法满足现代社会发展的需求。因此&#xff0c;加强农村社会治理体系和治理能力现代化建设&#xff0c;提升乡村治理效能…

2024年电工杯数学建模竞赛思路资料汇总贴

下文包含&#xff1a;2024电工杯&#xff08;电工杯数学建模竞赛&#xff09;思路解析、电工杯参赛时间及规则信息说明、好用的数模技巧及如何备战数学建模竞赛 C君将会第一时间发布选题建议、所有题目的思路解析、相关代码、参考文献、参考论文等多项资料&#xff0c;帮助大家…

XSS漏洞

漏洞描述 XSS全名叫Cross Site Scripting(跨站脚本攻击)因为简写和css同名所以改名为XSS&#xff0c;该漏洞主要利用javascript可以控制html&#xff0c;css&#xff0c;浏览器的行为从而恶意利用&#xff0c;当开发人员未对输入的内容进行过滤或编码时&#xff0c;恶意用户在…

【Spring security】【pig】Note03-pig token令牌解析器过程

&#x1f338;&#x1f338; pig token令牌解析器过程 &#x1f338;&#x1f338; pig后端源码 一、解析请求中的令牌值。 二、验证令牌 内省并验证给定的令牌&#xff0c;返回其属性。返回映射表示令牌有效。 /*** author lengleng* date 2019/2/1 扩展用户信息*/ publi…

跨境小白shopee被封号的原因?如何有效预防?

提到跨境电商平台&#xff0c;大家都知道亚马逊、Temu、TikTok shop这些是比较大的电商平台。但最近几年&#xff0c;在东南亚市场上&#xff0c;Shopee虾皮却是颇负盛名的一个跨境电商平台&#xff0c;这也让众多中国跨境小白蜂拥而至。目前shopee的商家正在不断增多&#xff…

DeepDriving | CUDA编程-02: 初识CUDA编程

本文来源公众号“DeepDriving”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;CUDA编程-02&#xff1a; 初识CUDA编程 上一篇文章DeepDriving | CUDA编程-01&#xff1a; 搭建CUDA编程环境-CSDN博客介绍了如何搭建CUDA编程环境&a…

web压力测试,要不要过滤掉JS,CSS等请求?

在进行性能测试&#xff08;压测&#xff09;时&#xff0c;是否过滤掉对JavaScript、CSS等静态资源的请求&#xff0c;取决于你测试的目标和目的。 是测试服务端的性能还是前端的性能。这两种目的所涉及到的测试场景和工具等方法是不一样的。 一般的web产品&#xff0c;像cs…

java 8--Lambda表达式,Stream流

目录 Lambda表达式 Lambda表达式的由来 Lambda表达式简介 Lambda表达式的结构 Stream流 什么是Stream流&#xff1f; 什么是流呢&#xff1f; Stream流操作 中间操作 终端操作 Lambda表达式 Lambda表达式的由来 Java是面向对象语言&#xff0c;除了部分简单数据类型…

利用kubeadm安装k8s集群 以及跟harbor私有仓库下载镜像

目录 环境准备 master&#xff08;2C/4G&#xff09; 192.168.88.3 docker、kubeadm、kubelet、kubectl、flannel node01&#xff08;2C/2G&#xff09; 192.168.88.4 docker、kubeadm、kubelet、kubectl、flannel node02&#xff08;…