如何在 React 中映射（）数组的一部分

作者

Map() 只是 React 中数组的一部分

How to map() only a portion of an Array in React

在 React 中只映射（）数组的一部分：

  1. 调用数组上的slice()方法以获取数组的一部分。
  2. map()在数组的一部分上调用方法。
  3. 遍历数组的一部分。
应用程序.js
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Delilah', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  // 👇️ map() first 3 elements of array

  return (
    <div>
      {employees.slice(0, 3).map((employee, index) => {
        return (
          <div key={index}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

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

Array.slice
方法不会
修改原始数组，而是创建一个新数组（原始数组的浅表副本）。

我们将以下 2 个参数传递给该slice()方法：

姓名 描述
startIndex 要包含在新数组中的第一个元素的索引
endIndex 上升到但不包括该索引

我们指定了 的起始索引0和 的结束索引3，因此我们得到了包含元素 和 的数组0的1一部分2。

只反应映射数组的一部分

即使end index您提供给Array.slice 方法的值超过了数组的长度，该方法也不会抛出错误，而是返回所有数组元素。
应用程序.js
const arr = ['a', 'b', 'c'];

const first100 = arr.slice(0, 100);
console.log(first100); // 👉️ ['a', 'b', 'c']

我们试图获取100数组的第一个元素，它只包含3
元素。

结果，新数组包含3原始数组的所有元素。

如果你想map()在 React 中遍历数组的最后 N 个元素，请将负索引传递给该Array.slice()方法。

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

  // 👇️ map() LAST 3 elements of array

  return (
    <div>
      {employees.slice(-3).map((employee, index) => {
        return (
          <div key={index}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

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

映射数组的最后 n 个元素

Passing a negative index to the slice() method indicates an offset from the
end of the array. A negative index of -3 means give me the last 3 elements
of the array.

This is the same as passing array.length - 3 as an argument to the slice
method.

App.js
const arr = ['a', 'b', 'c', 'd', 'e'];

const last3 = arr.slice(-3);
console.log(last3); // 👉️ ['c', 'd', 'e']

const last3Again = arr.slice(arr.length - 3);
console.log(last3Again); // 👉️ ['c', 'd', 'e']

Either way, we tell the slice method, copy the last 3 elements of the array
and place them in a new array.

Even if we try to get more elements than the array contains, Array.slice won’t
throw an error, instead it returns a new array with all elements.

index.js
const arr = ['a', 'b', 'c'];

const last100 = arr.slice(-100);
console.log(last100); // 👉️ ['a', 'b', 'c']

In the example, we tried to get the last 100 elements of an array which only
contains 3 elements, so all of the array’s elements got copied to the new array.

–