在 React 中对对象数组进行排序

作者

在 React 中对对象数组进行排序

Sort an Array of Objects in React

在 React 中对对象数组进行排序：

  1. 创建数组的浅表副本。
  2. 调用sort()数组上的方法传递给它一个函数。
  3. 该函数用于定义排序顺序。
应用程序.js
export default function App() {
  const employees = [
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  // 👇️ sort by Numeric property ASCENDING (1 - 100)
  const numAscending = [...employees].sort((a, b) => a.id - b.id);
  console.log(numAscending);

  // 👇️ sort by Numeric property DESCENDING (100 - 1)
  const numDescending = [...employees].sort((a, b) => b.id - a.id);
  console.log(numDescending);

  // 👇️ sort by String property ASCENDING (A - Z)
  const strAscending = [...employees].sort((a, b) =>
    a.name > b.name ? 1 : -1,
  );
  console.log(strAscending);

  // 👇️ sort by String property DESCENDING (Z - A)
  const strDescending = [...employees].sort((a, b) =>
    a.name > b.name ? -1 : 1,
  );
  console.log(strDescending);

  return (
    <div>
      {numAscending.map(employee => {
        return (
          <div key={employee.id}>
            <h2>id: {employee.id}</h2>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

这些示例显示了如何按数字和字符串属性的升序和降序对对象数组进行排序。

Array.sort
方法改变了原始数组，因此我们在调用之前使用
扩展
语法 (…)
创建数组的浅表副本sort()。

我们传递给该sort方法的参数是一个定义排序顺序的函数。

该sort()方法使用以下逻辑对数组中的元素进行排序：

  • 如果比较函数的返回值大于，则
    先    0排序。ba

  • 如果比较函数的返回值小于，则
    先    0排序。ab

  • 如果比较函数的返回值等于0，则保持原先的顺序a和b。

您可以使用
Array.map
方法来呈现排序后的数组。

应用程序.js
export default function App() {
  const employees = [
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  return (
    <div>
      {[...employees]
        .sort((a, b) => a.id - b.id)
        .map(employee => {
          return (
            <div key={employee.id}>
              <h2>id: {employee.id}</h2>
              <h2>name: {employee.name}</h2>
              <h2>country: {employee.country}</h2>

              <hr />
            </div>
          );
        })}
    </div>
  );
}

我们map()在排序后立即链接了对该方法的调用。如果我们只需要渲染它，这使我们能够避免将排序后的数组存储在中间变量中。

–

发表评论