JavaScript将对象数组按字母顺序排序的方法详解

更新时间：2023年07月10日 09:27:16 作者：唐志远

这篇文章主要介绍了JavaScript如何将对象数组按字母顺序排序，本文介绍了三种解决方案，if条件语句 + sort()，localeCompare() + sort()，Collator() + sort()，有感兴趣的同学可以跟着小编一起来看看

sort 用法

语法

array.sort(compareFunction)

参数值

参数	描述
compareFunction	可选。定义替代排序顺序的函数。该函数应返回负值、零值或正值，具体取决于参数，例如： function(a, b){ return a - b } sort() 方法比较两个值时，将值发送给比较函数，根据返的（负、零、正）值对值进行排序。举例：比较 40 和 100 时，sort() 方法调用比较函数(40,100)。该函数计算 40-100，并返回 -60（负值）。 sort 函数会将 40 排序为小于 100 的值。

参数

描述

compareFunction

可选。定义替代排序顺序的函数。该函数应返回负值、零值或正值，具体取决于参数，例如：
function(a, b){ return a - b }
sort() 方法比较两个值时，将值发送给比较函数，根据返的（负、零、正）值对值进行排序。
举例：
比较 40 和 100 时，sort() 方法调用比较函数(40,100)。
该函数计算 40-100，并返回 -60（负值）。
sort 函数会将 40 排序为小于 100 的值。

sort() 方法会改变原始数组。

兼容性

Chrome、IE、Edge、Firefox、Safari、Opera 等都支持 sort() 方法。

举例

排序数组

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

输出如下：

如果对象目标 key 中存在标点符号，在这种情况下，我们可以使用localeCompare()函数并将其设置为在比较期间忽略标点符号。

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() 函数的灵敏度设置为 base 来忽略字符串中存在的特殊字符，如下所示。

x.LastName.localeCompare(y.LastName, 'en', { sensitivity: 'base' });

点击传送门查看有关 localeCompare() 函数的更多详细信息。

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

输出如下：

到此这篇关于JavaScript将对象数组按字母顺序排序的方法详解的文章就介绍到这了,更多相关JavaScript 对象数组排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript 数组操作实用技巧
数组和字符串类型对象的方法我特容易搞混淆,所以把他列出来，免得每次取查。
2009-09-09
百度地图api如何使用
如果想用百度地图api，首先需要先获取一个百度地图api的密钥，然后引入百度地图的api，这篇文章就讲下百度地图api如何使用的相关资料，需要的朋友可以参考下
2015-08-08
js字符限制(字符截取) 一个中文汉字算两个字符
有时候我们需要限制用户的输入或者需要截取一定长度的字符串都需要用到这样的功能代码，这里脚本之家小编就为大家分享一下
2017-09-09
js replace() 文本替换你所不知的
今天看了一个函数，功能是把形如word-word的字符串转化为wordWord
2010-03-03
JavaScript Event学习补遗 addEventSimple
这里有个addEventSimple和removeEventSimple函数，有时候需要不那么显眼的事件处理程序的时候我就用这两个函数注册。
2010-02-02
javascript实现促销倒计时+fixed固定在底部
一个不错的示例使用javascript实现的促销倒计时且同时拥有fixed固定在底部，而且兼容ie6，喜欢的朋友可以参考下
2013-09-09
JavaScript 中级笔记第二章
对象是组成JavaScript的基本单元。本章将从JavaScript语言中最重要的几个部分开始介绍：引用，函数重载，作用域，闭包和上下文。有了这些知识后，面向对象开发就将变得简单。
2009-09-09
解决localstorage存储boolean类型值的小坑
这篇文章主要介绍了解决localstorage存储boolean类型值的小坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-06-06
js动态引入的四种方法
下面小编就为大家带来一篇关于js动态引入四种方式的实例代码，具有很好的参考价值，分享给大家一起跟随小编过来看看吧
2018-05-05
JavaScript实现九宫格拖拽效果
这篇文章主要为大家详细介绍了JavaScript实现九宫格拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06