如何获取位于另一个对象内部的对象的名称

How to get the name of an object that is inside another object?

本文关键字:内部 一个对象 对象 于另 何获取 获取      更新时间:2023-09-26

我正在做一个打开自定义对话框的项目。我正试图使其在settings对象中,您可以将自定义按钮的名称指定为对象的名称,其中包含按钮的信息。我想知道,我是如何得到按钮名称的?

我目前的代码是:

function resetTools() {
    Dialogue.open({
        message: "Are you sure you want to reset all chat rooms?",
        buttons: {
            yes: {
                styleSheetClass: "dangerbtn",
                onclick: function() {
                    // Do stuff here
                }
            },
            no: {
                onclick: function() {
                    // Do other stuff here
                }
            }
        }
    })
}
var Dialogue = {
    open: function(settings) {
        var message = settings.message;
        var buttons = message.buttons;
        for (var i = 0; i < buttons.length; i++) {
            var cls  = buttons[i].styleSheetClass.length ? buttons[i].styleSheetClass + " dialogueButton" : "dialogueButton";
            $(".dialogue .buttons").append('<div class="' + cls + '">' +  +'</div>');
        }
    }
}

谢谢你的帮助。

您可以使用for...in循环来获取对象的密钥,并记住使用hasOwnProperty来测试属性是否存在

for (var key in buttons) {
  if (buttons.hasOwnProperty(key)) {
    // key could be 'yes' or 'no'
    // access the value using buttons[key]
  }
}

或者您可以使用es5.1 中引入的Object.keys

Object.keys(buttons).forEach(function(key) {
  // do something with buttons[key]
})

有两个错误。。。

首先是

var buttons = message.buttons

这将使buttons成为undefined

应该是

var buttons = settings.buttons;

接下来,由于buttons是一个对象,因此需要一个for..in循环来提取密钥名称。。

因此,在一天结束时,您的代码应该看起来像

var Dialogue = {
    open: function(settings) {
        var message = settings.message;
        var buttons = settings.buttons; // <<<< NOTE: It's settings.buttons.
        for (var button in buttons) {
            console.log(button); // This will give you yes in 1st iteration and no in 2nd.
            var cls  = buttons[button].styleSheetClass.length ? buttons[button].styleSheetClass + " dialogueButton" : "dialogueButton";
            $(".dialogue .buttons").append('<div class="' + cls + '">' +  +'</div>');
        }
    }
}
Object.keys(buttons).forEach(function (name) {
    var button = buttons[name];
    // now you have both
});

您在第24行(本片段中的25行)遇到了一个问题。您正在使用buttons,就好像它是一个数组一样。

function resetTools() {
    Dialogue.open({
        message: "Are you sure you want to reset all chat rooms?",
        buttons: {
            yes: {
                styleSheetClass: "dangerbtn",
                onclick: function() {
                    // Do stuff here
                }
            },
            no: {
                onclick: function() {
                    // Do other stuff here
                }
            }
        }
    })
}
var Dialogue = {
    open: function(settings) {
        var message = settings.message;
        var buttons = settings.buttons;
        //                           vvv buttons isn't an array, it's an object
        for (var i = 0; i < buttons.length; i++) {
            var cls  = buttons[i].styleSheetClass.length ? buttons[i].styleSheetClass + " dialogueButton" : "dialogueButton";
            $(".dialogue .buttons").append('<div class="' + cls + '">' +  +'</div>');
        }
    }
}

这里有一个修复:

function resetTools() {
    Dialogue.open({
        message: "Are you sure you want to reset all chat rooms?",
        buttons: [
            {
              name: 'Yes',
              styleSheetClass: "dangerbtn",
              onclick: function() {
                // Do stuff here
              }
            }, {
              name: 'No',
              onclick: function() {
                // Do stuff here
              }
            },
        ]
    })
}
var Dialogue = {
    open: function(settings) {
        var message = settings.message;
        var buttons = message.buttons;
        for (var i = 0; i < buttons.length; i++) {
            var cls  = buttons[i].styleSheetClass != undefined ? buttons[i].styleSheetClass + " dialogueButton" : "dialogueButton";
            $(".dialogue .buttons").append('<div class="' + cls + '">' + buttons[i].name +'</div>');
        }
    }
}

我调整了打开对话框的对象,使其具有作为数组的按钮,并将名称作为数组中每个对象的属性。

尝试在settings.button.yes 上使用Object.keys()

var Dialogue = {
    open: function(settings) {
        var message = settings.message;
        var buttons = setting.buttons.yes;
        Object.keys(buttons).forEach(function(button) {
          if (button === "styleSheetClass") {
            var cls  = buttons[button].length 
                       ? buttons[button] + " dialogueButton" 
                       : "dialogueButton";
            $(".dialogue .buttons")
            .append('<div class="' + cls + '">' +  +'</div>');
          }
        })
    }
}

您可以使用jQuery并这样做:

$.each(buttons, function(button_name, button) {
    // code ...
});

或者不带jQuery:

var keys = Object.keys(buttons);
for(var i = 0; i < keys.length; i++) {
    var button_name = keys[i];
    var button = buttons[button_name];
    // code ...
}

Object.keys为您提供该对象中元素的名称。

您可以使用console.log(Object.keys(buttons))预览它。