如何打破 .map 功能答案

【问题标题】：How to break .map function如何打破 .map 功能
【发布时间】：2018-01-14 08:59:06
【问题描述】：

如何破坏 .map 函数？下面附上代码示例。一旦索引达到 5，我想打破外观，因为我只想将 5 Avatar 渲染到屏幕上。

<View style={{ flexDirection: 'row', marginTop: 20, marginLeft: 30  }}>
    {
      peopleGroup.map((people, i) => {
        if(i<5) {
          return (
            <Avatar
              key={people.id}
              width={30}
              position='absolute'
              containerStyle={{ transform: [{translate: [-28 + (28 * i), 0, 1 - (i * 0.1)]}] }}
              small
              rounded
              source={{uri: people.image}}
              activeOpacity={0.7}
              />
          )
        }else if(i===5) {
          return (
          <View key={i} style={{ transform: [{translate: [(25 * i), 9, 0]}]  }}>
            <Text>{peopleGroup.length}</Text>
          </View>
          )
        }
      }
      )
    }
</View>

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

在映射之前使用Array.slice。

peopleGroup
.slice(0, 5) // creates a copy of original, 5 items long
.map(...) // subsequent operations work on the copy

多田！

【讨论】：

【解决方案2】：

如何破坏 .map 函数？

不可能，我们不能破坏#array.map，它将针对数组的每个元素运行。

要解决您的问题，您可以先使用 slice 然后 map，slice 数组的前 5 个元素然后对其运行 map。

像这样：

peopleGroup.slice(0,5).map((people, i) => {
    return (...)
}

【讨论】：

【解决方案3】：

而不是使用.slice 和.map，这将创建另一个循环。
您可以使用.reduce，这样您就可以通过一个循环来执行逻辑（更好的性能）。
不同之处在于.map 必须返回相同长度的数组，而.reduce 实际上可以返回任何内容。

  data.reduce((result, current, i) => {
    if (i < 5) {
      result.push(<div>{current}</div>);
    }
    return result;
  }, [])

运行示例：

const data = [1, 2, 3, 4, 5, 6, 7];

const App = () => (
  <div>
    {data.reduce((result, current, i) => {
      if (i < 5) {
        result.push(<div>{current}</div>);
      }
      return result;
    }, [])}
  </div>
);

ReactDOM.render(<App />, 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>

【讨论】：

Array.reduce 是炸弹。
使用Array.reduce 的一个缺点是，如果输入数组的长度为一百万，reduce 迭代器将执行一百万次。如果您只想处理前 5 个项目，那么一百万次迭代是一个很高的代价。我假设Array.slice 不会在幕后执行一百万次操作，尽管如果必须在引擎中执行此操作比在应用程序代码中执行此操作要好。

【解决方案4】：

抛出新的错误（e）；将其添加到 try catch 以防止崩溃。

【讨论】：