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循环的更多相关文章
- ES5 map循环一大坑:循环遍历竟然出现逗号!
一.map map大法好 这里需要解释一下Map和forEach的区别 一般来说需要返回值时使用Map,而只需要循环的使用forEach map循环常用的一些方法 /********* ES6 *** ...
- react map循环数据 死循环
项目条件:react es6 antidesign 已在commonState中获取到list,但是在循环map填充DOM的时候陷入死循环. 原因:因为是子组件 ,在父组件请求数据的时候 有个时差过程 ...
- 如何在taro的map循环中使用if条件渲染
在taro的jsx中,鉴于编译的机制,官方明确的表示了不能在map循环中使用if循环, 但是呢,官方也给出了解决办法,那就是提取变量或者是用三目运算嵌套的方法: 链接奉上:https://github ...
- JavaScript的map循环、forEach循环、filter循环、reduce循环、reduceRight循环
1.map循环 let arr=[1,2,3,4]; arr.map(function(value,key,arr){ //值,索引,数组(默认为选定数组) return item; //如果没有re ...
- React技巧之循环遍历对象
原文链接:https://bobbyhadz.com/blog/react-loop-through-object 作者:Borislav Hadzhiev 正文从这开始~ 遍历对象的键 在React ...
- JavaScript中如何中断forEach循环
先来看下forEach的实现 // Production steps of ECMA-262, Edition 5, 15.4.4.18// Reference: http://es5.github. ...
- List循环与Map循环的总结
做了一下list和map的总结,没有什么技术含量,就全当复习了一下api. 测试环境是在junit4下,如果没有自己写一个main方法也是一样的. 首先是List的三种循环: @Test public ...
- for ,foreach ,map 循环的区别
一.for循环 1.for - 循环代码块一定的次数 遍历数组最常用到的for循环,是最为熟知的一种方法 for (var i=0; i<5; i++) { x=x + "The nu ...
- 关于List、Map循环时,进行删除的结论
通过一些测试发现,List 使用for(int i=0;i<list.size();i++),可以正常删除,不会抛出异常:使用增强for循环,for(String x:list)会抛出Concu ...
随机推荐
- ReLabel:自动将ImageNet转化成多标签数据集,更准确地有监督训练 | 2021新文
人工标注数据集中普遍存在噪声,ReLabel能够自动且低成本地将原本的单标签数据集转化为多标签数据集,并且提出配合random crop使用的高效LabelPooling方法,能够更准确地指导分类网络 ...
- Blazor Hybrid / MAUI 简介和实战
1. Blazor Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI. 共享使用 .NET 编写的服务 ...
- SQL注入到getshell
SQL注入到getshell 通过本地 pikachu来复现 前提: 1.存在SQL注入漏洞 2.web目录具有写入权限 3.找到网站的绝对路径 4.secure_file_priv没有具体值(se ...
- OPRF
在PSI中经常用到OPRF技术,现在系统学习一下. PRF Pseudo Random Function,伪随机函数,主要就是用来产生为伪随机数的. 伪随机数 什么伪随机数? 伪随机数是用确定性的算法 ...
- 使用NE555实现的延时开关电路
NE555 的工作机制 先了解 NE555 的 Trigger(Pin2) 和 Threshold(Pin6) 如何检测电压并控制输出 如果 Trigger(Pin2) 检测到任何低于电源电压1/3的 ...
- Vue-router(前端路由)的两种路由模式
Vue的两种路由模式: hash.history:默认是hash模式: 前端路由(改变视图的同时不会向后端发出请求) 一.什么是hash模式和history模式? hash模式:是指url尾巴后的#号 ...
- 解决 docker 日志占满磁盘导致 docker 服务停止的问题
#进入 root 模式 sudo -i # 查看目录大小 sudo du -h --max-depth=1 # 应该会定位到这个目录 `/var/libs/docker/containers` # 最 ...
- Linux下MySQL表名区分大小写
问题:MySQL一个数据库的表名统一小写,在Windows上安装的MySQL没有问题,但是把数据库部署到Linux上,应用启动的时候报表不存在错误. 解决:修改my.cnf lower_case_ta ...
- MyBatisPlus详解
1.MyBatisPlus概述 需要的基础:MyBatis.Spring.SpringMVC 为什么要学习?MyBatisPlus可以节省我们大量工作时间,所有的CRUD代码它都可以自动化完成! 简介 ...
- C#语言中的类型转换方法(unfinished)
一.C#中的数据类型 1.数值类型 2.字符类型 3.字符串类型 4.布尔类型 5.枚举类型 6.Object类型 二.常见的类型转换 从转换方式的角度,类型转换分为隐式转换与显式转换两种. 其中,隐 ...