直接键访问和对象解构之间的性能答案

【问题标题】：Performance between direct key access and object destructuring直接键访问和对象解构之间的性能
【发布时间】：2017-12-27 09:13:01
【问题描述】：

下面最有效的代码是什么。

代码 1

const {
  type,
  size,
} = props;

console.log(type);

代码 2*

console.log(props.type);

我在一篇文章中读到，当您读取对象深处的键值对时，会对性能产生影响。我知道访问一个级别不会对性能产生巨大影响。但是我想从上面的代码示例（代码 1 和代码 2）中知道哪个会更快更高效。

【问题讨论】：

【解决方案1】：

如果您看到破坏部分的转译代码，您会发现正在设置一个新变量。

例如：

const {
  type,
  size,
} = props;

转换成

var type_1 = props.type; // dummy_name
var size_1 = props.size;

因此，正在设置一个额外的变量，并且内存消耗相对较高。但是，性能上的差异非常小。

【讨论】：

@Ryxle 如果您认为正确，请标记为正确。
我想知道使用 Babel 转换时 ES6 中的结果而不是性能。我们使用 Babel 为新的 ES 功能提供跨浏览器支持。非常感谢您的回复，但我正在等待更好的答案。
问题不在于 transpilation 效率，而在于 as-is 代码的性能。转译过程不是“必须的”。

【解决方案2】：

在这种情况下绝对是第二个选项 （严格来说是这种情况）。

在某些情况下，您会牺牲一些效率来换取一些可读性，这对于大多数人来说很容易判断。

看到性能差异非常小，但确实存在。

【讨论】：