JIYIK CN >

Sorting an array of objects in React:

1. Creates a shallow copy of an array.
2. Call the array's sort()method, passing it a function.
3. This function is used to define the sort order.

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'},
  ];

  // 👇️ 按数字属性升序 (1 - 100) 排序
  const numAscending = [...employees].sort((a, b) => a.id - b.id);
  console.log(numAscending);

  // 👇️ 按数字属性降序 (1 - 100) 排序
  const numDescending = [...employees].sort((a, b) => b.id - a.id);
  console.log(numDescending);

  // 👇️ 按字符串属性升序 (A - Z) 排序
  const strAscending = [...employees].sort((a, b) =>
    a.name > b.name ? 1 : -1,
  );
  console.log(strAscending);

  // 👇️ 按字符串属性降序 (A - Z) 排序
  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>
  );
}

These examples show how to sort arrays of objects of numeric and string properties in ascending and descending order.

Array.sortmethod mutates the original array, so we use spread syntax (...)to create a shallow copy of the array before calling sort().

The argument we pass to sortthe method is a function that defines the sort order.

sort()The method sorts the elements in an array using the following logic:

• If the comparison function returns a value greater than 0, then b is sorted before a.
•  
• If the comparison function returns a value less than 0, a is sorted before b.
•  
• If the return value of the compare function is equal to 0, the original order of a and b is maintained.

We can use Array.mapthe method to render the sorted array.

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>
  );
}

We chained a call to the method immediately after sorting map(). This allows us to avoid storing the sorted array in an intermediate variable if we only need to render it.