JavaScript中怎么对对象数组进行排序

这期内容当中小编将会给大家带来有关JavaScript中怎么对对象数组进行排序,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

目前创新互联建站已为1000多家的企业提供了网站建设、域名、网络空间、网站托管、企业网站设计、陈巴尔虎网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

基本数组排序

默认情况下,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. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2. 小于0:foo在bar之前

  3. 大于0 :bar在foo之前

  4. 等于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     );   }; }

上述就是小编为大家分享的JavaScript中怎么对对象数组进行排序了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


网站标题:JavaScript中怎么对对象数组进行排序
地址分享:http://bzwzjz.com/article/jccedi.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 高端品牌网站建设 网站制作报价 宜宾网站设计 专业网站建设 成都响应式网站建设 教育网站设计方案 重庆外贸网站建设 成都网站建设推广 商城网站建设 成都网站建设公司 成都定制网站建设 成都网站建设 成都网站建设 重庆网站制作 成都网站建设公司 网站建设公司 营销网站建设 网站建设方案 成都网站建设 网站建设改版 成都网站建设 四川成都网站建设