如何获取数组的最后一项？

Question

我有一系列对象。我需要渲染数组最后一项的信息，我尝试这样做：

<p>{leg.segments[leg.segments.length - 1].arrivalCity.caption},&nbsp;</p>

但它一直报错

无法读取未定义的属性“标题”。

似乎我可以从长度为 2 及以上的数组中获取项目（或者当专门获取时，leg.segments[0].arrivalCity.caption但在尝试仅使用一项渲染数组时出现错误）。我无法理解问题是什么，因为它应该只leg.segments[leg.segment[0]]在 array 时返回只有一件商品，没关系。

所有对象都有“caption”键，唯一的问题是从 [0] 或 [1] 索引获取它。

该数组是已解析 JSON 的一部分，以下是我映射的一个元素作为示例：

"legs" :

 [

   {

     "segments" :

       [

         {

           "arrivalCity" :

             {

               "uid" : "LED",

               "caption" : "ST PETERSBURG"

             }

         },

         {

           "arrivalCity" :

             {

               "uid" : "LON",

               "caption" : "LONDON"

             }

         }

       ]

    },

    {

       "segments" :

         [

           {

              "arrivalCity" :

                {

                  "uid" : "MOW",

                  "caption" : "MOSCOW"

                }

           }

         ]

     }

 ]

我需要在第一种情况下渲染伦敦，在第二种情况下渲染莫斯科。但我可以得到 ST PETERSBURG 和 MOSCOW<p>{leg.segments[0].arrivalCity.caption}</p>或有错误<p>{leg.segments[leg.segments.length - 1].arrivalCity.caption}</p>

Answer 1

...引用OP ......<p>{leg.segments[0].arrivalCity.caption}</p>或者...<p>{leg.segments[leg.segments.length - 1].arrivalCity.caption}</p>误解可能是由于没有像数组一样对待legs。因此，为了始终访问arrivalCity每个segments数组的最后一项，必须legs首先迭代该数组。使用OP的示例数据并实现一个基本的渲染函数，该函数首先迭代数组，并且仅在每次迭代时始终通过eglegs访问当前数组的最后一项，正如OP已经正确完成的那样，除了预期的结果之外，什么都不会失败将呈现...segmentssegmentList[segmentList.length - 1]伦敦莫斯科... 例子 ...function renderListOfLastArrivalCities(dataList) {&nbsp; const listNode = document.querySelector('.last-arrivals');&nbsp; dataList.forEach(({ segments: segmentList }) => {&nbsp; //const lastSegmentItem = segmentList[segmentList.length - 1];&nbsp; //const arrivalCity = lastSegmentItem && lastSegmentItem.arrivalCity;&nbsp; &nbsp; const arrivalCity = segmentList[segmentList.length - 1]?.arrivalCity;&nbsp; &nbsp; if (arrivalCity) {&nbsp; &nbsp; &nbsp; const itemNode = document.createElement('li');&nbsp; &nbsp; &nbsp; itemNode.textContent = arrivalCity.caption || '';&nbsp; &nbsp; &nbsp; listNode.appendChild(itemNode);&nbsp; &nbsp; }&nbsp; })}const legs = [{&nbsp; "segments": [{&nbsp; &nbsp; "arrivalCity": {&nbsp; &nbsp; &nbsp; "uid":"LED",&nbsp; &nbsp; &nbsp; "caption":"ST PETERSBURG"&nbsp; &nbsp; }&nbsp; }, {&nbsp; &nbsp; "arrivalCity": {&nbsp; &nbsp; &nbsp; "uid":"LON",&nbsp; &nbsp; &nbsp; "caption":"LONDON"&nbsp; &nbsp; }&nbsp; }]}, {&nbsp; "segments": [{&nbsp; &nbsp; "arrivalCity": {&nbsp; &nbsp; &nbsp; "uid":"MOW",&nbsp; &nbsp; &nbsp; "caption":"MOSCOW"&nbsp; &nbsp; }&nbsp; }]}];renderListOfLastArrivalCities(legs);<ul class="last-arrivals"></ul>

Answer 2

它无法重现您的问题。请向我们展示您的阵列。假设你的数组是，var&nbsp;leg={segments:[{arrivalCity:{caption:"cap1"}}]};然后如果你跑；leg.segments[leg.segments.length&nbsp;-&nbsp;1].arrivalCity.caption您将看到预期输出为“cap1”

Answer 3

看起来就像你leg.segments[leg.segments.length - 1]的，我认为它是没有arrivalCity属性的对象。如果有，那么您一定是犯了任何拼写错误，或者您的数据形状可能不同。您能否与我们分享您的阵列以供我们查看。