JavaScript將對(duì)象數(shù)組按字母順序排序的方法詳解
里給出三種解決方案:
1.if條件語句 + sort() 2.localeCompare() + sort() 3.Collator() + sort()
sort 用法
語法
array.sort(compareFunction)
參數(shù)值
| 參數(shù) | 描述 |
|---|---|
| compareFunction | 可選。定義替代排序順序的函數(shù)。該函數(shù)應(yīng)返回負(fù)值、零值或正值,具體取決于參數(shù),例如: function(a, b){ return a - b } sort() 方法比較兩個(gè)值時(shí),將值發(fā)送給比較函數(shù),根據(jù)返的(負(fù)、零、正)值對(duì)值進(jìn)行排序。 舉例: 比較 40 和 100 時(shí),sort() 方法調(diào)用比較函數(shù)(40,100)。 該函數(shù)計(jì)算 40-100,并返回 -60(負(fù)值)。 sort 函數(shù)會(huì)將 40 排序?yàn)樾∮?100 的值。 |
sort() 方法會(huì)改變?cè)紨?shù)組。
兼容性
Chrome、IE、Edge、Firefox、Safari、Opera 等 都支持 sort() 方法。
舉例
排序數(shù)組
var fruits = ["Banana", "Orange", "Apple", "Mango"]; var tzy = fruits.sort(); console.log(tzy);
輸出如下:

按升序排序
var points = [66, 100, 3, 10, 250, 88, 77]; var tzy = points.sort((a, b)=> a - b); console.log(tzy);
輸出如下:

按降序排序
var points = [66, 100, 3, 10, 250, 88, 77]; var tzy = points.sort((a, b)=> b - a); console.log(tzy);
輸出如下:

if 條件語句 + sort()
var list = [
{ FirsName: "Aaron", LastName: "Baker" },
{ FirstName: "Bert", LastName: "Green" },
{ FirstName: "Larry", LastName: "White" },
{ FirstName: "Victor", LastName: "Fox" },
]
function sortArray(x, y) {
if (x.LastName < y.LastName) { return -1; }
if (x.LastName > y.LastName) { return 1; }
return 0;
}
var tzy = list.sort(sortArray);
console.log(tzy);輸出如下:

localeCompare() + sort()
var list = [
{ FirsName: "Aaron", LastName: "Baker" },
{ FirstName: "Bert", LastName: "Green" },
{ FirstName: "Larry", LastName: "White" },
{ FirstName: "Victor", LastName: "Fox" },
]
function sortArray(x, y) {
return x.LastName.localeCompare(y.LastName)
}
var tzy = list.sort(sortArray);
console.log(tzy);輸出如下:

如果對(duì)象目標(biāo) key 中存在標(biāo)點(diǎn)符號(hào),在這種情況下,我們可以使用localeCompare()函數(shù)并將其設(shè)置為在比較期間忽略標(biāo)點(diǎn)符號(hào)。
var list = [
{ FirsName: "Aaron", LastName: ",Baker" },
{ FirstName: "Bert", LastName: "Green" },
{ FirstName: "Larry", LastName: ",White" },
{ FirstName: "Victor", LastName: "Fox" },
]
function SortArray(x, y){
return x.LastName.localeCompare(y.LastName, 'fr', {ignorePunctuation: true});
}
var tzy = list.sort(sortArray);
console.log(tzy);輸出如下:

你還可以通過將 localeCompare() 函數(shù)的靈敏度設(shè)置為 base 來忽略字符串中存在的特殊字符,如下所示。
x.LastName.localeCompare(y.LastName, 'en', { sensitivity: 'base' });點(diǎn)擊 傳送門 查看有關(guān) localeCompare() 函數(shù)的更多詳細(xì)信息。
Collator() + sort()
var list = [
{ FirsName: "Aaron", LastName: "Baker" },
{ FirstName: "Bert", LastName: "Green" },
{ FirstName: "Larry", LastName: "White" },
{ FirstName: "Victor", LastName: "Fox" },
]
function SortArray(x, y){
return collator.compare(x.LastName, y.LastName);
}
var tzy = list.sort(sortArray);
console.log(tzy);輸出如下:

到此這篇關(guān)于JavaScript將對(duì)象數(shù)組按字母順序排序的方法詳解的文章就介紹到這了,更多相關(guān)JavaScript 對(duì)象數(shù)組排序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JS對(duì)象數(shù)組排序方法測(cè)試代碼示例
- JavaScript中好用的數(shù)組對(duì)象排序方法分享
- javascript中的Array對(duì)象(數(shù)組的合并、轉(zhuǎn)換、迭代、排序、堆棧)
- JS sort方法基于數(shù)組對(duì)象屬性值排序
- JS深入學(xué)習(xí)之?dāng)?shù)組對(duì)象排序操作示例
- js 根據(jù)對(duì)象數(shù)組中的屬性進(jìn)行排序?qū)崿F(xiàn)代碼
- JS實(shí)現(xiàn)給數(shù)組對(duì)象排序的方法分析
- JS實(shí)現(xiàn)根據(jù)數(shù)組對(duì)象的某一屬性排序操作示例
- js中的數(shù)組對(duì)象排序分析
- JS實(shí)現(xiàn)json對(duì)象數(shù)組按對(duì)象屬性排序操作示例
- JavaScripts數(shù)組里的對(duì)象排序的24個(gè)方法(最新整理收藏)
相關(guān)文章
深入理解JavaScript和TypeScript中的class
class 聲明創(chuàng)建一個(gè)基于原型繼承的具有給定名稱的新類,下面這篇文章主要給大家介紹了關(guān)于JavaScript和TypeScript中class的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下。2018-04-04
js 原生判斷內(nèi)容區(qū)域是否滾動(dòng)到底部的實(shí)例代碼
下面筆者就為大家分享一篇js 原生判斷內(nèi)容區(qū)域是否滾動(dòng)到底部的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助2017-11-11
JavaScript幾種形式的樹結(jié)構(gòu)菜單
今天我主要講3種不同展示的JavaScript樹結(jié)構(gòu)菜單,分別是懸浮層樹(Tree)、右鍵菜單樹(ContextMenu)和節(jié)點(diǎn)樹(TreeMenu),目前都支持無限級(jí)層次。2010-05-05
微信小程序獲取微信運(yùn)動(dòng)步數(shù)的實(shí)例代碼
本篇文章主要介紹了微信小程序微信運(yùn)動(dòng)步數(shù)的實(shí)例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
微信小程序?qū)崿F(xiàn)簡(jiǎn)單計(jì)算器
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)懞?jiǎn)單計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04

