为何同一段JavaScript代码在WebStorm与Chrome中运行结果存在差异

两种环境的输出表现完全和代码执行逻辑无关，本质是不同控制台的对象渲染展示规则不一样。

• 首先可以确定：这段代码在两个环境里的实际执行结果完全一致，o对象从始至终都成功挂载了四个Symbol键的属性，不存在任何属性添加失败的问题。在WebStorm里跑完代码后手动执行console.log(Object.getOwnPropertySymbols(o))，就能拿到包含s1到s4的完整Symbol属性数组，直接证明对象内部的实际状态没有区别。
• WebStorm内置控制台的默认展示逻辑，是在初次输出对象时，只平铺展示可枚举的非Symbol自有属性；对于通过Object.defineProperty/Object.defineProperties添加的属性，因为这类方法的默认配置中enumerable为false（不可枚举），控制台会自动把这类非可枚举的Symbol属性归到折叠隐藏的分类里，不会在单行输出中直接列出来。你三次打印对象时，只有初始化对象字面量时用计算属性加的s1是可枚举的Symbol属性，所以它每一次都会出现在输出结果里；后面三个通过define方法添加的不可枚举Symbol属性，因为默认被折叠隐藏，所以看起来好像根本没被加进对象里。
• Chrome DevTools的控制台简化程度更低，它在初次输出对象时，会默认把所有自有Symbol属性（无论是否可枚举）都直接平铺列在输出行里，不会因为属性不可枚举就做隐藏处理。所以你能在Chrome的输出里看到四个Symbol属性全部展示的结果。

补充说明：这种输出差异只是不同控制台为了避免单行内容过长做的简化展示策略不同，完全不代表JS代码的执行结果存在跨环境差异。如果需要查看对象的全量属性信息，不管在哪个环境调用Object.getOwnPropertyDescriptors(o)，都能拿到包含所有属性、所有配置项的完整描述，两个环境返回的结果会完全一致。

内容的提问来源于stack exchange，提问作者teng wang