Javascript 是否可以只映射数组的一部分？（Array.map（））

我正在使用React.js作为前端框架构建一个项目。在一个特定页面上，我向用户显示完整的数据集。我有一个包含完整数据集的数组。它是一个JSON对象数组。在向用户显示这些数据方面，我目前让它通过使用Array.map（）返回每个数据项来显示整个数据集

这是朝着正确方向迈出的一步，但现在我只需要显示数据集的一部分，而不是全部，我还需要一些控制，以了解有多少数据集已经显示，还有多少数据集尚未显示。基本上，我正在构建一个类似“查看更多”的按钮，用于向用户加载更多的数据项

这里是我现在使用的，其中“feed”表示我的JSON对象数组。（这将显示整个数据集。）

返回(
{
feed.map（（项目，索引）=>{
返回
})
}
);

我想知道是否可以只对数组的一部分使用.map（），而不必先分解数组？我知道一个可能的解决方案是保存完整的数据集，并将其分解为多个部分，然后将.map（）分解为这些部分，但是有没有一种方法可以在不必分解的情况下将.map（）分解为数组的一部分呢

任何和所有的反馈都将不胜感激。谢谢

迭代所有项目

map（）

方法创建一个新数组，其结果是对该数组中的每个元素调用提供的函数

你可以用

filter（）

方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素

---

对于所需项，然后应用所需格式的映射。

如果只想映射数组的一部分，则应首先筛选（）数组，以根据以下条件获得所需部分：

array.filter(item => <condition>).map();

array.filter（item=>）.map（）；

没有只映射部分数组的map（）函数版本

可以将.map（）与.filter（）结合使用

您可以将当前元素的索引作为map的第二个参数，如果您有一个用于当前页面和页面大小的变量，那么您可以很容易地从数组中筛选出正确的页面，而不必真正地将其切分

var currentPage = 1;
var pageSize = 25;

dataArray.filter(function(elt, index) {

    var upperThreshold = currentPage * pageSize;
    var lowerThreshold = currentPage * pageSize - pageSize;

    return index < upperThreshold && index > lowerThreshold;

});

var currentPage=1；
var pageSize=25；
dataArray.filter（函数（elt，索引）{
var upperThreshold=当前页面*页面大小；
var lowerThreshold=currentPage*pageSize-pageSize；
返回索引lowerThreshold；
});

您可以在映射数组之前使用该函数，看起来您需要在那里进行分页

var水果=[‘香蕉’、‘橘子’、‘柠檬’、‘苹果’、‘芒果’]；
柑橘变种=水果。切片（1,3）；
//水果含有[‘香蕉’、‘橘子’、‘柠檬’、‘苹果’、‘芒果’]
//柑橘含有['Orange'，'Lemon']

请勿尝试在映射步骤中使用黑客来解决此问题

相反，在映射之前：

类提要扩展了React.Component{
建造师（道具）{
超级（道具）
this.handleShowMore=this.handleShowMore.bind（this）
此.state={
项目：[“A项”、“B项”、“C项”、“D项]，
展览项目:2
}
}
handleShowMore（）{
这是我的国家({
展览项目：
this.state.showItems>=this.state.items.length？
this.state.showItems:this.state.showItems+1
})
}
render（）{
const items=this.state.items.slice（0，this.state.showItems）.map(
（项目）=>{item}
)
返回(
{items}
展示更多！
)
}
}
ReactDOM.render(
,
document.getElementById（'root'））
)

---

Array.reduce应该按照您的要求执行。只需根据所需的范围更改if语句

var excludeAfterIndex = 5;

feed.reduce((mappedArray, item, index) => {
  if (index > excludeAfterIndex) { // Whatever range condition you want
    mappedArray.push(<FeedItem key={index} data={item}/>);
  }

  return mappedArray;
}, []);

var excludeAfterIndex=5；
feed.reduce（（mappedArray，item，index）=>{
如果（index>excludeAfterIndex）{//您想要的任何范围条件
mappedaray.push（）；
}
返回mappedaray；
}, []);

是的，您可以根据索引映射数组的一部分。例如：

yourArray = yourArray.map(function (element, index, array) {
        if (array.indexOf(element) < yourIndex) {
            return {
               //logic here
            };
        } else {
            return {
                //logic here
            };
        }

    });

yourArray=yourArray.map（函数（元素、索引、数组）{
if（array.indexOf（element）

使用

slice（）

比向map或reduce函数中添加条件要好，但它仍然会创建该数组段的附加未使用副本。取决于你在做什么，这可能不是你想要的。相反，只需使用自定义映射函数：

函数切片映射（fn、from、toExclusive、array）{
const len=toExclusive-from；
常量映射=数组（len）；
for（设i=0；i

---

请注意，

fn

接收数组值和（现在）基于零的索引。您可能希望传递原始索引（

i+from

）。您可能还希望将完整的

数组作为第三个参数传递，这就是
array.map
的作用。
使用这种简单的方法

const [limit, setLimit] = useState(false);
const data = [{name: "john}, {name: 'Anna'}]

这里我们将有两个案例：

仅显示第一个数据，即John
全部显示
data.slice（0，扩展？data.length:1）.map（（项，索引）=>{item.name}）

..
我不使用React，但是你不能在你想要的范围内对数组进行切片或过滤，然后将其传递给map函数吗？使用
filter
或
slice
对其进行拆分将丢失数组的其余部分。为什么不在
映射
中放入
if
语句呢？但是，过滤会使过滤后的值不可引用。因此
reduce
是一个更好的选择。只需使用
red即可
const [limit, setLimit] = useState(false);
const data = [{name: "john}, {name: 'Anna'}]

data.slice(0, extended ? data.length : 1).map((item, index) => <Text>{item.name}</Text>)