js代码书写技巧

50 阅读1分钟

1、代替if,else的常见写法

||,三目运算符,&&。 image.png

2、a?.b?.c(只能读不能写,对一个可能为空的属性赋值是不会被编译通过的,此时还需用用到类型断言)

相当于 a && a.b && a.b.c。

3、!用法

用在变量前,转换为Boolean类型并取反。

用在变量后,使null和undefined类型可以赋值给其他类型并通过编译,表示该变量值可空。

image.png

4、简写for循环

使用for in,for of ,forEach的遍历方式代替

5、使用对象代替switch,if...else

image.png

6、字符串拼接使用模板字符串

使用前 image.png 使用后 image.png

7、数字分隔符

image.png

8、扩展运算符

...

9、多用位操作符

<< 、>>

10、~运算符

~arr.indexOf(value)

双非位运算符~~代替Math.floor(只适用于32位整数)

image.png

11、解构运算符(交换变量)

image.png

12、**运算符(指数运算符)

13、深拷贝

JSON.parse(JSON.stringify(value))

14、document.designMode

与前端的JavaScript有关,设计模式让你可以编辑页面上的任何内容。只要打开浏览器控制台,输入以下内容即可。 `document.designMode = 'on';

15、`实现(a == 1 && a == 2 && a == 3)为true

image.png

16、**[let同样存在变量提升,只是let存在暂时性死区]

image.png

image.png

17、如果使用的是自定义组件,或者一些 UI 框架的组件,那么回调函数还都应该用 useCallback 进行封装。

18、扩展点机制:在任何可能产生单点复杂度的模块中,通过扩展点的方式,允许其它模块为其增加功能。

19、可选元组类型

image.png

20、??(空值合并操作符)当左侧值为 null 或 undefined 时,返回 ?? 符号右边的值