正文从这开始~

总览

在React中,中断map()循环:

  1. 在数组上调用slice()方法,来得到数组的一部分。
  2. 在部分数组上调用map()方法。
  3. 遍历部分数组。
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循环的更多相关文章

  1. ES5 map循环一大坑:循环遍历竟然出现逗号!

    一.map map大法好 这里需要解释一下Map和forEach的区别 一般来说需要返回值时使用Map,而只需要循环的使用forEach map循环常用的一些方法 /********* ES6 *** ...

  2. react map循环数据 死循环

    项目条件:react es6 antidesign 已在commonState中获取到list,但是在循环map填充DOM的时候陷入死循环. 原因:因为是子组件 ,在父组件请求数据的时候 有个时差过程 ...

  3. 如何在taro的map循环中使用if条件渲染

    在taro的jsx中,鉴于编译的机制,官方明确的表示了不能在map循环中使用if循环, 但是呢,官方也给出了解决办法,那就是提取变量或者是用三目运算嵌套的方法: 链接奉上:https://github ...

  4. JavaScript的map循环、forEach循环、filter循环、reduce循环、reduceRight循环

    1.map循环 let arr=[1,2,3,4]; arr.map(function(value,key,arr){ //值,索引,数组(默认为选定数组) return item; //如果没有re ...

  5. React技巧之循环遍历对象

    原文链接:https://bobbyhadz.com/blog/react-loop-through-object 作者:Borislav Hadzhiev 正文从这开始~ 遍历对象的键 在React ...

  6. JavaScript中如何中断forEach循环

    先来看下forEach的实现 // Production steps of ECMA-262, Edition 5, 15.4.4.18// Reference: http://es5.github. ...

  7. List循环与Map循环的总结

    做了一下list和map的总结,没有什么技术含量,就全当复习了一下api. 测试环境是在junit4下,如果没有自己写一个main方法也是一样的. 首先是List的三种循环: @Test public ...

  8. for ,foreach ,map 循环的区别

    一.for循环 1.for - 循环代码块一定的次数 遍历数组最常用到的for循环,是最为熟知的一种方法 for (var i=0; i<5; i++) { x=x + "The nu ...

  9. 关于List、Map循环时,进行删除的结论

    通过一些测试发现,List 使用for(int i=0;i<list.size();i++),可以正常删除,不会抛出异常:使用增强for循环,for(String x:list)会抛出Concu ...

随机推荐

  1. MySQL Router重装后重新连接集群进行引导出现的——此主机中之前已配置过的问题

    问题出现的前因: 因为重新安装了MySQL Router,然后打算重新连接上目标集群进行MySQL Router的初始化引导,结果报错了! [root@linux666 system]# mysqlr ...

  2. 一个实战让你搞懂Dockerfile

    摘要 在认识Dockerfile的基础功能之后,即一个用基础镜像来构建新镜像的文本文件,就需要在实际工作中使用其灵活便利的操作来提升我们的工作效率了,这里演示在Tomcat里运行一个程序的过程,以此来 ...

  3. [AcWing 823] 排列

    点击查看代码 #include<iostream> using namespace std; const int N = 10; int n; void dfs(int u, int nu ...

  4. 团队Arpha6

    队名:观光队 链接 组长博客 作业博客 组员实践情况 黄恒杰 - **过去两天完成了哪些任务 ** - 文字/口头描述 地图功能增加.博客 - 展示GitHub当日代码/文档签入记录 - 接下来的计划 ...

  5. kubeadm高可用master节点(三主两从)

    1.安装要求 在开始之前,部署Kubernetes集群机器需要满足以下几个条件: 五台机器,操作系统 CentOS7.5+(mini) 硬件配置:2GBRAM,2vCPU+,硬盘30GB+ 集群中所有 ...

  6. 网络排查工具MTR介绍

    开源Linux 回复"读书",挑选书籍资料~ 常用的 ping,tracert,nslookup 一般用来判断主机的网络连通性,其实 Linux 下有一个更好用的网络连通性判断工具 ...

  7. S3C2410——LED灯实验

    一.S3C2410输入/输出的原理 Linux主要有字符设备.块设备和网络设备3类驱动程序,我们一般编写的驱动都是字符设备驱动程序. 二.程序部分 编写程序控制3个LED灯,代码分为2个部分:控制LE ...

  8. TENSEAL: A LIBRARY FOR ENCRYPTED TENSOR OP- ERATIONS USING HOMOMORPHIC ENCRYPTION 解读

    本文记录阅读该paper的笔记,这篇论文是TenSeal库的原理介绍. 摘要 机器学习算法已经取得了显著的效果,并被广泛应用于各个领域.这些算法通常依赖于敏感和私有数据,如医疗和财务记录.因此,进一步 ...

  9. CF1580E Railway Construction

    CF1580E Railway Construction 铁路系统中有 \(n\) 个车站和 \(m\) 条双向边,有边权,无重边.这些双向边使得任意两个车站互相可达. 你现在要加一些单向边 \((u ...

  10. SQL年龄计算方法

    第一种方法: 用DATEDIFF函数,DATEDIFF(YEAR,beginDate,endDate). 测试语句: 1 DECLARE @birthdayDate DATE 2 DECLARE @e ...