Javascript 迭代对象并使用forEach追加新数据

我正在创建一个导航栏，并试图用面向对象编程来实现它

在我的导航栏上，我得到了一些社交图标，你可以点击这些图标与我联系。idéa只是在我的对象中添加新的键和值，以便在将来添加新的社交图标

对于navbar.socialLinks的每个键和值，我想在每个新添加的图标上添加不同的imgSrc和link值。有没有聪明的方法

先谢谢你

const navbar = {
"socialLinks": {
    github: {
        imgSrc: "assets/images/github_logo.png" , 
        link:   "https://www.github.com"
    },
    line: {
        imgSrc: "assets/images/line_logo.png" , 
        link:   ""
    },
    linkedin: {
        imgSrc: "assets/images/linkedin_logo.png", 
        link:   "https://www.linkedin.com"
    },
    showLinks: function() {

        let social = Object.values(navbar.socialLinks)
        let imgSrc = [];
        let socialLinks = [];

        for(let values of social) {
            imgSrc.push(values.imgSrc);
            socialLinks.push(values.link);
        }

        imgSrc.pop(); // Remove the function from the Arrays
        socialLinks.pop();

        imgSrc.forEach(function() {

            $('.social-icons').append

            (`
            <div class="item-social">
                <a href="${socialLinks[0]}" target="_rel">
                <img src="${imgSrc[0]}" alt="">
                </a>
                <div class="item-social-text">
                <div class="underscore"></div>
                <span class="open">Open</span>
            </div>
            `)
        })

        console.log(imgSrc);
        console.log(socialLinks);

        }
    }
}

const导航栏={
“社会链接”：{
github：{
imgSrc：“资产/图像/github_logo.png”，
链接：“https://www.github.com"
},
行：{
imgSrc：“资产/图像/线_logo.png”，
链接：“
},
linkedin：{
imgSrc：“资产/图像/linkedin_logo.png”，
链接：“https://www.linkedin.com"
},
showLinks:function（）{
let social=Object.values（navbar.socialLinks）
设imgSrc=[]；
让社会链接=[]；
为了（让社会的价值观）{
imgSrc.push（values.imgSrc）；
socialLinks.push（values.link）；
}
imgSrc.pop（）；//从数组中删除该函数
socialLinks.pop（）；
imgSrc.forEach（函数（）{
$（'.social icons'）。追加
(`
打开
`)
})
控制台日志（imgSrc）；
控制台日志（socialLinks）；
}
}
}

编辑：

---

我注意到我的问题打了个负号。在发布之前，我做了很多研究，但对编程和javascript一般来说都是新手，在访问对象内部的数据方面没有做太多工作。从下面的问题中学到了很多。谢谢

对象不可编辑，因此不能直接使用forEach，但可以使用

Object.keys（）

获取键数组，然后使用这些键修改对象值：

 Object.keys(navbar.socialLinks).forEach(key => {
     navbar.socialLinks[key].imgSrc = 'new image src here';
     navbar.socialLinks[keys].link = 'new link here'
 })

---

我会这样做：

const navbar = {
  socialLinks: {
    github: {
      imgSrc: "assets/images/github_logo.png",
      link: "https://www.github.com"
    },
    line: {
      imgSrc: "assets/images/line_logo.png",
      link: ""
    },
    linkedin: {
      imgSrc: "assets/images/linkedin_logo.png",
      link: "https://www.linkedin.com"
    }
  },
  showLinks: () => {
    let social = Object.values(navbar.socialLinks);
    for (let value of social) {
      $(".social-icons").append(`
              <div class="item-social">
                  <a href="${value.link}" target="_rel">
                  <img src="${value.imgSrc}" alt="">
                  </a>
                  <div class="item-social-text">
                  <div class="underscore"></div>
                  <span class="open">Open</span>
              </div>
            `);
    }
  }
};

const导航栏={
社交链接：{
github：{
imgSrc：“资产/图像/github_logo.png”，
链接：“https://www.github.com"
},
行：{
imgSrc：“资产/图像/线_logo.png”，
链接：“
},
linkedin：{
imgSrc：“资产/图像/linkedin_logo.png”，
链接：“https://www.linkedin.com"
}
},
showLinks:（）=>{
让social=Object.values（navbar.socialLinks）；
为了（让社会的价值）{
$（“.social icons”）.append(`
打开
`);
}
}
};

首先，我将从值中分离showLinks方法。这样就不需要在separate列表中保存imgSrc和link，只需直接使用该对象（如果向对象添加更多属性，则无需创建新数组，且更易于维护）。

一些备注：

• 由于您不使用

  socialLinks

  的键，而且顺序很重要，因此将其定义为对象数组更有意义
• 从数组中删除函数的

  pop

  操作没有那么好。最好首先避免这种情况发生：将该函数与数据分开
• 不要将链接和图像推送到单独的阵列。您应该使用已有的数据结构。没有必要转换它
• 在使用jQuery时，还可以使用它来生成DOM内容
• 我不相信您希望对line元素执行“打开”操作。使用一个条件来包含或不包含该

  span

  元素。您可能希望对某些其他内容执行相同的操作，这些内容仅应在对象不表示除数行时包含

以下是我将如何编写代码：

const navbar = {
    socialLinks: [{
        imgSrc: "assets/images/github_logo.png" , 
        link:   "https://www.github.com"
    }, {
        imgSrc: "assets/images/line_logo.png" , 
        link:   ""
    }, {
        imgSrc: "assets/images/linkedin_logo.png", 
        link:   "https://www.linkedin.com"
    }],
    showLinks() {
        $('.social-icons').append(this.socialLinks.map(({imgSrc, link}) =>
            $("<div>").addClass("item-social").append(
                $("<a>", {href: link, target: "_rel"}).append(
                    $("<img>", {src: imgSrc, alt: ""}),
                ),
                $("<div>").addClass("item-social-text"),
                $("<div>").addClass("underscore"),
                link && $("<span>").addClass("open").text("Open")
            )
        ));
    }
}
navbar.showLinks();

const导航栏={
社交链接：[{
imgSrc：“资产/图像/github_logo.png”，
链接：“https://www.github.com"
}, {
imgSrc：“资产/图像/线_logo.png”，
链接：“
}, {
imgSrc：“资产/图像/linkedin_logo.png”，
链接：“https://www.linkedin.com"
}],
showLinks（）{
$（'.socialicons'）.append（this.socialLinks.map（{imgSrc，link}）=>
$（“”）.addClass（“项目社交”）.append(
$（“”，{href:link，目标：“\u rel”}）。追加(
$（“”）.addClass（“项目社交文本”），
$（“”）.addClass（“下划线”），
链接（&&$）.addClass（“打开”）.text（“打开”）
)
));
}
}
showLinks（）；