Javascript 限制object.map中的结果数

我正在导入

空格

对象。我只想渲染3个

卡

组件，这些组件需要

空间

中的属性。想象一下，一个网站上的一个“特色”部分只显示了较大列表中的几个项目

使用下面的代码，我当前呈现的是所有结果，而不是3个，我是否使用了正确的方法？如果是这样的话，顺序是否错误

<div className="row">

          {spaces.map(item => {

            for (var i = 0; i < 2; i++) {

              return (

                <div className="col-sm-12 col-md-6 col-lg-4" key={item.id}>

                  <Card
                    town={item.town}
                    name={item.name}
                    net={item.net}
                    day={item.day}
                    night={item.night}
                    dog={item.dog}
                    parking={item.parking}
                    image={item.image}
                  />

                </div>
              )
            }

          })}

</div>

{spaces.map（项=>{
对于（变量i=0；i<2；i++）{
返回(
)
}
})}

空格。map

将迭代

空格中的所有元素，并为每个现有项生成一个新数组和一个新值

map
回调中的循环是无用的，因为在第一次迭代中
return
ing将立即终止循环

如果只想获得前3个空格，则可以
.slice
数组：

<div className="row">
          {spaces.slice(0,3).map(item => {
              return (
                <div className="col-sm-12 col-md-6 col-lg-4" key={item.id}>
                  <Card
                    town={item.town}
                    name={item.name}
                    net={item.net}
                    day={item.day}
                    night={item.night}
                    dog={item.dog}
                    parking={item.parking}
                    image={item.image}
                  />
                </div>
              )
          })}
</div>


{spaces.slice（0,3）.map（项=>{
返回(
)
})}
空格。map
将迭代
空格中的所有元素，并为每个现有项生成一个新数组和一个新值

map
回调中的循环是无用的，因为在第一次迭代中
return
ing将立即终止循环

如果只想获得前3个空格，则可以
.slice
数组：

<div className="row">
          {spaces.slice(0,3).map(item => {
              return (
                <div className="col-sm-12 col-md-6 col-lg-4" key={item.id}>
                  <Card
                    town={item.town}
                    name={item.name}
                    net={item.net}
                    day={item.day}
                    night={item.night}
                    dog={item.dog}
                    parking={item.parking}
                    image={item.image}
                  />
                </div>
              )
          })}
</div>


{spaces.slice（0,3）.map（项=>{
返回(
)
})}
您可以像下面这样做



{spaces.map（（项，索引）=>{
如果（指数<3）{
返回(
)
}
})}
您可以像下面这样做



{spaces.map（（项，索引）=>{
如果（指数<3）{
返回(
)
}
})}
spaces.slice（0,3）.map（…
？
map
遍历整个数组并执行给定的函数。如果要限制它，请按条件过滤
或
slice
到特定数量的项。
spaces.slice（0,3）.map（…
？
映射
遍历整个数组并执行给定的函数。如果要限制它，则可以按条件过滤
，或者将
切片
到特定数量的项。这仅适用于React跳过
null
和
未定义的
元素。但这不是正确的方法。如果元素为null或未定义，那么在本例中，您可以使用计数器变量increment the counter if item！=null或未定义，并检查计数器值是否小于3。这不是我的意思。您仍在对所有元素进行迭代，并生成一个类似
[element，element，element，undefined，undefined，…]
。它之所以有效，是因为React将忽略此数组中的
未定义的
元素，但更好的方法是首先不要迭代整个数组。是的，您是对的，谢谢。这仅是因为React跳过
null
和
undefined
“元素”。但这不是正确的方法。如果元素为null或未定义，那么在本例中，您可以使用计数器变量increment the counter if item！=null或未定义，并检查计数器值是否小于3。这不是我的意思。您仍在迭代所有元素并生成一个类似
[元素，元素，元素，未定义，未定义，…]
。它之所以有效，是因为React将忽略此数组中未定义的
元素，但更好的方法是首先不要迭代整个数组。是的，你说得对，谢谢。这很有效，谢谢你的简单解释。这很有效，谢谢你的简单解释。