Javascript 去掉数组中输出对象之间的逗号

这是我输出警报的代码，因为它们与国家公园有关。一切都很好，只是我在对象之间得到了一个逗号，我不知道如何修复它。 以下是我输出国家公园和警报的代码：

const alertEndpoint = ('https://api.nps.gov/api/v1/alerts?limit=400&api_key=' + apikey);
const parkEndpoint = ('https://api.nps.gov/api/v1/parks?limit=500&api_key=' + apikey);

getParkData();

async function getParkData() {


const [parkAlerts, parkInfo] = await Promise.all([fetch(alertEndpoint), fetch(parkEndpoint)]);

const alertResults = await parkAlerts.json();
const parkResults=  await parkInfo.json();

const alertsData = alertResults.data;
const parkData = parkResults.data;

alertsFilter(alertsData, parkData);

}

  function alertsFilter(alertsData, parkData) {

const filteredAlerts = alertsData.filter(function (onlyAlerts) {
    return onlyAlerts.category.toLowerCase() === "park closure" || 
 onlyAlerts.category.toLowerCase() === "caution";


});
parksFilter(parkData, filteredAlerts);



 }

 function parksFilter(parkData, filteredAlerts) {
const filteredParks = parkData.filter(function (onlyNatParks) {
    return onlyNatParks.designation.toLowerCase().includes( "national park");

});
joinParksToAlerts(filteredParks, filteredAlerts);
 }

 function joinParksToAlerts(filteredParks, filteredAlerts) {

const parksJoinedWithAlerts = filteredParks.map(park => {
    park.alerts = filteredAlerts.filter(alert => alert.parkCode === 
 park.parkCode);
    return park}).map(park =>{
    park.alerts = park.alerts.map(alert => alert.description).join(' 
 <br> - ');
    return park

});

 displayAlerts(parksJoinedWithAlerts);

 function joinParksToAlerts(filteredParks, filteredAlerts) {

    const parksJoinedWithAlerts = filteredParks.map(park => {
        park.alerts = filteredAlerts.filter(alert => alert.parkCode ===
            park.parkCode);
        return park
    }).map(park => {
            park.alerts = park.alerts.map(alert => alert.description).join('  <
                br > -');
                return park

            });

        displayAlerts(parksJoinedWithAlerts); console.log(parksJoinedWithAlerts);

    }

    function displayAlerts(parksJoinedWithAlerts) {

        const natParkDiv = document.querySelector('.nationalparks');
        console.table(parksJoinedWithAlerts);



        const displayEverything = parksJoinedWithAlerts.map(parkAndAlerts => {
            const parkName = parkAndAlerts.fullName;
            const stateName = parkAndAlerts.states;
            const alerts = parkAndAlerts.alerts;
            return `
       <div class="col-lg-12">
        <span class="park">${parkName}, ${stateName}<br></span>
        <span class="alerts">${alerts}</span>
    </div>
    `

        });
        console.log(displayEverything);

        natParkDiv.innerHTML = displayEverything;
    }

const alertEndpoint=（'https://api.nps.gov/api/v1/alerts?limit=400&api_key="apikey",；
常数parkenpoint=（'https://api.nps.gov/api/v1/parks?limit=500&api_key="apikey",；
getParkData（）；
异步函数getParkData（）{
const[parkAlerts，parkInfo]=等待承诺。全部（[fetch（alertEndpoint），fetch（parkEndpoint）]；
const alertResults=wait parkAlerts.json（）；
const parkResults=wait parkInfo.json（）；
const alertsData=alertResults.data；
const parkData=parkResults.data；
alertsFilter（alertsData、parkData）；
}
功能警报过滤器（警报数据、停车数据）{
常量filteredAlerts=alertsData.filter（函数（仅限字符）{
仅返回lerts.category.toLowerCase（）=“公园关闭”|
onlylerts.category.toLowerCase（）=“小心”；
});
停车场过滤器（停车场数据、过滤器数据）；
}
功能驻车过滤器（驻车数据、过滤器数据）{
const filteredParks=parkData.filter（函数（仅适用于公园）{
仅限返回国家公园。名称。toLowerCase（）。包括（“国家公园”）；
});
联合停车场警报（过滤停车场、过滤停车场警报）；
}
功能连接停车警报（过滤停车场、过滤停车场）{
const parksJoinedWithAlerts=filteredParks.map（公园=>{
park.alerts=filteredAlerts.filter（alert=>alert.parkCode==
公园代码）；
返回公园}）。地图（公园=>{
park.alerts=park.alerts.map（alert=>alert.description）。加入（'

-'）；
返回公园
});
显示警报（驻车辅助警报）；
功能连接停车警报（过滤停车场、过滤停车场）{
const parksJoinedWithAlerts=filteredParks.map（公园=>{
park.alerts=filteredAlerts.filter（alert=>alert.parkCode===
公园代码）；
返回公园
}).map（公园=>{
park.alerts=park.alerts.map（alert=>alert.description）。加入（'<
br>-'）；
返回公园
});
显示警报（parksJoinedWithAlerts）；console.log（parksJoinedWithAlerts）；
}
功能显示警报（驻车辅助警报）{
const natParkDiv=document.querySelector（“.nationalparks”）；
控制台。工作台（停车场与警报连接）；
const displayEverything=parksJoinedWithAlerts.map（parkAndAlerts=>{
const parkName=parkAndAlerts.fullName；
const stateName=parkAndAlerts.states；
常量警报=驻车辅助警报。警报；
返回`
${parkName}，${stateName}

${alerts}
`
});
console.log（显示所有内容）；
natParkDiv.innerHTML=显示所有内容；
}

以下是输出：

阿卡迪亚国家公园

10月23日至24日上午6:30至下午4:00，约旦湖西侧10号和14号交叉口之间的运输通道将关闭，以便更换涵洞

,

犹他州拱门国家公园

,

荒地国家公园，SD

10月10日和11日上午10点至下午2点，Ben Reifel游客中心将断电。游客中心仍可获取信息。洗手间、展品、电影和书店将不可用。Cedar Pass Lodge的洗手间可用

,

德克萨斯州大弯国家公园

由于熊的活动增加，迷路矿场将于2018年10月12日关闭。卡萨格兰德峰的矿场、矿场、停车场和朝北斜坡将关闭，直至另行通知。所有其他矿场将在此时保持开放

---

，

驻车。警报等是数组。您通过将它们隐式转换为字符串来输出它们，该字符串调用
join
，不带参数，默认使用逗号连接数组。若要避免这种情况，请使用空字符串调用
join
：

return `
   <div class="col-lg-12">
    <span class="park">${parkName}, ${stateName}<br></span>
    <span class="alerts">${alerts.join()}</span>
</div>
`;

返回`
${parkName}，${stateName}

${alerts.join（）}
`;

注意
警报
上的更改


旁注：在一些地方，您直接将对象中的文本（例如，来自
说明
）用作HTML。这是不安全的，而且从格式角度来看也是有问题的。您至少需要更改
，您可以使用reduce（）将数组元素连接在一起。当您强制数组进入字符串上下文时，元素将使用逗号隐式连接。如果您不希望这样做，请使用您选择的分隔符（在本例中为空字符串）将它们连接在一起，并将其结果指定为innerHTML。@MarioSantini-您可以，但惯用的方法是
join
@T.J.Crowder当然，我的目的是添加一些内容以进一步推动OP需要。它告诉我，在使用${alerts.join（）}之后，alerts.join（）不是一个函数@ScottCaudle-问题中的代码很难阅读，但据我所知，
警报
将是一个数组，因此肯定会有
加入
（它也与您的症状——逗号——完美匹配）。请使用runnable更新您的问题，使用堆栈片段演示问题（
[]
工具栏按钮）。