如何在 React 中跳出 map() 循环

在 React 中跳出 map() 循环:

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

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

  return (
    <div>
      {employees.slice(0, 2).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,结束索引为 2,因此我们得到了数组的一部分,其中包含元素 0 和 1。

即使提供给 Array.slice 方法的结束索引超过了数组的长度,该方法也不会抛出错误,而是返回所有数组元素。

const arr = ['a', 'b', 'c'];

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

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

因此,新数组包含原始数组的所有 3 个元素。

我们还可以在调用 map() 之前使用 Array.filter 方法。

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Delilah', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

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

  return (
    <div>
      {employees
        .filter(employee => {
          return (
            employee.country === 'Belgium' || employee.country === 'Denmark'
          );
        })
        .map((employee, index) => {
          return (
            <div key={index}>
              <h2>name: {employee.name}</h2>
              <h2>country: {employee.country}</h2>

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

我们传递给 filter() 方法的函数被数组中的每个元素调用。

在每次迭代中,我们检查当前对象的国家属性是否等于比利时或丹麦并返回结果。

filter() 方法返回一个数组,该数组仅包含回调函数为其返回真值的元素。

在这个例子中,map() 方法只被 id 为 2 和 4 的对象调用。

如果你想通过 React 中数组的最后 N 个元素进行 map(),请将负索引传递给 Array.slice() 方法。

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Delilah', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

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

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

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

将负索引传递给 slice() 方法表示距数组末尾的偏移量。 -2 的负索引意味着给我数组的最后 2 个元素。

这与将 array.length - 2 作为参数传递给 slice 方法相同。

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

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

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

无论哪种方式,我们都告诉 slice 方法,复制数组的最后 2 个元素并将它们放入一个新数组中。

即使我们尝试获取比数组包含的元素更多的元素,Array.slice 也不会抛出错误,而是返回一个包含所有元素的新数组。

const arr = ['a', 'b', 'c'];

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

在示例中,我们尝试获取仅包含 3 个元素的数组的最后 100 个元素,因此该数组的所有元素都被复制到新数组中。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 如何在 React 中跳出 map() 循环