如何从包含三个对象的数组中获取每个对象？

Question

我在一个对象中放置了三个数组，我想让每个数组设置值，我尝试Object.keys(obj).forEach(function(key){遍历它，它得到一个对象的值，但是我不能得到第三级的项。

而且，我尝试过const iterate = (obj)，它不能很好地工作。

迭代函数是否能够得到项，然后设置值，或者使用.forEach来获得它。

浏览器搜索工具

var iconsData = {
   iconArraya: [
        {
            name: 'bilibili',
            image:'https://i.ibb.co/R9HMTyR/1-5.png',
            host: ['www.bilibili.com'],
            popup: function (text) {
                open('https://search.bilibili.com/live?keyword=' + encodeURIComponent(text));
            }
        }
    ],
    iconArrayb: [
        {
            name: 'open',
            image:'https://i.ibb.co/R9HMTyR/1-5.png',
            host: [''],
            popup: function (text) {
                if(text.indexOf("http://")==0||text.indexOf("https://")==0)
                window.open(text, "_blank");
                else window.open("http://"+text, "_blank");
            }
        }
    ],
    iconArrayc: [
        {
            name: 'copy',
            image:'https://i.ibb.co/R9HMTyR/1-5.png',
            host: [''],
            popup: function (text) {
                if(text.indexOf("http://")==0||text.indexOf("https://")==0)
                window.open(text, "_blank");
                else window.open("http://"+text, "_blank");
            }
        }
    ],

    hostCustomMap: {}
    }

    Object.keys(iconsData).forEach((key, index) => {
        Object.keys(iconsData[key]).forEach((keya, index) => {   
            iconsData[key][keya].host.forEach(function (host) {     // The console shows an Error
                iconsData.hostCustomMap[host] = iconsData[key][keya].custom;
            });
        });
   });

    var text = GM_getValue('search');
    if (text && window.location.host in iconsData.hostCustomMap) {
        keyword.beforeCustom(iconsData.hostCustomMap[window.location.host]);
    }
    var iconArray =
    {
        icona: document.createElement('div'),
        iconb: document.createElement('div'),
        iconc: document.createElement('div')
    }

    Object.keys(iconsData).forEach((key, indexa) => {
       Object.keys(iconsData[key]).forEach((keya, indexb) => {
           Object.keys(iconsData[key][keya]).forEach(function (obj) {
               var img = document.createElement('img');
               img.setAttribute('src', obj.image);
               img.setAttribute('alt', obj.name);
               img.setAttribute('title', obj.name);
               img.addEventListener('mouseup', function () {
               keyword.beforePopup(obj.popup);
           });
           img.setAttribute('style', '' +
               'cursor:pointer!important;' +
               'display:inline-block!important;' +
               'width:22px!important;' +
               'height:22px!important;' +
               'border:0!important;' +
               'background-color:rgba(255,255,255,1)!important;' +
               'padding:0!important;' +
               'margin:0!important;' +
               'margin-right:5px!important;' +
               '');
           Object.keys(iconArray).forEach((keyb, indexc) => {
               if(indexc = indexa){
                   iconArray[keyb].appendChild(img);
                   console.log(indexc,indexa)
               }
           });
           });
        });
      });

    Object.getOwnPropertyNames(iconArray).forEach(function(key){
        iconArray[key].setAttribute('style', '' +
            'display:none!important;' +
            'position:absolute!important;' +
            'padding:0!important;' +
            'margin:0!important;' +
            'font-size:13px!important;' +
            'text-align:left!important;' +
            'border:0!important;' +
            'background:transparent!important;' +
            'z-index:2147483647!important;' +
            '');
    });

    Object.getOwnPropertyNames(iconArray).forEach(function(key){
        document.documentElement.appendChild(iconArray[key]);
    });

    document.addEventListener('mousedown', function (e) {
        if (e.target == iconArray || (e.target.parentNode && e.target.parentNode == iconArray)) {
            e.preventDefault();
        }
    });

    document.addEventListener("selectionchange", function () {
        if (!window.getSelection().toString().trim()) {
            iconArray.icona.style.display = 'none';
            iconArray.iconb.style.display = 'none';
            iconArray.iconc.style.display = 'none';
        }
    });

    document.addEventListener('mouseup', function (e) {
        if (e.target == iconArray || (e.target.parentNode && e.target.parentNode == iconArray)) {
            e.preventDefault();
            return;
        }
        var text = window.getSelection().toString().trim();
        var url = text.match(/(https?:\/\/(\w[\w-]*\.)+[A-Za-z]{2,4}(?!\w)(:\d+)?(\/([\x21-\x7e]*[\w\/=])?)?|(\w[\w-]*\.)+(com|cn|org|net|info|tv|cc|gov|edu)(?!\w)(:\d+)?(\/([\x21-\x7e]*[\w\/=])?)?)/i);
        if (url && iconArray.iconb.style.display == 'none') {
            iconArray.iconb.style.top = e.pageY +40 + 'px';
            if(e.pageX -70<10)
                iconArray.iconb.style.left='10px';
            else
                iconArray.iconb.style.left = e.pageX -70 + 'px';
            iconArray.iconb.style.display = 'block';
        } else if (text.length >= 30) {
            iconArray.iconc.style.top = e.pageY +40 + 'px';
           if(e.pageX -70<10)
               iconArray.iconc.style.left='10px';
           else
               iconArray.iconc.style.left = e.pageX -70 + 'px';
           iconArray.iconc.style.display = 'block';
        } else if (!text) {
            iconArray.icona.style.display = 'none';
            iconArray.iconb.style.display = 'none';
            iconArray.iconc.style.display = 'none';
        } else if(text && iconArray.icona.style.display == 'none'){
           iconArray.icona.style.top = e.pageY +40 + 'px';
           if(e.pageX -70<10)
               iconArray.icona.style.left='10px';
           else
               iconArray.icona.style.left = e.pageX -70 + 'px';
           iconArray.icona.style.display = 'block';
        }
    });

Answer 1

Object.keys(object)返回提供对象的属性名数组，在您的示例中，它将返回[iconArraya,iconArrayb,iconArrayc]，如果要这样做，您将引用对象，即对于数组中的每个值，您需要这样做-- object[value]，by the way this is called bracket notation you can search it if you're unfamiliar it the same using a dot like object.value，这里是如何实现===的

[iconArraya,iconArrayb,iconArrayc].forEach(property=>{
  object[property];
 })

您还可以使用Object.values(object)访问这些值，这是===的方式

Object.values(object).forEach(value=>{
 //here you don't have to reference the object you have direct access to the 
 value
})

或者使用for...in循环，因为for...in循环允许您访问属性，所以您还必须引用对象，这是===的方式

for(property in object){
   object[property];
 // you can do whatever you want with the values even change them
}

Answer 2

您会得到一个错误，因为您的代码试图在hostCustomMap上迭代.forEach()，这不是您想要做的。

使用构造函数检查确保属性是数组：

Object.keys(iconsData).forEach((key, index) => {
    if (iconsData[key].constructor==Array) {
        Object.keys(iconsData[key]).forEach((keya, index) => {
            iconsData[key][keya].host.forEach(function (host) {     // The console shows an Error
                iconsData.hostCustomMap[host] = iconsData[key][keya].custom;
            });
        });
    }
});