2024-06-19 09:11AM
参考：https://www.altcademy.com/blog/how-to-style-two-classes-in-reactjs-as-under-each-other/
1.什么是foreach
foreach是一种用于数组的方法，用于循环数组中的每个元素。换句话说，foreach可以帮助我们逐项浏览列表中的每一项——就像浏览购物清单上的每一项一样。
2.在JavaScript中使用foreach
假设我有一个数字数组，我想要在控制台中打印每个数字，可以这样做：
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(nubmer) {
console.log(number);
});
在这个例子中，number是我的数组，我使用.forEach并提供应在元素上执行的函数，并且把每个数字都记录到控制台
3.过渡到ReactJs
我们如何使用foreach在ReactJS中？
我们在react中不这样做，至少不直接这样做，相反，我们使用一种类似的方法，称为map
4.理解map在ReactJs中
ReactJs使用一种称为map这非常类似于foreach，主要区别在于map使用结果创建一个新数组，而foreach只是对每个元素执行一个操作
这在 ReactJS 中至关重要，因为我们经常创建 HTML 元素列表。 例如，如果您有一个用户数据数组，您可能需要创建一个数组 <li> 显示每个用户姓名的元素。
这是一个例子：
let users = ['Alice', 'Bob', 'Charlie'];
let userElements = users.map(function(user) {
return <li>{user}</li>;
});
// Now we can use `userElements` in our JSX:
return (
<ul>
{userElements}
</ul>
);
在此代码中，我们使用 map 创建新数组的函数 userElements，其中包含一个 <li> 每个用户的元素。
5.为什么在ReactJs中不使用foreach？
你可能会好奇，“为什么 ReactJS 不像常规 JavaScript 那样使用 foreach？”
原因是foreach不返回任何东西。它只是对每个元素执行一个操作。在ReactJs中，我们经常讲数据数组转换为元素数组，所有我们需要一种方法来返回一个新的数组。这正是map方法所做的，因此map方法再ReactJs中非常流行。
6.结论
尽管foreach是JavaScript中广泛使用的方法，但ReactJs倾向于map方法，因为它能欧返回一个新数组，其中包含对每个数组元素调用函数的结果。
请注意： foreach 就像你的朋友，帮助你核对购物清单上的物品，而 map 就像一位大厨，将原材料（你的数组）转化为美味的菜肴（一个新的数组）。
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论