遍历对象并使用 forEach 追加新数据答案

【问题标题】：Iterate through object and append new data with forEach遍历对象并使用 forEach 追加新数据
【发布时间】：2020-05-14 09:26:53
【问题描述】：

我正在创建一个导航栏并尝试在考虑到面向对象编程的情况下进行。

在我的导航栏上，我有社交图标，您可以点击这些图标与我联系。想法是只在我的对象中添加新的键和值，以便将来添加新的社交图标。

对于 navbar.socialLinks 的每个键和值，我想在每个附加的新图标上附加不同的 imgSrc 和链接值的 html。有没有聪明的方法来做到这一点？

提前谢谢你。

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);

        }
    }
}

编辑：

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

【问题讨论】：

标签： javascript arrays oop for-loop iteration

【解决方案1】：

对象是不可迭代的，所以你不能直接使用 forEach，但你可以使用Object.keys() 来获取键数组，然后使用这些键来修改对象值：

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

【讨论】：

【解决方案2】：

我会这样做：

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>
            `);
    }
  }
};

首先，我将 showLinks 方法与值分开。那么就无需将 imgSrc 和链接保存在单独的列表中，直接使用该对象即可（如果您向对象添加更多属性，则无需创建新数组，这样更易于维护）。

【讨论】：

【解决方案3】：

一些备注：

由于您不使用socialLinks 的键，并且顺序很重要，因此将其定义为对象数组更有意义。
您从数组中删除函数的pop 操作不是很好。最好一开始就避免这种情况发生：将该函数与数据分开。
不要将链接和图像推送到单独的数组中。您应该使用已有的数据结构。不需要转换它
当您使用 jQuery 时，也可以使用它来生成 DOM 内容。
我不相信您想要对线元素进行“打开”操作。使用条件来包含或不包含 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();

【讨论】：