javascript路径+“。” + 键不起作用[重复]答案

【问题标题】：javascript path + "." + key doesn't work [duplicate]javascript路径+“。” + 键不起作用[重复]
【发布时间】：2018-05-14 07:57:17
【问题描述】：

您好，我正在尝试制作一个程序，它可以显示对象的不同键，并根据您想要的键深入到对象中。

我现在拥有的是一个读取对象键并将这些键作为值的按钮的函数。我想要的是人们能够按下按钮，然后在他们按下的键中看到可用的键。（因为它是一个分层的对象）

这是我的 HTML：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Root folder</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

    <div id="buttons"></div>    

<script src="js/init.js" type="text/javascript"></script>
</body>
</html>

这是我的对象：

var vloer = {
"Linoleum": {
    "Licht vervuild": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 1
            },
            "Strippen": {
                "value": 2
            },
            "Glans": {
                "value": 3
            },
            "Hoogglans": {
                "value": 4
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 5
            },
            "Strippen": {
                "value": 6
            },
            "Glans": {
                "value": 7
            },
            "Hoogglans": {
                "value": 8
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 9
            },
            "Strippen": {
                "value": 10
            },
            "Glans": {
                "value": 11
            },
            "Hoogglans": {
                "value": 12
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 13
            },
            "Strippen": {
                "value": 14
            },
            "Glans": {
                "value": 15
            },
            "Hoogglans": {
                "value": 16
            }
        }
    },
    "Zwaar vervuild": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 17
            },
            "Strippen": {
                "value": 18
            },
            "Glans": {
                "value": 19
            },
            "Hoogglans": {
                "value": 20
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 21
            },
            "Strippen": {
                "value": 22
            },
            "Glans": {
                "value": 23
            },
            "Hoogglans": {
                "value": 24
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 25
            },
            "Strippen": {
                "value": 26
            },
            "Glans": {
                "value": 27
            },
            "Hoogglans": {
                "value": 28
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 29
            },
            "Strippen": {
                "value": 30
            },
            "Glans": {
                "value": 31
            },
            "Hoogglans": {
                "value": 32
            }
        }
    },
    "Schoon": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 33
            },
            "Strippen": {
                "value": 34
            },
            "Glans": {
                "value": 35
            },
            "Hoogglans": {
                "value": 36
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 37
            },
            "Strippen": {
                "value": 38
            },
            "Glans": {
                "value": 39
            },
            "Hoogglans": {
                "value": 40
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 41
            },
            "Strippen": {
                "value": 42
            },
            "Glans": {
                "value": 43
            },
            "Hoogglans": {
                "value": 44
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 45
            },
            "Strippen": {
                "value": 46
            },
            "Glans": {
                "value": 47
            },
            "Hoogglans": {
                "value": 48
            }
        }
    }
},
"PVC": {
    "Licht vervuild": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 1
            },
            "Strippen": {
                "value": 2
            },
            "Glans": {
                "value": 3
            },
            "Hoogglans": {
                "value": 4
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 5
            },
            "Strippen": {
                "value": 6
            },
            "Glans": {
                "value": 7
            },
            "Hoogglans": {
                "value": 8
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 9
            },
            "Strippen": {
                "value": 10
            },
            "Glans": {
                "value": 11
            },
            "Hoogglans": {
                "value": 12
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 13
            },
            "Strippen": {
                "value": 14
            },
            "Glans": {
                "value": 15
            },
            "Hoogglans": {
                "value": 16
            }
        }
    },
    "Zwaar vervuild": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 17
            },
            "Strippen": {
                "value": 18
            },
            "Glans": {
                "value": 19
            },
            "Hoogglans": {
                "value": 20
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 21
            },
            "Strippen": {
                "value": 22
            },
            "Glans": {
                "value": 23
            },
            "Hoogglans": {
                "value": 24
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 25
            },
            "Strippen": {
                "value": 26
            },
            "Glans": {
                "value": 27
            },
            "Hoogglans": {
                "value": 28
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 29
            },
            "Strippen": {
                "value": 30
            },
            "Glans": {
                "value": 31
            },
            "Hoogglans": {
                "value": 32
            }
        }
    },
    "Schoon": {
        "Eenschijf > 350": {
            "Reinigen": {
                "value": 33
            },
            "Strippen": {
                "value": 34
            },
            "Glans": {
                "value": 35
            },
            "Hoogglans": {
                "value": 36
            }
        },
        "Eenschijfs boost": {
            "Reinigen": {
                "value": 37
            },
            "Strippen": {
                "value": 38
            },
            "Glans": {
                "value": 39
            },
            "Hoogglans": {
                "value": 40
            }
        },
        "Schrobzuig": {
            "Reinigen": {
                "value": 41
            },
            "Strippen": {
                "value": 42
            },
            "Glans": {
                "value": 43
            },
            "Hoogglans": {
                "value": 44
            }
        },
        "Schrobzuig boost": {
            "Reinigen": {
                "value": 45
            },
            "Strippen": {
                "value": 46
            },
            "Glans": {
                "value": 47
            },
            "Hoogglans": {
                "value": 48
            }
        }
    }
}
};

这是我的 Javascript：

var div = document.getElementById("buttons"),
path = vloer;

function floorApp(key) {

    while(div.firstChild) {
        div.removeChild(div.firstChild);
    }

    if(key !== vloer){
        return path = path + "." + key;   
    }

    console.log(path.Linoleum)

    var keys = Object.keys(path);

    for (var i=0; i<keys.length; i++) {

        var btn = document.createElement("button");
        btn.setAttribute("class", "btn");
        btn.setAttribute("onclick", "floorApp(" + keys[i] + ")");
        btn.innerHTML = keys[i];  

        div.appendChild(btn);
    }
}

但是，此代码始终会导致以下错误：未捕获的 ReferenceError：未定义油毡

或者它给出了一个 [object Object]Linoleum，它没有给我 vloer["Linoleum"] 中的键，而是数字 1 到 22。

非常感谢任何帮助我的人！

对于遇到与我相同问题的每个人，以下是我的问题的答案：

var div = document.getElementById("buttons"),
path = vloer;

function floorApp(key) {

    console.log(path, key);

    while(div.firstChild) {
        div.removeChild(div.firstChild);
    }

    if(key !== vloer){
        path = path[key];
        console.log(path);
    }

    var keys = Object.keys(path);

    for (var i=0; i<keys.length; i++) {

        var btn = document.createElement("button");
        btn.setAttribute("class", "btn");
        btn.setAttribute("onclick", "floorApp(" + JSON.stringify(keys[i]) + ")");
        btn.innerHTML = keys[i];  

        div.appendChild(btn);
    }
}

floorApp(vloer);

【问题讨论】：

不只是重复地想知道点与括号访问属性，我认为这是试图以错误的方式访问属性的错误。（无论如何，标记对我有用）
这不是重复的，因为如果我遇到的问题像点与括号访问属性一样简单，那么我就不会问这个问题。我经常收到以下错误：未捕获的 ReferenceError：未定义油毡，我无法解释，但显然我以错误的方式调用该对象

标签： javascript object path key

【解决方案1】：

将return path = path + "." + key; 变成return path = path.key; 或return path = path[key];

第一个是字符串连接，但路径是一个对象，你应该有一个 toString。无论如何，这不是你想要的。第二个和第三个正确访问父对象的属性（如果存在）（否则返回未定义）。

【讨论】：

我已经尝试过了，但我会收到以下错误：
未捕获的 ReferenceError: 油毡未定义
你必须到console.log看看什么是path、vloer、key
这就是问题所在，它不会显示console.log。因为错误
当然在问题之前记录一下，为了截取变量值是什么