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

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

前言

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

解构赋值

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

图片图片

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

图片图片

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

图片图片

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

图片

性能测试

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

图片图片

建议

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

拓展运算符

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

图片图片

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

图片图片

图片图片

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

图片图片

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

图片图片

建议

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

图片图片

或者使用 concat

图片图片

责任编辑:武晓燕 来源: 前端之神
相关推荐

2009-08-12 15:20:18

C#赋值运算符复合赋值运算符

2009-08-12 15:02:49

C#赋值运算符简单赋值运算符

2011-07-15 01:34:36

C++重载运算符

2009-06-21 13:48:05

ShellLinux运算符

2020-10-15 08:11:56

JavaScript逻辑运算符

2009-08-11 15:51:08

C#运算符算术运算符

2024-02-26 15:17:20

2017-05-11 16:38:07

javascript逻辑运算符

2013-08-15 16:48:39

.Net基础

2023-04-10 08:58:13

C#关系运算符

2009-11-18 09:02:55

PHP运算符

2020-12-10 08:11:52

typeof instanceofJS

2021-12-15 10:25:57

C++运算符重载

2009-08-12 09:30:10

C#??运算符

2016-10-14 14:04:34

JAVA语法main

2023-05-11 16:18:17

Angular开发RxJS

2009-08-12 10:47:03

C#运算符重载

2010-10-08 09:17:07

JavaScript表JavaScript运

2023-03-29 09:22:03

SQLWhere语句

2009-07-09 17:40:26

Java运算符
点赞
收藏

51CTO技术栈公众号