js怎麼實作中文拼音的A-Z排序
這次帶給大家js怎麼實現中文拼音的A-Z排序,js實作中文拼音的A-Z排序的注意事項有哪些,下面就是實戰案例,一起來看一下。
實作中文依照A-Z的方法,可以在vue的methods裡面寫入:
methods:{ pySort:function(arr,empty){ var $this = this; if(!String.prototype.localeCompare) return null; var letters = "ABCDEFGHJKLMNOPQRSTWXYZ".split(''); var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split(''); var arrList = []; for(var m =0;m<arr.length;m++){ arrList.push(arr[m].name); } var result = []; var curr; for(var i=0;i<letters.length;i++){ curr = {letter: letters[i], data:[]}; if(i!=26){ for(var j =0;j<arrList.length;j++){ var initial = arrList[j].charAt(0);//截取第一个字符 if(arrList[j].charAt(0)==letters[i]||arrList[j].charAt(0)==letters[i].toLowerCase()){ //首字符是英文的 curr.data.push(arrList[j]); }else if(zh[i]!='*'&&$this.isChinese(initial)){ //判断是否是无汉字,是否是中文 if(initial.localeCompare(zh[i]) >= 0 &&(!zh[i+1]||initial.localeCompare(zh[i+1]) <0)) { //判断中文字符在哪一个类别 curr.data.push(arrList[j]); } } } }else{ for(var k =0;k<arrList.length;k++){ var ini = arrList[k].charAt(0); //截取第一个字符 if(!$this.isChar(ini)&&!$this.isChinese(ini)){ curr.data.push(arrList[k]); } } } if(empty || curr.data.length) { result.push(curr); //curr.data.sort(function(a,b){ // return b.localeCompare(a); //排序,英文排序,汉字排在英文后面 //}); } } return result; }, isChinese:function(temp){ var re=/[^\u4E00-\u9FA5]/; if (re.test(temp)){return false;} return true ; }, isChar:function(char){ var reg = /[A-Za-z]/; if (!reg.test(char)){return false ;} return true ; } }
從php中取得的json物件轉換成陣列,vue中直接呼叫->this.pySort(arr); js直接呼叫pySort(arr)方法即可 即可實作按照A-Z的格式排序
# 如下圖在控制台輸出的格式:
letter中存放鍵值A-Z
# data:存放排序後的陣列
# 至於vue中需要放在頁面中,使用v-for迴圈即可 v-for="(key,value) in arr"
# 需要取得data數組的值,繼續使用v-for="tmp in (key.data)"循環在你想要輸入擺放的元素中
# 寫的比較簡單,這個方法在js中也通用
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是js怎麼實作中文拼音的A-Z排序的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

熱門話題

本文將介紹如何在Windows11/10中根據拍攝日期對圖片進行排序,同時探討如果Windows未按日期排序圖片應該如何處理。在Windows系統中,合理整理照片對於方便尋找影像檔案至關重要。使用者可以根據不同的排序方式(如日期、大小和名稱)來管理包含照片的資料夾。此外,還可以根據需要設定升序或降序排列,以便更靈活地組織文件。如何在Windows11/10中按拍攝日期對照片進行排序要按在Windows中拍攝的日期對照片進行排序,請執行以下步驟:打開圖片、桌面或放置照片的任何資料夾在功能區選單中,單

Outlook提供了許多設定和功能,可協助您更有效地管理工作。其中之一是排序選項,可讓您根據需要對電子郵件進行分類。在這個教學中,我們將學習如何利用Outlook的排序功能,根據寄件者、主題、日期、類別或大小等條件對電子郵件進行整理。這將讓您更輕鬆地處理和查找重要訊息,提高工作效率。 MicrosoftOutlook是一個功能強大的應用程序,可以輕鬆地集中管理您的電子郵件和日曆安排。您可以輕鬆地發送、接收和組織電子郵件,而內建的日曆功能也讓您能夠輕鬆追蹤您即將面臨的活動和約會。如何在Outloo

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

在我們的工作中,常常會用到wps軟體,wps軟體處理資料的方式方法是非常多的,而且函數功能也是非常強大的,我們常用函數來求平均值,求總和等,可以說只要是統計數據能用的方法,wps軟體庫裡都已經為大家準備好了,下面我們要介紹的是wps怎麼排序成績高低的操作步驟,看完以後大家可以藉鑑經驗。 1.先開啟需要排名的表格。如下圖所示。 2、然後輸入公式=rank(B2,B2:B5,0),一定要輸入0。如下圖所示。 3、輸入完公式以後,按下電腦鍵盤上的F4鍵,這一步驟操作是為了讓相對引用變成絕對引用。

Ubuntu系統中使用拼音輸入法無法正確打字,輸入法上顯示出來的字和你想打的字並不相關,你無法打出你想要輸入的漢字,這種現像比較常出現在升級Ubuntu系統後。我們該怎麼解決這個問題呢?下面小編就為大家帶來Ubuntu系統拼音無法正確打字的解決方法。一起去看看吧!方法如下:1、在桌面按“Ctrl”+“Alt”+“T”,開啟系統終端:2、在終端機裡面輸入ibus-daemon-drx並回車:ibus-daemon-drx再輸入pinyin
