对象解构与点操作访问究竟谁快

随着ES6标准的正式实行，我们又多了一种访问Object属性的方法，那就是对象解构，举个栗子?

const obj = {a:1, b:'hello world'};

// 从前我们是这样访问的
const a = obj.a
const b = obj.b

// 现在我们可以这样访问
const {a,b} = obj;
复制代码

可以看到，对象解构在代码的数量上减少了许多，那么问题来了，从前我们在进行点操作访问对象属性的时候，处于性能考虑，会将频繁访问的属性先用一个变量保存起来，特别是深度越深的属性，点操作需要的时间也会愈多，因此缓存属性是一个比较好的方法；那么现在与对象解构相比，究竟那种操作会更消耗时间呢？

我写了一个简单的脚本

用于比较对象解构和点操作访问的消耗时间，测试环境是Safari 11.1.2，采样数据是随机采取，剔除显而易见的跳跃数据。

下图是解构操作消耗时间图，纵坐标是对数排列

我分别测试了循环10次，100次，1000次，10000次，1000000次，10000000次的对象访问，可以发现随着循环次数增加，消耗时间是指数增长的，然后我又计算7种循环模式下，每次循环消耗的时间，可以看到，随着循环的数量增加，每次消耗的时间反而在减少，但是，在最后的10e7次的循环中，却出现了一个反弹。再来看下点操作的时间消耗

图形大致上与解构操作差不多，但是随着循环次数的增加，单次操作消耗的时间是减少的。那么再来看下两者一起的比较图吧

相对来说点操作消耗的时间要少点，但是这么点差别似乎在实际使用中没有什么分别，因为基本上我们不可能在浏览器上一次性处理百万级的数据操作，而处理小数据的时候，书写上对象解构要更简便，因此我们可以大胆放心的在实际项目中使用对象解构来代替点操作访问。