JS小技巧，如何使用内置函数对数组内容进行排序

前端达人

发布于 2023-02-17 14:42:18

2.4K0

发布于 2023-02-17 14:42:18

文章被收录于专栏：前端达人前端达人

大家好，关于数组内容排序的需求也十分常见，我们在业务中会经常使用，本篇文章就总结一些常见的数组排序的方法，一起做个归纳总结。

一、字符串数组排序

1、sort(): 对数组进行排序，默认按字典序排序。

let fruits = ["banana", "apple", "orange"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "orange"]

2、reverse(): 将数组中元素反转。

let fruits = ["banana", "apple", "orange"];
fruits.reverse();
console.log(fruits); // ["orange", "apple", "banana"]

二、数字数组排序

1、sort() 传递比较函数

let numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers); // [1, 2, 3, 4, 5]

2、使用箭头函数的sort

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

3、使用 Array.from 结合 sort 排序

let numbers = [4, 2, 5, 1, 3];
let sortedNumbers = Array.from(numbers).sort((a, b) => a - b);
console.log(sortedNumbers); // [1, 2, 3, 4, 5]

4、使用 spread operator 和 sort

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

5、使用lodash库中的sortBy函数

let _ = require('lodash');
let numbers = [4, 2, 5, 1, 3];
let sortedNumbers = _.sortBy(numbers);
console.log(sortedNumbers); // [1, 2, 3, 4, 5]

这些函数提供了不同的方法来排序数组，您可以根据需要使用它们。

三、对象数组排序

如果是对象数组，我们可以使用 JavaScript 中内置的 sort() 方法并传入一个比较函数来实现按照某个对象的属性进行排序。

1、例如，如果要按照对象的属性 "age" 从小到大排序，可以使用如下代码:

let people = [
    { name: "John", age: 25 },
    { name: "Jane", age: 32 },
    { name: "Bob", age: 21 }
];

people.sort(function(a, b) {
    return a.age - b.age;
});
console.log(people);
/*
  [
    { name: 'Bob', age: 21 },
    { name: 'John', age: 25 },
    { name: 'Jane', age: 32 }
  ]
*/

也可以使用箭头函数

let people = [
    { name: "John", age: 25 },
    { name: "Jane", age: 32 },
    { name: "Bob", age: 21 }
];

people.sort((a, b) => a.age - b.age);
console.log(people);
/*
  [
    { name: 'Bob', age: 21 },
    { name: 'John', age: 25 },
    { name: 'Jane', age: 32 }
  ]
*/

2、如果要按照对象的属性 "name" 从 A 到 Z 排序，可以使用如下代码:

let people = [
    { name: "John", age: 25 },
    { name: "Jane", age: 32 },
    { name: "Bob", age: 21 }
];

people.sort(function(a, b) {
    let nameA = a.name.toUpperCase();
    let nameB = b.name.toUpperCase();
    if (nameA < nameB) {
        return -1;
    }
    if (nameA > nameB) {
        return 1;
    }
    return 0;
});
console.log(people);
/*
  [
    { name: 'Bob', age: 21 },
    { name: 'Jane', age: 32 },
    { name: 'John', age: 25 }
  ]
*/

3、使用 lodash 库中的 sortBy()

let _ = require('lodash');
let people = [
    { name: "John", age: 25 },
    { name: "Jane", age: 32 },
    { name: "Bob", age: 21 }
];

let sortedPeople = _.sortBy(people, 'age').reverse();
console.log(sortedPeople);
/*
  [
    { name: 'Jane', age: 32 },
    { name: 'John', age: 25 },
    { name: 'Bob', age: 21 }
  ]
*/

4、underscore 库中的 sortBy()

let _ = require('underscore');
let people = [
    { name: "John", age: 25 },
    { name: "Jane", age: 32 },
    { name: "Bob", age: 21 }
];

let sortedPeople = _.sortBy(people, function(person) { return person.name; });
console.log(sortedPeople);
/*
  [
    { name: 'Bob', age: 21 },
    { name: 'Jane', age: 32 },
    { name: 'John', age: 25 }
  ]
*/

这些第三方库提供了更多的排序选项和方法，可以满足更多的需求。

总之，在 JavaScript 中，排序对象数组可以使用 sort() 方法并传入一个比较函数，或者使用第三方库中的函数。