在JavaScript 中按字母排序之如何在 JS 中按名称排序

更新时间：2023年09月06日 10:18:57 作者：JavaScript

有时你可能有一个单词数组,你想按字母顺序（从 a-z）对每个单词进行排序,或者你可能有一个包含用户信息（包括名字）的对象数组,例如,你想按照用户的名字来排序,接下来通过本文给大家介绍在JavaScript 中按字母排序之如何在 JS 中按名称排序,需要的朋友可以参考下

如何按字母顺序对一个名字数组进行排序

假设我们有一个名字的数组：

let names  = ["John Doe", "Alex Doe", "Peter Doe", "Elon Doe"];

我们可以使用 sort() 方法按字母顺序对这些名字进行排序：

let sortedNames = names.sort();
console.log(sortedNames);

这将返回一个按字母排序的名字数组：

["Alex Doe","Elon Doe","John Doe","Peter Doe"]

注意：当一些名字首字母大写，而其他名字首字母小写时，那么输出将是不正确的，因为 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 中按姓名的字母顺序排列

在现实场景中，我们可能有一个用户数组，每个用户的信息都在一个对象中。这些信息可以是任何与用户的名字有关的信息，比如说：

let users = [
  {
    name: "John Doe",
    age: 17
  },
  {
    name: "Elon Doe",
    age: 27
  },
  {
    name: "Alex Doe",
    age: 14
  }
];

看一下上面的对象，之前我们直接在数组上应用 sort() 方法的方式将不会起作用。相反，它将抛出相同的数组，但项目不会按照我们想要的顺序排列。

我们将在使用 sort() 方法的同时使用比较函数来按名字对这个用户数组进行排序。

我们将使用比较函数来定义一个替代的排序顺序。根据参数的不同，它返回一个负值、零值或正值：

语法：

function(a, b){return a - b}

当我们把这个比较函数传入 sort() 方法时，它根据我们设定的条件对每个值进行比较，然后根据返回的值对每个名字进行排序（负数、零、正数）。

如果结果是负的，a 被排序在 b 之前。
如果结果是正数，则 b 被排序在 a 之前。
如果结果是 0，两个值的排序顺序不做任何改变。

使用上面的例子，我们现在可以这样将比较函数和 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);

上面的代码对每个名字进行比较。如果是大于，它返回 1。如果是小于，则返回 -1。返回的值用于按字母顺序排列我们的数组的值：

[
  {
    name: "Alex Doe",
    age: 14
  },
  {
    name: "Elon Doe",
    age: 27
  },
  {
    name: "John Doe",
    age: 17
  }
]

注意：就像我们之前看到的，这总是根据字母的大小写运行，并将大写字母排在小写字母之前。

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
}
]

总结

在这篇文章中，你已经学会了如何在两种可能的情况下使用 sort() 方法按字母顺序排列数组。

在名字有不同字母大小写的情况下，最好在使用 sort() 方法之前先将它们转换为特定的字母大小写。

到此这篇关于在JavaScript 中按字母排序之如何在 JS 中按名称排序的文章就介绍到这了,更多相关js按名称排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

layui实现左侧菜单点击右侧内容区显示
这篇文章主要为大家详细介绍了layui实现左侧菜单点击右侧内容区显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
Javascript表单验证要注意的事项
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。被 JavaScript 验证的这些典型的表单数据有：用户是否已填写表单中的必填项目？用户输入的邮件地址是否合法？用户是否已输入合法的日期？用户是否在数据域 (numeric field) 中输入了文本？
2014-09-09
js实现同一页面多个运动效果的方法
这篇文章主要介绍了js实现同一页面多个运动效果的方法,涉及javascript操作页面元素运动效果的技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
bootstrap daterangepicker双日历时间段选择控件详解
这篇文章主要为大家详细介绍了bootstrap daterangepicker双日历时间段选择控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
解析浏览器端的AJAX缓存机制
这里我们来解析浏览器端的AJAX缓存机制,来共同看一下AJAX缓存与HTTP缓存的关系以及AJAX缓存的刷新时间问题
2016-06-06
IE8中jQuery.load()加载页面不显示的原因
这篇文章主要介绍了IE8中jQuery.load()加载页面不显示的原因，在文中给大家介绍了jquery中load()方法的使用要点,需要的朋友可以参考下
2018-11-11
firefox下获取下列框选中option的text的代码
Firefox下面没有innerText,所以我们想在firefox下获取下列框选中option的text（注意不是value）时会比较吃力。笔者结合自己在项目中的解决方案和代码总结一下，请大家指教。
2010-06-06
js实现计算器功能
这篇文章主要为大家详细介绍了js实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
针对JavaScript中this指向的简单理解
这篇文章主要为大家详细JavaScript中this指向的简单理解，感兴趣的小伙伴们可以参考一下
2016-08-08
JavaScript实现函数返回多个值的方法
这篇文章主要介绍了JavaScript实现函数返回多个值的方法,涉及javascript字典类型的使用技巧,需要的朋友可以参考下
2015-06-06