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

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) {

  const listNode = document.querySelector('.last-arrivals');

  dataList.forEach(({ segments: segmentList }) => {

  //const lastSegmentItem = segmentList[segmentList.length - 1];

  //const arrivalCity = lastSegmentItem && lastSegmentItem.arrivalCity;

    const arrivalCity = segmentList[segmentList.length - 1]?.arrivalCity;

    if (arrivalCity) {

      const itemNode = document.createElement('li');

      itemNode.textContent = arrivalCity.caption || '';

      listNode.appendChild(itemNode);

    }

  })

}

const legs = [{

  "segments": [{

    "arrivalCity": {

      "uid":"LED",

      "caption":"ST PETERSBURG"

    }

  }, {

    "arrivalCity": {

      "uid":"LON",

      "caption":"LONDON"

    }

  }]

}, {

  "segments": [{

    "arrivalCity": {

      "uid":"MOW",

      "caption":"MOSCOW"

    }

  }]

}];

renderListOfLastArrivalCities(legs);

<ul class="last-arrivals"></ul>

Answer 2

它无法重现您的问题。请向我们展示您的阵列。

假设你的数组是，

var leg={segments:[{arrivalCity:{caption:"cap1"}}]};

然后如果你跑；

leg.segments[leg.segments.length - 1].arrivalCity.caption

您将看到预期输出为“cap1”

Answer 3

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

您能否与我们分享您的阵列以供我们查看。