江苏龙网

  1. 主页 > 生活百科 > >

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

javascrip

如果需要按特定顺序对对象数组进行排序，我们很有可能会直接找个 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(); 在两种情况下，输出是相同的：
【如何在JavaScript中对对象数组进行排序】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 }] */


推荐阅读


上一篇：调制奶粉和配方奶粉哪种好?有什么区别? 调制乳与配方奶粉有什么区别

下一篇：真三国无双8切换国家 真三国无双8帝国出不出