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

随着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次的循环中，却出现了一个反弹。再来看下点操做的时间消耗

图形大体上与解构操做差很少，可是随着循环次数的增长，单次操做消耗的时间是减小的。那么再来看下二者一块儿的比较图吧

相对来讲点操做消耗的时间要少点，可是这么点差异彷佛在实际使用中没有什么分别，由于基本上咱们不可能在浏览器上一次性处理百万级的数据操做，而处理小数据的时候，书写上对象解构要更简便，所以咱们能够大胆放心的在实际项目中使用对象解构来代替点操做访问。