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://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个人目前能力有限,并没有自主构建一个社区的能力,如有任何问题或想法与我沟通,请通过上述某个平台联系我,谢谢!!!