有时我是真不敢用“解构赋值”和“拓展运算符”啊!

科技   2024-11-01 08:49   广东  

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

解构赋值

解构赋值 我相信大家都不陌生,这是一个方便大家开发的语法,你可以使用 解构赋值 从 数组、对象 中解构出对应 索引、属性 所对应的值,比如下方对于数组进行的解构,可以使用 [] 进行解构

但是你们真的知道为什么这种写法能完成解构的吗?想要了解为什么,我们可以看看 V8 的源码,可以看出,为了通过这种写法能完成解构,v8 底层其实做了很多事情

其实数组的解构,也可以使用 {} 进行解构

而相比于使用 [] 的解构,明显 V8 在为使用 {} 做解构时,做的工作就少了很多

性能测试

为了证实上述的观点,我准备了以下的代码例子,可以看到 [] 耗时是 {} 的三倍以上

建议

所以建议大家,在进行大数量的循环里,想要对数组进行解构的话,最好是通过 {} 去解构,这样减少一点性能损耗

拓展运算符

拓展运算符 大家也不陌生,也是一个使用起来很方便的语法,主要用在 数组、对象 上,基本语法如下

但是很多人不知道,如果你的数组数据量很大的时候,使用 拓展运算符 会直接崩掉!


通过 Babel 编译后可知,push 方法最终会编译成 apply

在查阅了MDN后终于知道了原因,如果按上面方式调用apply,有超出JavaScript引擎参数长度上限的风险。一个方法传入过多参数(比如一万个)时的后果在不同JavaScript引擎中表现不同

建议

在数据可能量比较大的时候,不应该使用拓展运算符,而是因为使用循环

或者使用 concat


结语

我是林三心,一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手

前端之神
一位前端小菜鸡,写过400多篇原创文章,全网有6w+个前端朋友,梦想是成为”前端之神“~
 最新文章