如何在 React 中跳出 map() 循环
在 React 中跳出 map() 循环:
- 在数组上调用 slice() 方法以获取数组的一部分。
- 调用数组部分的 map() 方法。
- 遍历数组的一部分。
export default function App() {
const employees = [
{id: 1, name: 'Alice', country: 'Austria'},
{id: 2, name: 'Jiyik', country: 'China'},
{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>
);
}
Array.slice
方法不会修改原始数组,而是创建一个新数组(原始数组的浅拷贝)。
我们将以下 2 个参数传递给 slice()
方法:
- startIndex 要包含在新数组中的第一个元素的索引
- endIndex 结束值,但不包括这个索引
我们指定起始索引为 0,结束索引为 2,因此我们得到了数组的一部分,其中包含元素 0 和 1。
即使提供给 Array.slice
方法的结束索引超过了数组的长度,该方法也不会抛出错误,而是返回所有数组元素。
const arr = ['a', 'b', 'c'];
const first100 = arr.slice(0, 100);
console.log(first100); // 👉️ ['a', 'b', 'c']
我们试图获取一个数组的前 100 个元素,它只包含 3 个元素。
因此,新数组包含原始数组的所有 3 个元素。
我们还可以在调用 map()
之前使用 Array.filter
方法。
export default function App() {
const employees = [
{id: 1, name: 'Alice', country: 'Austria'},
{id: 2, name: 'Jiyik', country: 'China'},
{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()
方法的函数被数组中的每个元素调用。
在每次迭代中,我们检查当前对象的国家属性是否等于比利时或丹麦并返回结果。
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: 'Jiyik', country: 'China'},
{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 的负索引意味着给我数组的最后 2 个元素。
这与将 array.length - 2
作为参数传递给 slice 方法相同。
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
方法,复制数组的最后 2 个元素并将它们放入一个新数组中。
即使我们尝试获取比数组包含的元素更多的元素,Array.slice
也不会抛出错误,而是返回一个包含所有元素的新数组。
const arr = ['a', 'b', 'c'];
const last100 = arr.slice(-100);
console.log(last100); // 👉️ ['a', 'b', 'c']
在示例中,我们尝试获取仅包含 3 个元素的数组的最后 100 个元素,因此该数组的所有元素都被复制到新数组中。
相关文章
Pandas map()
发布时间:2024/04/24 浏览次数:1652 分类:Python
-
本教程解释了我们如何使用 Series.map()方法将 Pandas Series 的值替换为另一个值。
Pandas apply, map 和 applymap 的区别
发布时间:2024/04/21 浏览次数:135 分类:Python
-
本教程解释了 Pandas 中 apply()、map()和 applymap()方法的区别。
在 JavaScript 中遍历 Map
发布时间:2024/03/21 浏览次数:62 分类:JavaScript
-
JavaScript 允许借助键值对数据结构(即 Map)遍历对象。迭代过程以多种方式运行,例如在 ES6 之前的格式中,我们逐个遍历每个元素、for of 和 for 每个约定。
JavaScript 中的 Map 索引
发布时间:2024/03/20 浏览次数:210 分类:JavaScript
-
JavaScript map 方法很容易实现,我们将讨论它的不同参数,以及它们在不同场景中的使用方式。
如何在 Matplotlib 中绘制数据列表的直方图
发布时间:2024/02/04 浏览次数:178 分类:Python
-
本教程介绍了如何使用 plt.hist()方法从数据列表中绘制直方图。我们可以使用 plt.hist()方法从数据列表中绘制直方图。
C# 中等效的 C++ Map<T1, T2>
发布时间:2024/02/01 浏览次数:147 分类:编程语言
-
可以使用 C# 中的 SortedDictionary
和 Dictionary 类代替 C++ 中的 map 。
C# 中等效的 C++ Map<T1, T2>
发布时间:2024/01/20 浏览次数:187 分类:编程语言
-
可以使用 C# 中的 SortedDictionary
和 Dictionary 类代替 C++ 中的 map 。
在 C++ 中按值对 map 进行排序
发布时间:2024/01/02 浏览次数:108 分类:C++
-
本文介绍如何在 C++ 中按值对映射进行排序。本文将演示有关如何使用 C++ 中的值对 map 进行排序的多种方法。使用 std::vector 和 std::sort 算法在 C++ 中按值对 map 元素进行排序