如何将查找PUBLICATIONS_OVERVIEW的segmentId的两段JS代码合并为单行？

我有如下结构的对象数组，需要从中找到title为"PUBLICATIONS_OVERVIEW"的segmentId：

{
  "sections": [
    {
      "title": "CAMPAIGNS",
      "segments": [
        { "title": "CAMPAIGN_DA", "segmentId": 145 },
        { "title": "CAMPAIGN_IM", "segmentId": 146 },
        { "title": "CAMPAIGN_ENG", "segmentId": 147 },
        { "title": "CAMPAIGN_DEMO", "segmentId": 148 },
        { "title": "CAMPAIGN_BUDGET", "segmentId": 149 }
      ]
    },
    {
      "title": "PUBLICATIONS",
      "segments": [
        { "title": "PUBLICATIONS_OVERVIEW", "segmentId": 150 },
        { "title": "PUBLICATIONS_POSTS", "segmentId": 151 }
      ]
    }
  ]
}

当前使用两段JavaScript代码可正常实现需求：

const publicationSegments = this.sections.find(section => section.title === 'PUBLICATIONS');
const segmentId = publicationSegments.segments.find(segment => segment.title === 'PUBLICATIONS_OVERVIEW').segmentId;

但尝试将这两段代码合并为单行时，输出始终为undefined，希望了解正确的单行代码写法。

解答 #

直接将两段代码链式调用即可得到正确的单行写法：

const segmentId = this.sections.find(section => section.title === 'PUBLICATIONS').segments.find(segment => segment.title === 'PUBLICATIONS_OVERVIEW').segmentId;

注意事项 #

如果find方法找不到匹配的section或segment，会返回undefined，此时直接链式调用会抛出TypeError。如果需要兼容找不到匹配项的场景，可以使用可选链操作符?.来避免报错，此时找不到时segmentId会返回undefined：

const segmentId = this.sections.find(section => section.title === 'PUBLICATIONS')?.segments.find(segment => segment.title === 'PUBLICATIONS_OVERVIEW')?.segmentId;

内容的提问来源于stack exchange，提问作者Lorenzo