正文从这开始~

总览

在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. ReLabel:自动将ImageNet转化成多标签数据集,更准确地有监督训练 | 2021新文

    人工标注数据集中普遍存在噪声,ReLabel能够自动且低成本地将原本的单标签数据集转化为多标签数据集,并且提出配合random crop使用的高效LabelPooling方法,能够更准确地指导分类网络 ...

  2. Blazor Hybrid / MAUI 简介和实战

    1. Blazor Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI. 共享使用 .NET 编写的服务 ...

  3. SQL注入到getshell

    SQL注入到getshell 通过本地 pikachu来复现  前提: 1.存在SQL注入漏洞 2.web目录具有写入权限 3.找到网站的绝对路径 4.secure_file_priv没有具体值(se ...

  4. OPRF

    在PSI中经常用到OPRF技术,现在系统学习一下. PRF Pseudo Random Function,伪随机函数,主要就是用来产生为伪随机数的. 伪随机数 什么伪随机数? 伪随机数是用确定性的算法 ...

  5. 使用NE555实现的延时开关电路

    NE555 的工作机制 先了解 NE555 的 Trigger(Pin2) 和 Threshold(Pin6) 如何检测电压并控制输出 如果 Trigger(Pin2) 检测到任何低于电源电压1/3的 ...

  6. Vue-router(前端路由)的两种路由模式

    Vue的两种路由模式: hash.history:默认是hash模式: 前端路由(改变视图的同时不会向后端发出请求) 一.什么是hash模式和history模式? hash模式:是指url尾巴后的#号 ...

  7. 解决 docker 日志占满磁盘导致 docker 服务停止的问题

    #进入 root 模式 sudo -i # 查看目录大小 sudo du -h --max-depth=1 # 应该会定位到这个目录 `/var/libs/docker/containers` # 最 ...

  8. Linux下MySQL表名区分大小写

    问题:MySQL一个数据库的表名统一小写,在Windows上安装的MySQL没有问题,但是把数据库部署到Linux上,应用启动的时候报表不存在错误. 解决:修改my.cnf lower_case_ta ...

  9. MyBatisPlus详解

    1.MyBatisPlus概述 需要的基础:MyBatis.Spring.SpringMVC 为什么要学习?MyBatisPlus可以节省我们大量工作时间,所有的CRUD代码它都可以自动化完成! 简介 ...

  10. C#语言中的类型转换方法(unfinished)

    一.C#中的数据类型 1.数值类型 2.字符类型 3.字符串类型 4.布尔类型 5.枚举类型 6.Object类型 二.常见的类型转换 从转换方式的角度,类型转换分为隐式转换与显式转换两种. 其中,隐 ...