总览
在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'},
];
// :point_down:️ 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); // :point_right:️ ['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'},
];
// :point_down:️ 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'},
];
// :point_down:️ 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); // :point_right:️ ['d', 'e']
const last2Again = arr.slice(arr.length - 2);
console.log(last2Again); // :point_right:️ ['d', 'e']无论哪种方式，我们告诉 slice 方法，复制数组的最后两个元素，并将它们放置在一个新数组中。
即使我们尝试获取更多数组包含的元素， Array.slice 也不会抛错，相反它会返回一个包含所有元素的新数组。
const arr = ['a', 'b', 'c'];
const last100 = arr.slice(-100);
console.log(last100); // :point_right:️ ['a', 'b', 'c']在这个例子中，我们试图获得一个只包含3个元素的数组的最后100个元素，所以该数组的所有元素都被复制到新的数组中。
来自：https://www.cnblogs.com/chuckQu/p/16436176.html
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！