前端面試:項目細節重難點問題分享

面試官提問:我現在給你出一個項目實際遇到的問題:由于后端比較忙,所以我們這邊的列表數據排序需要前端最近實現,那你會怎么實現排序呢?

答:我的回答:確實,數據都是由后端實現的,前端只是負責獲取后展示數據到頁面,但如果前端來實現列表數據排序,我必須了解以下內容:

(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.pswp.cn/diannao/13901.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/13901.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/13901.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

kotlin基礎之空指針檢查、字符串表達式、函數默認值

Kotlin 的空指針檢查 Kotlin 是一種空安全的語言&#xff0c;這意味著它強制開發者明確地處理可能的空值。在 Kotlin 中&#xff0c;所有的變量默認都是非空的&#xff0c;除非顯式地標記為可為空。 聲明可為空的變量 你可以通過在類型后面添加 ? 來聲明一個變量可以為空&a…

基于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方法為常見場景提供了模…

[C++] 小游戲 能量 1.0.0 版本 zty出品

大家好&#xff0c;也是停更了一段時間&#xff0c;這段時間我去學習了&#xff08;其實是摸魚&#xff09;&#xff0c;今天帶來一個新游戲《能量》&#xff0c;規則為&#xff1a;使用能量技能來增加能量&#xff0c;消耗能量使用攻擊技能來攻擊對方&#xff0c;有三個攻擊技…

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;…

Unity限制鼠標光標位置

限制鼠標光標位置 private void Awake() {Cursor.lockState CursorLockMode.Confined;//Cursor.visible false;隱藏鼠標光標 }●Confined&#xff1a;限制光標到游戲窗口。 ●Locked&#xff1a;鎖定光標到游戲窗口的中心并隱藏。 ●None&#xff1a;不被修改。

項目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;幫助大家…

深度學習(文章鏈接匯總)

神經網絡與深度學習-簡要入門 動手學深度學習-pytorch版本&#xff08;一&#xff09;&#xff1a;引言 & 預備知識 動手學深度學習-pytorch版本&#xff08;二&#xff09;&#xff1a;線性神經網絡 YOLOv8 學習與環境配置

XSS漏洞

漏洞描述 XSS全名叫Cross Site Scripting(跨站腳本攻擊)因為簡寫和css同名所以改名為XSS&#xff0c;該漏洞主要利用javascript可以控制html&#xff0c;css&#xff0c;瀏覽器的行為從而惡意利用&#xff0c;當開發人員未對輸入的內容進行過濾或編碼時&#xff0c;惡意用戶在…

蒼穹外賣①

1.BeanUtils.copyProperties(orders,orderVO); BeanUtils.copyProperties 是 Java 中 Apache Commons BeanUtils 庫的一個方法&#xff0c;它用于將一個 Java Bean 的屬性復制到另一個 Java Bean。這個方法非常適合于對象之間的屬性復制&#xff0c;尤其是當源對象和目標對象的…

云服務器上部署Kubernetes集群(K8S)

master節點&#xff1a;master node節點&#xff1a;node1 由于是ubuntu系統&#xff0c;參考兩個博客配置 安裝vmware搭建k8s集群&#xff08;親試無坑&#xff09;-CSDN博客 該博客是centos系統&#xff0c;所以稍微有點區別結合另一篇博客一起參考 kubernetes集群…