我已经数不清看过《实习医生风云》的次数了，目前我正在重新观看《实习医生格蕾》第三次（也许是第四次？）。我注意到有很多演员都出现在这两集中，而且似乎每隔一集都有出现。经过一些数据争论后，我得到了一个实际的答案：两个系列中都有 28 名演员出演。
想法
我认为在网站上展示这一点并突出我所说的“双医生”：即在两部剧中都扮演医生的演员，会很有趣。该网站名为DoubleShift ，它有一个我设计的漂亮徽标：
我向大卫提到了这个想法，他问豪斯的数据如何。因此，我将《豪斯医生》添加到了我的数据集中：78 位演员出现在《实习医生格蕾》和《豪斯医生》中，48 位演员出现在《实习医生风云》和《豪斯医生》中。我还添加了ER，因为它也有很多交叉。
我简单地添加了综合医院，因为它已经运行了很长时间，但只有一位女演员曾出演过任何其他节目，所以我再次删除了它。此外，再添加一场演出也会产生更多的排列。
处理数据
为了获取每个节目的演员数据，我使用了电影数据库 API ，它有一个方便的“Aggregate Credits”端点，用于获取所有季节的节目中的所有演员。然后，我通过 TMDB ID 将该数据映射到键控对象：
const res = await fetch ( ` https://api.themoviedb.org/3/tv/ ${ show . id } /aggregate_credits?&series_id=1416&language=en-US ` , {
headers : {
'Authorization' : ` Bearer ${ process . env . API_KEY } ` ,
'accept' : 'application/json'
}
} )
const json = await res . json ( )
const data = { }
json . cast . forEach ( ( actor ) => {
data [ actor . id ] = {
... actor ,
}
} )
要找到参加过这两场演出的演员， filter就可以达到目的：
const intersection = Object . keys ( showData [ showOne ] ) . filter ( element => Object . keys ( showData [ showTwo ] ) . includes ( element ) )
// console.log(intersection)
// [123, 3456, 3456]
我像往常一样使用Eleventy ，因为它的数据文件非常适合处理此类事情，并且使用 nunjucks 可以轻松输出我想要的内容。我决定避免在网站本身上使用 javascript，因此我使用 CSS 和单选按钮来显示和隐藏每个显示组合。
#show-greys-scrubs {
display : none ;
}
#greys-scrubs:checked ~ #show-greys-scrubs {
display : none ;
}
值得注意的是，当使用后续同级组合器( ~ ) 时，两个元素必须是同一父元素的子元素，因此我不能将单选按钮放在自己的容器内，这使得对它们进行样式设计稍微困难一些，但要付出很小的代价这里不要依赖JS。