您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

如何在JavaScript中对对象数组进行排序

时间:2020-11-26 12:05:54  来源:  作者:

如果需要按特定顺序对对象数组进行排序,我们很有可能会直接找个 JS 库来用。其实大可不必,JS 原生中的 Array.sort就能直接一些复杂又漂亮的排序。

本文中,将介绍一些 Array.sort 的常规排序和一些骚操作。

基本数组排序

默认情况下,Array.sort函数将数组中需要排序的每个元素转换为字符串,并按 Unicode 顺序对其进行比较。

const foo = [9, 1, 4, 'zebroid', 'afterdeck'];
foo.sort(); // returns [ 1, 4, 9, 'afterdeck', 'zebroid' ]

const bar = [5, 18, 32, new Set, { user: 'Eleanor Roosevelt' }];
bar.sort(); // returns [ 18, 32, 5, { user: 'Eleanor Roosevelt' }, Set {} ]

你可能会好奇为啥32排在5之前。发生这种情况是因为数组中的每个元素都首先转换为字符串,并且按照Unicode顺序,"32"在"5"之前。

需要注意的是,Array.sort会更改原数组。

const baz = ['My cat ate my homework', 37, 9, 5, 17];
baz.sort(); // baz数组被修改
console.log(baz); // shows [ 17, 37, 5, 9, 'My cat ate my homework' ]

为避免这种情况,我们可以创建要排序的数组的新实例,然后在新的数组上进行修改。这里可以使用 Array.slice它返回是一个新的数组实例。

// 创建baz数组的新实例并对其进行排序
const sortedBaz = baz.slice().sort();

我们还可以使用 ES6 中的展开运算符来做:

const sortedBaz = [...baz].sort(); 

在两种情况下,输出是相同的:

console.log(baz); // ['My cat ate my homework', 37, 9, 5, 17];
console.log(sortedBaz); // [ 17, 37, 5, 9, 'My cat ate my homework' ]

单独使用Array.sort不能对对象数组进行排序。但不必担心,sort 的还提供一个参数,该参数使数组元素根据compare函数的返回值进行排序。

使用比较函数进行排序

假设foo和bar是compare函数要比较的两个元素,compare函数的返回值设置如下:

  1. 小于0:foo在bar之前
  2. 大于0 :bar在foo之前
  3. 等于0:foo和bar彼此保持不变。

来看一个简单的示例:

const nums = [79, 48, 12, 4];

function compare(a, b) {
  if (a > b) return 1;
  if (b > a) return -1;

  return 0;
}

nums.sort(compare);
// => 4, 12, 48, 79

我们可以稍微重构一下:

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

使用在使用箭头函数进行重构:

nums.sort((a, b) => a - b);

如何对对象数组进行排序

现在,我们来按一下对对象数组的排序。假设有下面的 singers 数组:

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood mac', born: 1948 },
];

我们可以使用 compare函数,然后根据 singers 中的 band 字段来进行排序。

function compare(a, b) {
  // 使用 toUpperCase() 忽略字符大小写
  const bandA = a.band.toUpperCase();
  const bandB = b.band.toUpperCase();

  let comparison = 0;
  if (bandA > bandB) {
    comparison = 1;
  } else if (bandA < bandB) {
    comparison = -1;
  }
  return comparison;
}

singers.sort(compare);

/* returns [
  { name: 'Steven Tyler', band: 'Aerosmith',  born: 1948 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 }
] */

如果要让上面的顺序相反,可以这么做:

function compare(a, b) {
  ...

  // 乘以-1来反转返回值
  return comparison * -1;
}

创建一个动态排序函数

最后,排序函数更具动态性。

我们创建一个排序函数,可以使用该函数对一组对象进行排序,这些对象的值可以是字符串或数字。该函数有两个参数-我们要排序的键和返回结果的顺序(即升序或降序):

const singers = [
  { name: 'Steven Tyler', band: 'Aerosmith', born: 1948 },
  { name: 'Karen Carpenter', band: 'The Carpenters', born: 1950 },
  { name: 'Kurt Cobain', band: 'Nirvana', born: 1967 },
  { name: 'Stevie Nicks', band: 'Fleetwood Mac', born: 1948 },
];

function compareValues(key, order = 'asc') {
  return function innerSort(a, b) {
    if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
      // 该属性在任何一个对象上都不存在
      return 0;
    }

    const varA = (typeof a[key] === 'string')
      ? a[key].toUpperCase() : a[key];
    const varB = (typeof b[key] === 'string')
      ? b[key].toUpperCase() : b[key];

    let comparison = 0;
    if (varA > varB) {
      comparison = 1;
    } else if (varA < varB) {
      comparison = -1;
    }
    return (
      (order === 'desc') ? (comparison * -1) : comparison
    );
  };
}

使用:

//数组按`band`排序,默认为升序
singers.sort(compareValues('band'));

// 数组按 `band` 降序排序
singers.sort(compareValues('band', 'desc'));

// 数组按 `name` 升序排序
singers.sort(compareValues('name'));

// 数 组born 降序排序
singers.sort(compareValues('born', 'desc'));

在上面的代码中,hasOwnProperty方法用于检查指定的属性是否在每个对象上定义,且没有通过原型链继承。如果没有在两个对象上定义,函数返回0,排序顺序保持不变(即对象之间保持不变)。

typeof运算符还用于检查属性值的数据类型,这使函数可以确定对数组进行排序的正确方法。如果指定属性的值是一个字符串,则使用toUpperCase方法将其所有字符都转换为大写,因此排序时将忽略字符大小写

最后,你可以根据自己需求来调整上面的函数。

String.prototype.localeCompare()

在上面的示例中,我们希望能够对对象数组进行排序,其值可以是字符串或数字。但是,如果我们知道处理值是字符串的对象,则可以使用 JS 的localeCompare方法

比较两个字符串,并返回下列值中的一个:

  • 如果 字符串 在 字母 表中 应该 排在 字符串 参数 之前, 则 返回 一个 负数;
  • 如果 字符串 等于 字符串 参数, 则 返回 0;
  • 字符串 在 字母 表中 应该 排在 字符串 参数 之后, 则 返回 一个 正数;
['bjork', 'Bjork', 'Björk'].sort();
// [ 'Bjork', 'Björk', 'bjork' ]

['bjork', 'Bjork', 'Björk'].sort((a, b) => a.localeCompare(b));
//  [ 'bjork', 'Bjork', 'Björk' ]

根据compareValues函数,我们可以这么写:

function compareValues(key, order = 'asc') {
  return function innerSort(a, b) {
    if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) return 0;
    const comparison = a[key].localeCompare(b[key]);

    return (
      (order === 'desc') ? (comparison * -1) : comparison
    );
  };
}

总结

上面就是使用普通JS 函数对对象数组排序的简短的介绍。尽管许多库都提供了这种动态排序能力,但我们自己实现这个方法其实也不信。另外,了解幕后发生了对我们来说并没有坏处。

今天就跟大家分享到这里了,感谢大家的观看,我们下期再见。


作者:James Hibbard 译者:前端小智 来源:sitepoint

原文:https://www.sitepoint.com/sort-an-array-of-objects-in-JAVAscript/



Tags:JavaScrip   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === &#39;a&#39;) { b = true} else { b = false}// goodb = a === &#39;a&#39;2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Tags: JavaScrip  点击:(5)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  Tags: JavaScrip  点击:(19)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Tags: JavaScrip  点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  Tags: JavaScrip  点击:(34)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  Tags: JavaScrip  点击:(39)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== &#39;&#39;) { let username = username1; }优化后...【详细内容】
2021-10-28  Tags: JavaScrip  点击:(50)  评论:(0)  加入收藏
1、前言async函数,也就是我们常说的async/await,是在ES2017(ES8)引入的新特性,主要目的是为了简化使用基于Promise的API时所需的语法。async和await关键字让我们可以用一种更简...【详细内容】
2021-09-17  Tags: JavaScrip  点击:(61)  评论:(0)  加入收藏
为什么要使用 debugger这篇文章将介绍如何使用断点来进行 JavaScript 调试。在读这篇文章之前,需要问一个问题:为什么要使用断点来进行调试?我们首先需要认可使用断点的是必要...【详细内容】
2021-08-26  Tags: JavaScrip  点击:(65)  评论:(0)  加入收藏
JavaScript 可以做很多好玩的事, 从复杂的框架到处理API,有太多的东西需要学习。但是,它也能让我们只用一行就能做一些了不起的事情。1. 获得一个随机的布尔值(true/false)该函数...【详细内容】
2021-08-19  Tags: JavaScrip  点击:(76)  评论:(0)  加入收藏
JavaScript 提供了大量不同的处理数组的方法,这里花几分钟时间介绍 8 个项目中可以用到的数组方法。1. Array.map()使用.map() 方法,可以创建一个基于原始数组的修订版数组。....【详细内容】
2021-08-19  Tags: JavaScrip  点击:(95)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === &#39;a&#39;) { b = true} else { b = false}// goodb = a === &#39;a&#39;2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(5)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(19)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(34)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(35)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(39)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== &#39;&#39;) { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(50)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条