【问题标题】：Equivalent of Python's dir in Javascript相当于 Javascript 中的 Python 目录
【发布时间】：2011-07-28 06:45:18
【问题描述】：

当我从解释器编写 Python 代码时，我可以键入 dir() 以在当前范围内定义名称列表。当我使用 firebug、chrome 控制台等交互式控制台从浏览器开发 Javascript 代码时，如何以编程方式获得相同的信息？

【问题讨论】：

我向here 询问了经典 JScript 的类似问题。

标签： javascript python namespaces interactive dir

【解决方案1】：

Object中有keys方法，例如：

Object.keys(object)

但这仅返回对象自己的属性和方法。
要列出对象的所有属性和方法，我知道 2 种可能性：

Firefox 的 firebug 控制台中的 console.dir(object) 方法和
Google Chrome 开发工具中的dir(object) 方法。

【讨论】：

【解决方案2】：

如果您需要一个简单的解决方案，这可能对您有用：

function dir(object) {
    stuff = [];
    for (s in object) {
        stuff.push(s);
    }
    stuff.sort();
    return stuff;
}

【讨论】：

【解决方案3】：

在 ChatZilla 的代码中有几个功能可以做到这一点，您必须正确检查许可证，看看是否可以将它们撕掉并在任何地方使用。

相关功能可以在 http://hg.mozilla.org/chatzilla/file/59b46c0bf716/js/lib/utils.js#l136 dumpObject 和 dumpObjectTree

【讨论】：

【解决方案4】：

Google Chrome 开发者工具控制台有一个预定义的目录：https://developers.google.com/chrome-developer-tools/docs/console

Firebug 有 console.dir：http://getfirebug.com/logging

【讨论】：

【解决方案5】：

全局变量保存在一个易于访问的对象 (window) 中，因此您可以轻松地检查/迭代它们。（使用类似于 Glenjamin 建议的功能）

另一方面，我不知道有什么方法可以检查函数或闭包中定义的局部变量——如果可能的话，我至少猜想它是高度特定于浏览器/控制台的。

【讨论】：

【解决方案6】：

您可以使用几个函数来获取所需的数据。

`Object.keys()`

此函数将返回所有可枚举、拥有属性非符号。

> let person = {name: 'John Doe', age: 25, [Symbol('Test')] : 'value'}
> Object.keys(person);
['name'] // Note that the Symbol('Test') is not in the returned array!

`Object.getOwnPropertyNames()`

此函数将返回所有 enumerable 和 non-enumerable 都是非符号的属性。

> Object.getOwnPropertyNames(Set)
[ 'length', 'name', 'prototype' ]

为什么我们有Object.keys()这个函数有用？

> Object.keys(Set)
[] // Because keys doesn't give you non-enumerable properies

顺便说一句，为什么Object.getOwnPropertyNames(Set) 没有像add、has 等提供Set 上的方法？因为他们在Set.prototype。 Object.getOwnPropertyNames(Set.prototype) 会产生更好的结果。

`Object.getOwnPropertySymbols()`

这将返回您传递给它的对象中的所有拥有属性，这些属性是 Symbols。

> let person = {x: 10, Symbol('Test'): 'Test-value' };
> Object.getOwnPropertySymbols(person);
[Symbol(Test)]

`Reflect.ownKeys()`

这将返回您传递给的对象中的所有拥有属性，这些属性是字符串/符号。

> let person = {x: 1, [Symbol('Test')]: 'Test-value'};
> Reflect.ownKeys(person);
[ 'x', Symbol(Test) ]

奖励：

`Object.getPrototypeOf()`

这将返回传递给它的 Object 的 Prototype。

> let nameable = { name: 'name' };
> let ageable = Object.create(nameable);
> ageable.age = 0;
> let person = Object.create(ageable);
> let proto_of_person = Object.getPrototypeOf(person);
> proto_of_person === ageable;
true
> let proto_of_ageable = Object.getPrototypeOf(proto_of_person);
> proto_of_ageable === nameable
true

使用它，我们可以递归地枚举对象及其原型链的所有属性。

【讨论】：

【解决方案7】：

你可以看到对象只包含它自己的属性：通过它可以在任何控制台中运行，不仅可以在 google chrome 网络浏览器中查找 img enter image description here 控制台.dir(obj); 此处链接：https://developers.google.com/web/tools/chrome-devtools/console/console-reference

【讨论】：

【解决方案8】：

（只是为了查看该列表）

可以使用运算符“.”，例如：

> var a = "asdfg";
> a. // -> show the list

在 chrome 控制台中，它会显示自动补全选项列表
在 node.js 控制台中，您可以执行相同操作并按两次 Tab 键查看列表

【讨论】：

【解决方案9】：

真正的解决方案

首先，创建一个列出对象所有属性的函数：

function dir(object) {
    props = [];
    for (prop in object) {
        props.push(prop);
    }
    props.sort();
    return props;
}

然后，就这么简单，像console.log(dir(console))这样调用函数

【讨论】：