Javascript 使用vanilla js迭代数组并渲染到DOM

我试图在另一个数组中循环一个数组，并将其呈现给DOM，但第二个数组的定义不明确。bellow是第二个数组，我在其中得到未定义的：

<p><strong>Website:</strong> <a href="https://${url}" target="_blank" rel="noopener noreferrer">${url}</a></p>
        <p><strong>Social:</strong> ${social.forEach(({ link, name }, idx, social) => {
       `<a key={name} href={link} target="_blank" rel="noopener noreferrer">
          ${social.length + 1 !== idx && idx !== 0 ? `, ${name}` : name}
        </a>`
})}
</p>

网站：

社交：${Social.forEach（{link，name}，idx，Social）=>{
``
})}

---

下面是完整的示例

这是您的代码。我使用了

map

而不是

forEach

//DOM元素
const getCardsElm=document.getElementById（“卡”）；
常数数据={
“img”：https://source.unsplash.com/random/800x600",
“品牌”：“某个品牌”，
“url”：“somelink.com”，
“服务”：“谷歌分析，Facebook像素”，
“社会性”：[
{
“链接”：https://facebook.com",
“名称”：“Facebook”
},
{
“链接”：https://instagram.com",
“名称”：“Instagram”
}
]
}
让filledaray=[…新数组（10）].map（（）=>数据）；
常量设置卡=（数组）=>{
让html=''；
forEach（{img，url，品牌，服务，社交}）=>{
常数卡=`
${brand}
网站：

社交：
${social.map（{link，name}，idx，social）=>{
返回``；
})}

服务：${service}

`;
html+=卡片
})
getCardsElm.innerHTML=html；
}
设置卡（填充阵列）
*，*：：之前，*：：之后{
保证金：0；
填充：0；
框大小：边框框；
}
.卡片{
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
}
.卡片{
光标：指针；
背景色：透明；
高度：300px；
宽度：300px；
利润率：10px；
透视图：1000px；
}
.卡h1{
字体大小：25px；
边框底部：1px#fff实心；
垫底：10px；
边缘底部：10px；
}
.卡img{
宽度：100%；
高度：300px；
对象匹配：覆盖；
}
.内部卡{
位置：相对位置；
宽度：100%；
身高：100%；
转变：转变0.8s；
变换样式：保留-3d；
}
.卡片：悬停。卡片内部{
变换：旋转（180度）；
}
.卡正面，
.退卡{
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.退卡{
背景色：#333；
颜色：白色；
填充：20px；
变换：旋转（180度）；
}
李先生{
列表样式：无；
垫底：10px；
}
这是您的代码。我使用了
map
而不是
forEach


//DOM元素
const getCardsElm=document.getElementById（“卡”）；
常数数据={
“img”：https://source.unsplash.com/random/800x600",
“品牌”：“某个品牌”，
“url”：“somelink.com”，
“服务”：“谷歌分析，Facebook像素”，
“社会性”：[
{
“链接”：https://facebook.com",
“名称”：“Facebook”
},
{
“链接”：https://instagram.com",
“名称”：“Instagram”
}
]
}
让filledaray=[…新数组（10）].map（（）=>数据）；
常量设置卡=（数组）=>{
让html=''；
forEach（{img，url，品牌，服务，社交}）=>{
常数卡=`
${brand}
网站：

社交：
${social.map（{link，name}，idx，social）=>{
返回``；
})}

服务：${service}

`;
html+=卡片
})
getCardsElm.innerHTML=html；
}
设置卡（填充阵列）
*，*：：之前，*：：之后{
保证金：0；
填充：0；
框大小：边框框；
}
.卡片{
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
}
.卡片{
光标：指针；
背景色：透明；
高度：300px；
宽度：300px；
利润率：10px；
透视图：1000px；
}
.卡h1{
字体大小：25px；
边框底部：1px#fff实心；
垫底：10px；
边缘底部：10px；
}
.卡img{
宽度：100%；
高度：300px；
对象匹配：覆盖；
}
.内部卡{
位置：相对位置；
宽度：100%；
身高：100%；
转变：转变0.8s；
变换样式：保留-3d；
}
.卡片：悬停。卡片内部{
变换：旋转（180度）；
}
.卡正面，
.退卡{
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
}
.退卡{
背景色：#333；
颜色：白色；
填充：20px；
变换：旋转（180度）；
}
李先生{
列表样式：无；
垫底：10px；
}
莎拉用
map
击败了我，我包括了
forEach
和
map
两个例子。
为了保持清洁，只需将社交圈排除在外即可


//DOM元素
const getCardsElm=document.getElementById（“卡”）；
常数数据={
“img”：https://placehold.it/400",
“品牌”：“某个品牌”，
“url”：“somelink.com”，
“服务”：“谷歌分析，Facebook像素”，
“社会性”：[
{
“链接”：https://facebook.com",
“名称”：“Facebook”
},
{
“链接”：https://instagram.com",
“名称”：“Instagram”
}
]
}
让filledaray=[…新数组（10）].map（（）=>数据）；
常量设置卡=（数组）=>{
让html=''；
forEach（{img，url，品牌，服务，社交}）=>{
让社会链接=“”；
social.map（{link，name}，idx，social）=>{
社交链接+=``
})
//每人
//social.forEach（{link，name}，idx，social）=>{
//社交链接+=``
// })
常数卡=`
${brand}
网站：

社交：${socialLinks}