有趣的 Destructuring

foreword（前言）

最近，我的学弟他在我们的一个群里问了一个问题：“数组解构和对象解构在性能上有什么区别呢，哪种方式会更好？”。当时，我的第一反应是，当时是数组了，而且为什么会有这样的问题呢，一个是针对数组的解构，一个是针对对象的解构，这两个有可比性吗，对比他们有意义吗？

当然，只是我的第一反应，为了验证它们是否是有比较的意义，我大致花了一天多的时间简单研究了一下。

test（自我测试，直接 coding 测试不就行了）

于是我写了以下的一些代码用于测试：

arr_normal.js: 使用 es5 的语法去获取我们数组中的值

let startTime = new Date().getTime()
let arr = [1, 2, 3, 4, 5, 6, 7, 8]
let a = arr[0]
let b = arr[1]
for (let i = 0; i < 10000000; i++) {
  a = arr[0]
  b = arr[1]
}
let endTime = new Date().getTime()
console.log('arr_normal:', endTime - startTime)

obj_normal.js: 使用 es5 的语法去获取我们对象中的值

let startTime = new Date().getTime()
let obj = {
  a: 1,
  b: 2,
  3: 3,
  4: 4,
  5: 5,
  6: 6,
  7: 7,
  8: 8,
}
let a = obj.a
let b = obj.b
for (let i = 0; i < 10000000; i++) {
  a = obj.a
  b = obj.b
}
let endTime = new Date().getTime()
console.log(‘obj_normal:’, endTime - startTime)

arr_destructing.js: 使用 es6 的 destructuring 获取数组中的值

let startTime = new Date().getTime()
let arr = [1, 2, 3, 4, 5, 6, 7, 8]
let [ a, b ] = arr
for (let i = 0; i < 10000000; i++) {
  [ a, b ] = arr
}
let endTime = new Date().getTime()
console.log('arr_destructuring:', endTime - startTime)

obj_destructing.js: 使用 es6 的 destructuring 获取对象中的值

let startTime = new Date().getTime()
let obj = {
  a: 1,
  b: 2,
  3: 3,
  4: 4,
  5: 5,
  6: 6,
  7: 7,
  8: 8,
}
let { a, b } = obj
for (let i = 0; i < 10000000; i++) {
  ({ a, b } = obj)
}
let endTime = new Date().getTime()
console.log('obj_destructuring:', endTime - startTime)

arr_arrde.js：使用 es6 的 array destructuring 获取数组中的值

let startTime = new Date().getTime()
let arr = [1, 2, 3, 4, 5, 6, 7, 8]
let [a, b] = arr
for (let i = 0; i < 10000000; i++) {
  [a, b] = arr
}
let endTime = new Date().getTime()
console.log('arr_arrde:', endTime - startTime)

arr_objde.js：使用 es6 的 object destructuring 获取数组中的值

let startTime = new Date().getTime()
let arr = [1, 2, 3, 4, 5, 6, 7, 8]
let { 0: a, 1: b } = arr
for (let i = 0; i < 10000000; i++) {
  ({ 0: a, 1: b } = arr)
}
let endTime = new Date().getTime()
console.log('arr_objde:', endTime - startTime)

我们把上面这些脚本在浏览器中一起执行一下（我在每段脚本最外层包了一层: (function () { … })()，也就是匿名函数自执行，为的是隔离作用域 ），打印出来以下信息：

arr_normal: 10
obj_normal: 10
arr_destructuring: 30
obj_destructuring: 9
arr_arrde: 27
arr_objde: 9

因此，我们可以得出基本的结论：

• 当明确要获取哪些属性时：
  • 数组：es6 数组解构比 es5 效率更低，通过数组解构或对象解构对数组属性值进行获取，对象解构效率更高；
  • 对象：es6 对象解构跟 es5 效率基本一致；
  • 数组-对象：es5 下效率基本一致，es6 下对象解构会更快一些；

which destructuring

思考这样一个问题，日常 coding 中，我们使用哪种解构会比较好呢？

基于之前我们得出的结论，我们可以做如下选择：

• 当明确要获取哪些属性：
  • 解构数组时：我们可以选择对象解构来解构数组，首先是因为这种情况下它的效率会更高一些，同时对象解构的代码可读性、可维护性更高（比如：let [a, , b] = [1, 2, 3] 和 let { 0: a, 2: b } = [1, 2, 3]）;
  • 函数参数解构时，我们也可以使用对象解构，原因同上；

两种解构有什么特殊的用法呢

1.Swapping Values using Destructuring Assignment

我们可以借助数组解构来做属性值交换：

var a = 3
var b = 6

[a,b] = [b, a]

console.log(a) // 6
console.log(b) // 3

2.Computed Property Name

计算属性名在对象解构中也是有效的，比如：

var prop = 'name'
var { [prop] : foo } = { name: 'Sarah', country: 'Nigeria', job: 'Developer' }

console.log(foo); // "Sarah"

3.对象解构在函数参数解构中的一些特例

function move({ x = 0, y = 0 } = {}) {
  return [x, y]
}

move({ x: 3, y: 8 }) // [3, 8]
move({x: 3}) // [3, 0]
move({}) // [0, 0]
move() // [0, 0]

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({ x: 3, y: 8 }) // [3, 8]
move({ x: 3 }) // [3, undefined]
move({}) // [undefined, undefined]
move() // [0, 0]

总结

• 实际上，数组解构和对象解构性能上并没有相差太大，不用刻意去比较，场景适合哪种解构就用哪种解构；
• 相比于数组解构，对象解构的可读性和代码可维护性会好些，因为不需要像数组解构那样去跳过某个值而去获取下一个值；

参考文章

https://medium.com/the-andela-way/this-trick-will-help-you-de-structure-javascript-arrays-in-a-better-cleaner-way-a3bbc39ce226

https://dev.to/sarah_chima/destructuring-assignment—arrays-16f

https://dev.to/sarah_chima/object-destructuring-in-es6-3fm

https://es6.ruanyifeng.com/#docs/destructuring

last（最后）
非常感谢您能阅读完这篇文章，您的阅读是我不断前进的动力。

对于上面所述，有什么新的观点或发现有什么错误，希望您能指出。

最后，附上个人常逛的社交平台：
知乎：https://www.zhihu.com/people/bi-an-yao-91/activities
csdn：https://blog.csdn.net/YaoDeBiAn
github: https://github.com/yaodebian

个人目前能力有限，并没有自主构建一个社区的能力，如有任何问题或想法与我沟通，请通过上述某个平台联系我，谢谢！！！