在JavaScript 中按字母排序之如何在 JS 中按名稱排序
有時(shí)你可能有一個(gè)單詞數(shù)組,你想按字母順序(從 a-z)對(duì)每個(gè)單詞進(jìn)行排序。或者你可能有一個(gè)包含用戶信息(包括名字)的對(duì)象數(shù)組,例如,你想按照用戶的名字來排序。
我們可以在 JavaScript 中通過直接使用 sort() 方法或使用比較函數(shù)來實(shí)現(xiàn)這個(gè)目的。
如果你很著急的話,這里有兩種方法:
// 對(duì)一個(gè)名字?jǐn)?shù)組進(jìn)行排序
names.sort();
// 通過 name 對(duì)一個(gè)對(duì)象數(shù)組進(jìn)行排序
users.sort(function (a, b) {
if (a.name < b.name) {
return -1;
}
if (a.name > b.name) {
return 1;
}
return 0;
});現(xiàn)在讓我們來了解一下我們是如何得出這兩種解決方案的。
如何按字母順序?qū)σ粋€(gè)名字?jǐn)?shù)組進(jìn)行排序
假設(shè)我們有一個(gè)名字的數(shù)組:
let names = ["John Doe", "Alex Doe", "Peter Doe", "Elon Doe"];
我們可以使用 sort() 方法按字母順序?qū)@些名字進(jìn)行排序:
let sortedNames = names.sort(); console.log(sortedNames);
這將返回一個(gè)按字母排序的名字?jǐn)?shù)組:
["Alex Doe","Elon Doe","John Doe","Peter Doe"]
注意:當(dāng)一些名字首字母大寫,而其他名字首字母小寫時(shí),那么輸出將是不正確的,因?yàn)?nbsp;sort() 方法將大寫字母放在小寫字母之前:
let names = ["John Doe", "alex Doe", "peter Doe", "Elon Doe"]; let sortedNames = names.sort(); console.log(sortedNames); // ["Elon Doe","John Doe","alex Doe","peter Doe"]
所以你需要確保這些詞的大小寫都是一樣的,否則它就不能按照我們的需求按字母順序返回名字。
如何在 JavaScript 中按姓名的字母順序排列
在現(xiàn)實(shí)場(chǎng)景中,我們可能有一個(gè)用戶數(shù)組,每個(gè)用戶的信息都在一個(gè)對(duì)象中。這些信息可以是任何與用戶的名字有關(guān)的信息,比如說:
let users = [
{
name: "John Doe",
age: 17
},
{
name: "Elon Doe",
age: 27
},
{
name: "Alex Doe",
age: 14
}
];看一下上面的對(duì)象,之前我們直接在數(shù)組上應(yīng)用 sort() 方法的方式將不會(huì)起作用。相反,它將拋出相同的數(shù)組,但項(xiàng)目不會(huì)按照我們想要的順序排列。
我們將在使用 sort() 方法的同時(shí)使用比較函數(shù)來按名字對(duì)這個(gè)用戶數(shù)組進(jìn)行排序。
我們將使用比較函數(shù)來定義一個(gè)替代的排序順序。根據(jù)參數(shù)的不同,它返回一個(gè)負(fù)值、零值或正值:
語法:
function(a, b){return a - b}當(dāng)我們把這個(gè)比較函數(shù)傳入 sort() 方法時(shí),它根據(jù)我們?cè)O(shè)定的條件對(duì)每個(gè)值進(jìn)行比較,然后根據(jù)返回的值對(duì)每個(gè)名字進(jìn)行排序(負(fù)數(shù)、零、正數(shù))。
- 如果結(jié)果是負(fù)的,
a被排序在b之前。 - 如果結(jié)果是正數(shù),則
b被排序在a之前。 - 如果結(jié)果是
0,兩個(gè)值的排序順序不做任何改變。
使用上面的例子,我們現(xiàn)在可以這樣將比較函數(shù)和 sort() 方法一起使用:
users.sort(function (a, b) {
if (a.name < b.name) {
return -1;
}
if (a.name > b.name) {
return 1;
}
return 0;
});
console.log(users);上面的代碼對(duì)每個(gè)名字進(jìn)行比較。如果是大于,它返回 1。如果是小于,則返回 -1。返回的值用于按字母順序排列我們的數(shù)組的值:
[
{
name: "Alex Doe",
age: 14
},
{
name: "Elon Doe",
age: 27
},
{
name: "John Doe",
age: 17
}
]注意:就像我們之前看到的,這總是根據(jù)字母的大小寫運(yùn)行,并將大寫字母排在小寫字母之前。
let users = [
{
name: "alex Doe",
age: 14
},
{
name: "Elon Doe",
age: 27
},
{
name: "John Doe",
age: 17
}
];
users.sort(function (a, b) {
if (a.name < b.name) {
return -1;
}
if (a.name > b.name) {
return 1;
}
return 0;
});
console.log(users);輸出:
?[
{
name: "Elon Doe",
age: 27
},
{
name: "John Doe",
age: 17
},
{
name: "alex Doe",
age: 14
}
]
總結(jié)
在這篇文章中,你已經(jīng)學(xué)會(huì)了如何在兩種可能的情況下使用 sort() 方法按字母順序排列數(shù)組。
在名字有不同字母大小寫的情況下,最好在使用 sort() 方法之前先將它們轉(zhuǎn)換為特定的字母大小寫。
到此這篇關(guān)于在JavaScript 中按字母排序之如何在 JS 中按名稱排序的文章就介紹到這了,更多相關(guān)js按名稱排序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Bootstrap fileinput 上傳新文件移除時(shí)觸發(fā)服務(wù)器同步刪除的配置
這篇文章主要介紹了Bootstrap fileinput 上傳新文件移除時(shí)觸發(fā)服務(wù)器同步刪除的配置 ,需要的朋友可以參考下2018-10-10
用Javascript輕松制作一套簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)
用Javascript輕松制作一套簡(jiǎn)單的抽獎(jiǎng)系統(tǒng)...2006-12-12
JavaScript中創(chuàng)建GUID/UUID的方法及實(shí)現(xiàn)步驟
在JavaScript開發(fā)中,有時(shí)需要生成全局唯一標(biāo)識(shí)符(GUID)或通用唯一識(shí)別碼(UUID),本文給大家介紹JavaScript中創(chuàng)建GUID/UUID的方法及實(shí)現(xiàn)步驟,感興趣的朋友一起看看吧2025-06-06
js禁止頁(yè)面復(fù)制功能禁用頁(yè)面右鍵菜單示例代碼
禁止頁(yè)面復(fù)制功能、禁用頁(yè)面右鍵菜單等等在瀏覽網(wǎng)頁(yè)時(shí)想必大家都有遇到過吧,下面為大家詳細(xì)介紹下使用js是如何實(shí)現(xiàn)的,感興趣的朋友可以參考下2013-08-08
Javascript 鼠標(biāo)移動(dòng)上去小三角形滑塊緩慢跟隨效果
一個(gè)tab選項(xiàng)卡,當(dāng)鼠標(biāo)移動(dòng)上去時(shí)紅色滑塊跟隨,在布局過程中經(jīng)常會(huì)使用到,本文提供了詳細(xì)的實(shí)現(xiàn)代碼,感興趣的朋友可以參考下2013-04-04
JavaScript實(shí)現(xiàn)多個(gè)物體同時(shí)運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)多個(gè)物體同時(shí)運(yùn)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03
JavaScript中你不知道的Object.entries用法
大家應(yīng)該都知道,Object.entries()方法返回一個(gè)給定對(duì)象自身可枚舉屬性的鍵值對(duì)數(shù)組,其排列與使用 for...in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致,這篇文章主要給大家介紹了關(guān)于JavaScript中你不知道的Object.entries用法的相關(guān)資料,需要的朋友可以參考下2021-10-10

