有可能只映射数组的一部分吗?(Array.map())

Is it possible to map only a portion of an array? (Array.map())

本文关键字：map Array 一部分 映射 数组 有可能      更新时间：2023-09-26

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

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

这是我现在使用的'feed'代表我的JSON对象数组。(这将显示整个数据集。)

 return (
  <div className={feedClass}>
  {
    feed.map((item, index) => {
      return <FeedItem key={index} data={item}/>
    })
  }
  </div>
);

我想知道是否可以在数组的一部分上使用.map()，而不必事先分解数组?我知道一个可能的解决方案是保存完整的数据集，并将其分成几个部分，然后.map()这些部分，但是有没有一种方法可以在不分解数组的情况下。map()数组的一部分?

任何和所有的反馈是赞赏的。谢谢!

不要试图在映射步骤中通过hack来解决这个问题。

相反，slice()在映射之前先将列表映射到正确的长度:

class Feed extends React.Component {
  constructor(props) {
    super(props)
    
    this.handleShowMore = this.handleShowMore.bind(this)
    
    this.state = {
      items: ['Item A', 'Item B', 'Item C', 'Item D'],
      showItems: 2
    }
  }
  
  handleShowMore() {
    this.setState({
      showItems: 
        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) => <div>{item}</div>
    )
    
    return (
      <div>
        {items}
        <button onClick={this.handleShowMore}>
          Show more!
        </button>
      </div>
    )
  }
}
  
ReactDOM.render(
  <Feed />,
  document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='root'></div>

我认为最简单的方法就是使用滤镜和映射

const feed = [1,2,3,4,5,6,7,8,9,10,11]
feed.filter((item, index) => index < 5).map((filteredItem) => //do somthing with filtred item here//)

数组。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;
}, []);

您可以使用之前的slice函数来映射数组，看起来您想在那里做一些分页。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);
// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']

如果您只想映射数组的一部分，您应该首先根据条件筛选()数组以获得期望的部分:

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

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

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

你可以使用slice来获取数组的一部分:

const data = [1,2,3,4,5,6,7,8,9,10,11]
var updatedData = data.slice(0, 3);

Array#map遍历所有项。

map() 方法使用对数组中的每个元素调用提供的函数的结果创建一个新数组。

可以用Array#filter

filter() 方法创建一个包含所有通过所提供函数实现的测试的元素的新数组。

为所需的项目，然后应用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;
});

使用slice()比在map或reduce函数中添加条件要好，但它仍然会创建一个额外的、未使用的数组段副本。根据你正在做的事情，这可能不是你想要的。相反，只需使用自定义map函数:

function sliceMap(fn, from, toExclusive, array) {
  const len = toExclusive - from;
  const mapped = Array(len);
  for (let i = 0; i < len; i++) {
    mapped[i] = fn(array[i + from], i);
  }
  return mapped;
};

注意，fn接收数组值和(现在)从零开始的索引。您可能希望传递原始索引(i + from)。您可能还希望将完整的array作为第三个参数传递，Array.map就是这样做的。

使用这个简单的方法

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

这里我们将有两种情况:

  1. 只显示第一个数据，即John
  2. 显示所有
data.slice(0, extended ? data.length : 1).map((item, index) => <Text>{item.name}</Text>)

…

相关文章：