共计 2597 个字符,预计需要花费 7 分钟才能阅读完成。
原文链接:https://bobbyhadz.com/blog/react-map-break
作者:Borislav Hadzhiev
注释从这开始~
总览
在 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 个元素,所以该数组的所有元素都被复制到新的数组中。