JS中对象数组用sort按属性排序

前几天写过一篇 用js将HTML重新排序 的文章,其中用到sort来排序。
那么,我们先来回顾下sort的用法:

回顾

Array.prototype.sort() 方法 用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是先将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的。

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
//输出结果:["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
//输出结果:[1, 100000, 21, 30, 4]

语法

arr.sort([compareFunction])
compareFunction:(可选)用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。
返回值:排序后的数组。请注意,sort是在原数组基础上进行的排序,也就是会直接修改原数组。

应用

1.比较数字

var numbers = [4, 2, 5, 1, 3]; 
numbers.sort((a, b) => a - b); 
console.log(numbers);

// [1, 2, 3, 4, 5]

既然我们知道了sort函数可以传入一个比较函数,那么我们来看看下面的例子。

2.对象属性排序

其实在我们实际开发中,经常会遇到这样的问题,我们收到后端传过来的数据,然后我们需要根据数据中的某一项来排序。
比如有以下数据:

var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Zeros', value: 37 }
];

1.按对象value排序

// sort by value
items.sort((a, b) => Number(a.value) - Number(b.value));

结果如图所示:
JS中对象数组用sort按属性排序

2.按对象name排序

// sort by name
items.sort(function(a, b) {
  //忽略大小写
  var nameA = a.name.toUpperCase();
  var nameB = b.name.toUpperCase();
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }  
  //name相等时
  return 0;
});

结果如图所示:
JS中对象数组用sort按属性排序