脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React中断map循环

React技巧之中断map循环的方法详解

 更新时间：2023年06月16日 10:04:40   作者：chuckQu  
这篇文章主要和大家来分享一下React的技巧之如何中断map循环，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以了解一下

总览

在React中，中断map()循环：

  • 在数组上调用slice()方法，来得到数组的一部分。
  • 在部分数组上调用map()方法。
  • 遍历部分数组。
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 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>
  );
}

slice

Array.slice方法不会修改原数组，相反，它会创建一个新数组（原始数组的浅拷贝）。

我们为slice()方法传递以下两个参数：

名称描述
startIndex新数组中包含第一个元素的索引
endIndex到此为止，但不包含这个索引

我们指定了起始索引0，以及终止索引2。所以我们得到具有前两个元素的部分数组。

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

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

我们尝试获取数组的前100个元素，该数组只包含3个元素。因此新数组包含原始数组的所有3个元素。

filter

在调用map()之前，也可以使用Array.filter方法。

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 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()方法的函数会被数组中的每个元素调用。在每次迭代中，我们检查当前对象是否有country属性等于Belgium或者Denmark ，并返回比较的结果。

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: 'Bob', country: 'Belgium'},
    {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索引意味着给我数组的最后两个元素。这与对slice方法传递array.length - 2参数作用相同。

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方法，复制数组的最后两个元素，并将它们放置在一个新数组中。

即使我们尝试获取更多数组包含的元素，Array.slice也不会抛错，相反它会返回一个包含所有元素的新数组。

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

在这个例子中，我们试图获得一个只包含3个元素的数组的最后100个元素，所以该数组的所有元素都被复制到新的数组中。

到此这篇关于React技巧之中断map循环的方法详解的文章就介绍到这了,更多相关React中断map循环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React各种状态管理器的解读及使用方法

    React各种状态管理器的解读及使用方法

    这篇文章主要介绍了对于React各种状态管理器的解读,文中给大家提到了状态管理器是如何使用的，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-12-12
  • React-Native中一些常用组件的用法详解(二)

    React-Native中一些常用组件的用法详解(二)

    这篇文章主要跟大家介绍了关于React-Native中一些常用组件的用法的相关资料，其中详细介绍了关于ScrollView组件、ListView组件、Navigator组件、TableBarIOS组件以及网络请求等相关内容，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-06-06
  • react antd-design Select全选功能实例

    react antd-design Select全选功能实例

    这篇文章主要介绍了react antd-design Select全选功能实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 用react实现一个简单的scrollView组件

    用react实现一个简单的scrollView组件

    这篇文章主要给大家介绍一下如何用 react 实现一个简单的 scrollView组件，文中有详细的代码示例，具有一定的参考价值,需要的朋友可以参考下
    2023-07-07
  • 深入浅析React中diff算法

    深入浅析React中diff算法

    React 最为核心的就是 Virtual DOM 和 Diff 算法，diff算法的基础是Virtual DOM，接下来通过本文给大家介绍React中diff算法的相关知识，对React中diff算法感兴趣的朋友跟随小编一起学习下吧
    2021-05-05
  • react-native组件中NavigatorIOS和ListView结合使用的方法

    react-native组件中NavigatorIOS和ListView结合使用的方法

    这篇文章主要给大家介绍了关于react-native组件中NavigatorIOS和ListView结合使用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-09-09
  • React Hooks使用startTransition与useTransition教程示例

    React Hooks使用startTransition与useTransition教程示例

    这篇文章主要为大家介绍了React Hooks使用startTransition与useTransition教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • 阿里低代码框架lowcode-engine自定义设置器详解

    阿里低代码框架lowcode-engine自定义设置器详解

    这篇文章主要为大家介绍了阿里低代码框架lowcode-engine自定义设置器示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • 浅谈react路由传参的几种方式

    浅谈react路由传参的几种方式

    这篇文章主要介绍了浅谈react路由传参的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • React Store及store持久化的使用教程

    React Store及store持久化的使用教程

    这篇文章主要介绍了React Store及store持久化的使用教程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01

最新评论