如何映射并返回反应中的第一个和最后一个元素？答案

【问题标题】：How can I map and return first and last element in react?如何映射并返回反应中的第一个和最后一个元素？
【发布时间】：2022-01-23 00:31:52
【问题描述】：

我在登录返回第一个元素和最后一个元素时遇到问题：

这是我的对象数组：

0:
pointAmountMax: 99999
pointAmountMin: 1075
rateCode: ['INAINOW']
roomPoolCode: "ZZAO"
[[Prototype]]: Object
1:
pointAmountMax: 99999
pointAmountMin: 850
rateCode: ['INAINOJ']
roomPoolCode: "TOGA"
[[Prototype]]: Object
length: 2

如何映射数组并首先返回较小的 pointAmountMin 数字？

所以在这种情况下，我想在我的前端实现这样的目标

return <p>850 - 1075</p>

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

要首先获得所需的输出，您需要按与属性 pointAmountMin 相关的升序对对象数组进行排序。

let arrayOfObj = [
    {
        pointAmountMax: 99999,
        pointAmountMin: 1075,
        rateCode: ['INAINOW'],
        roomPoolCode: "ZZAO",
    },
    {
        pointAmountMax: 99999,
        pointAmountMin: 850,
        rateCode: ['INAINOJ'],
        roomPoolCode: "TOGA",
    }
];

arrayOfObj.sort((a, b) => {
    return a.pointAmountMin - b.pointAmountMin
})
console.log(arrayOfObj)

然后只收集一个数组中的 pointAmountMin 值。

const filteredResult = arrayOfObj.map(() => {
  return pointAmountMin
})

您拥有按升序排列的所有 pointAmountMin 属性值的列表（最小值在前）现在您可以在 UI 上以您需要的格式显示它

<p>filteredResult.join(' - ')</p>

【讨论】：

如果我在一个数组中有 3 个对象怎么办，我怎样才能只返回第一个和最后一个？
好的，所以想显示像
pointAmountMin 的最小值 - pointAmountMin 的最大值
这样的输出？
是的，正确...
那你可以这样试试
filteredResult[0] + '-' + filteredResult[filteredResult.length-1]

【解决方案2】：

使用sort()，然后返回所需的 HTML

function App(){
  const myArray = [
    {
        pointAmountMax: 99999,
        pointAmountMin: 1075,
        somethingElse: null,
    },
    {
        pointAmountMax: 99999,
        pointAmountMin: 650,
        somethingElse: null,
    },
    {
        pointAmountMax: 99999,
        pointAmountMin: 975,
        somethingElse: null,
    }
  ]
  const getRange = (data) => {
    let sorted = data.sort((a,b) => a.pointAmountMin - b.pointAmountMin)
    return [
      <p key={Math.random()}>
        {sorted[0].pointAmountMin} - {sorted.pop().pointAmountMin}
      </p>
    ]
  }
  return <span>{getRange(myArray)}</span>;
}
ReactDOM.render(<App/>, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"/>

【讨论】：