漫潮者,私有云,NAS,新媒体电商.软件开发,商乾

标题: 你会用ES6，那倒是用啊！！！ [打印本页]

---

作者: 商乾美工    时间: 2022-4-29 17:32
标题: 你会用ES6，那倒是用啊！！！
(, 下载次数: 1183)

上传

点击文件名下载附件             
不是标题党，这是一位leader在一次代码评审会对小组成员发出的“怒吼”，原因是在代码评审中发现很多地方还是采用ES5的写法，也不是说用ES5写法不行，会有BUG，只是造成代码量增多，可读性变差而已。恰好，这位leader有代码洁癖，面对3~5年经验的成员，还写这种水平的代码，极为不满，不断对代码进行吐槽。不过对于他的吐槽，我感觉还是有很大收获的，故就把leader的吐槽记录下来，分享给掘友们，觉得有收获点个赞，有错误的或者更好的写法，非常欢迎在评论中留言。ps：ES5之后的JS语法统称ES6！！！一、关于取值的吐槽取值在程序中非常常见，比如从对象obj中取值。

1. const obj = {
   
2.     a:1,
   
3.     b:2,
   # Y5 q* W+ L5 p$ a: z+ E
4.     c:3,
   
5.     d:4,
   ' Q" K' ^* V: Z. V$ @
6.     e:5,
   - R4 X  \: G$ b& r% X
7. }

复制代码

吐槽：
$ S$ A. O0 N6 c  p1 ~

1. const a = obj.a;
   
2. const b = obj.b;
   
3. const c = obj.c;
   
4. const d = obj.d;
   ) b1 i* f& z; D! ^
5. const e = obj.e;

复制代码

8 S) |3 }& {  U. ?# T2 Q3 d% q
或者

1. const f = obj.a + obj.d;
   
2. const g = obj.c + obj.e;

复制代码

* [( q' Y9 J4 t! C. x+ W吐槽：“不会用ES6的解构赋值来取值吗？5行代码用1行代码搞定不香吗？直接用对象名加属性名去取值，要是对象名短还好，很长呢？搞得代码中到处都是这个对象名.
”改进：

1. const {a,b,c,d,e} = obj;
   
2. const f = a + d;
   0 M8 ^* M3 g5 n0 h  g
3. const g = c + e;

复制代码

反驳不是不用ES6的解构赋值，而是服务端返回的数据对象中的属性名不是我想要的，这样取值，不是还得重新创建个遍历赋值。吐槽看来你对ES6的解构赋值掌握的还是不够彻底。如果想创建的变量名和对象的属性名不一致，可以这么写：
& W; C6 D8 g) [. Z7 C

1. const {a:a1} = obj;
   % F$ B9 t  w+ \! ^) w" z7 t
2. console.log(a1);// 1补充ES6的解构赋值虽然好用。但是要注意解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认值。
   : V# C, @' z" v8 F0 u5 F! W5 e
3. const {a,b,c,d,e} = obj || {};

复制代码

! E6 [( e. j2 |二、关于合并数据的吐槽比如合并两个数组，合并两个对象。const a = [1,2,3];
0 C- a/ \0 Z' N3 W, |! }7 [& q

1. const b = [1,5,6];
   
2. const c = a.concat(b);//[1,2,3,1,5,6]
   4 J+ O& d1 |! f+ Z8 m
3. const obj1 = {
   & I8 n, [9 {2 O1 _' d! P
4.   a:1,
   & x' ^5 D* U5 R$ ~% \1 [
5. }
   
6. const obj2 = {
   3 Z# ?* Z! _! q/ G( V+ E
7.   b:1,
   
8. }
   + U( T) H- a) X) m% i$ b7 N0 G0 T7 d& d
9. const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}吐槽ES6的扩展运算符是不是忘记了，还有数组的合并不考虑去重吗？改进const a = [1,2,3];
   
10. const b = [1,5,6];
    
11. const c = [...new Set([...a,...b])];//[1,2,3,5,6]
    
12. const obj1 = {
    
13.   a:1,
    0 x. [: h0 T) @& l
14. }
    6 E; V& o7 Y  r! A; Q
15. const obj2 = {
    
16.   b:1,
    
17. }
    - j* b, w# k. K# A2 b( H6 o/ v/ d
18. const obj = {...obj1,...obj2};//{a:1,b:1}

复制代码

1 [2 ^( J  X7 h  \. L: L% C三、关于拼接字符串的吐槽

1. const name = '小明';
   ) J7 n+ U- w7 V
2. const score = 59;
   
3. let result = '';
   
4. if(score > 60){
   
5.   result = `${name}的考试成绩及格`;
   & Z, f' m0 c1 Z# ~& G, [
6. }else{
   2 o- N( S' m, ]! p+ V
7.   result = `${name}的考试成绩不及格`;
   
8. }

复制代码

吐槽像你们这样用ES6字符串模板，还不如不用，你们根本不清楚在${}中可以做什么操作。在${}中可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。改进const name = '小明';
# d3 h2 X8 F3 e7 q7 i

1. const score = 59;
     B7 B; [7 I$ L
2. const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;

复制代码

四、关于if中判断条件的吐槽if(
& {, e  Y. q4 s7 \# a

1.     type == 1 ||
   4 E8 K6 u# M% u- x0 d0 J: b* H) k
2.     type == 2 ||
   
3.     type == 3 ||
   ' Y3 t/ q4 M+ V& y4 v
4.     type == 4 ||
   . e7 x+ ^( r, X! A& Z3 |( @* f
5. ){
   
6.    //...
   
7. }

复制代码

0 h) h5 K% O7 O1 t5 y吐槽ES6中数组实例方法includes会不会使用呢？
9 {* h# n4 }0 G3 m' A& I改进const condition = [1,2,3,4];
% W3 r  g' E5 T; c& W3 _" }% o4 G- h! K

1. if( condition.includes(type) ){
   
2.    //...
   
3. }

复制代码

五、关于列表搜索的吐槽在项目中，一些没分页的列表的搜索功能由前端来实现，搜索一般分为精确搜索和模糊搜索。搜索也要叫过滤，一般用filter来实现。const a = [1,2,3,4,5];
% G  G0 [* x0 T# c; U5 r) v& A

1. const result = a.filter(
   ) U( f" L4 A! p  w
2.   item =>{
   5 N$ k* {( V* I5 V: H* Q
3.     return item === 3
   4 p9 t" X7 r$ d6 A& z% @, \: Z
4.   }
   
5. )

复制代码

3 R0 x, v% n6 G& w! @) I吐槽如果是精确搜索不会用ES6中的find吗？性能优化懂么，find方法中找到符合条件的项，就不会继续遍历数组。改进const a = [1,2,3,4,5];
; |; X. R( o, T- e4 b5 i! ?( W) y

1. const result = a.find(
   
2.   item =>{
   
3.     return item === 3
   + T: W9 X/ `; P3 Q7 t( t
4.   }
   
5. )

复制代码

9 g( Y/ v4 i2 X- c" u
! t  F6 ?7 t% [0 F6 }. H. h1 O8 e7 Z六、关于扁平化数组的吐槽一个部门JSON数据中，属性名是部门id，属性值是个部门成员id数组集合，现在要把有部门的成员id都提取到一个数组集合中。
0 Z( P' y; \% ?# j

1. const deps = {
   
2. '采购部':[1,2,3],
   % ?6 i) t- T; W9 P" c
3. '人事部':[5,8,12],
   + ]+ X2 i/ u9 m6 O+ @2 b! Y
4. '行政部':[5,14,79],
   , c( f  `$ a5 d
5. '运输部':[3,64,105],
   ; y$ u" Z* e6 v# ?
6. }
   
7. let member = [];
   
8. for (let item in deps){
   
9.     const value = deps[item];
   
10.     if(Array.isArray(value)){
    
11.         member = [...member,...value]
    , b1 G4 Q2 \% L+ X
12.     }
    6 p* t8 L) F! O% R6 _2 T6 L
13. }
    
14. member = [...new Set(member)]

复制代码

& W5 Z3 E9 j, H2 \( p; z
* D  m( l8 x) Z% d3 i' n  {  y/ {吐槽获取对象的全部属性值还要遍历吗？Object.values忘记了吗？还有涉及到数组的扁平化处理，为啥不用ES6提供的flat方法呢，还好这次的数组的深度最多只到2维，还要是遇到4维、5维深度的数组，是不是得循环嵌套循环来扁平化？
2 x. Y# ^! c$ N, p+ X* a- j/ w1 O- v改进
. @0 K* P3 P  L

1. const deps = {
   0 @; c# ?& c) }: W# {
2.     '采购部':[1,2,3],
     i0 A  t! Q& a4 ~& k3 J  t
3.     '人事部':[5,8,12],
   9 X; _1 I7 l8 E
4.     '行政部':[5,14,79],
   4 j1 m3 e# z( P+ y6 e/ B( D8 ~) `
5.     '运输部':[3,64,105],
   
6. }
   $ f% ]9 B- U* Y! T3 P
7. let member = Object.values(deps).flat(Infinity);

复制代码

3 {" D$ U% G: M其中使用Infinity作为flat的参数，使得无需知道被扁平化的数组的维度。补充flat方法不支持IE浏览器。七、关于获取对象属性值的吐槽const name = obj && obj.name;吐槽ES6中的可选链操作符会使用么？改进const name = obj?.name;八、关于添加对象属性的吐槽当给对象添加属性时，如果属性名是动态变化的，该怎么处理。let obj = {};

1. let index = 1;
   ! C5 B9 c5 P  d' H8 c' }
2. let key = `topic${index}`;
   - \6 m2 R/ [' I, s
3. obj[key] = '话题内容';吐槽为何要额外创建一个变量。不知道ES6中的对象属性名是可以用表达式吗？改进let obj = {};
   4 Q' T$ O* J0 J- y, R1 M
4. let index = 1;
   + [+ d* t$ g8 A7 O5 c. E5 G3 G6 U; Y
5. obj[`topic${index}`] = '话题内容';

复制代码

; A" u" D2 `' T  Z
九、关于输入框非空的判断在处理输入框相关业务时，往往会判断输入框未输入值的场景。if(value !== null && value !== undefined && value !== ''){
- D3 Z% W8 V- v& \& {    //...
" }6 t  N7 F4 U2 z7 j7 \}
% L& ]* l, @. V) Q- D' w吐槽ES6中新出的空值合并运算符了解过吗，要写那么多条件吗？
% L0 C! o, U* g4 S5 Q) S( D* }if((value??'') !== ''){
  //...
}
十、关于异步函数的吐槽异步函数很常见，经常是用 Promise 来实现。
1 c( y2 N$ c- P

1. const fn1 = () =>{
   1 R0 i* Y& e: g$ U5 [2 f2 n
2.   return new Promise((resolve, reject) => {
   
3.     setTimeout(() => {
   
4.       resolve(1);
   ( W+ {+ }" ~8 a4 R# w
5.     }, 300);
   
6.   });
   0 `, X1 N: i- e. r5 A4 W+ G+ \
7. }
   
8. const fn2 = () =>{
   
9.   return new Promise((resolve, reject) => {
   
10.     setTimeout(() => {
    8 t  h$ a1 t& h. z
11.       resolve(2);
    - u5 W1 k- W* o  X# f8 O* f3 y$ {8 u
12.     }, 600);
    
13.   });
    
14. }
    # t6 O3 V; U# M3 y& K9 P0 D
15. const fn = () =>{
    
16.    fn1().then(res1 =>{
    
17.       console.log(res1);// 1
    
18.       fn2().then(res2 =>{
    & D. q3 X! w# V# L
19.         console.log(res2)
    . J5 R" d" T% g( O9 V& N. f1 r
20.       })
    * k* h4 u& _& Q7 F  l
21.    })
    
22. }

复制代码

" g/ `0 l  r, q* c吐槽如果这样调用异步函数，不怕形成地狱回调啊！改进
7 t% i! P  i, u% g+ s9 g. n

1. const fn = async () =>{
   . a- r( p$ t, u% e# L* L" l+ A+ O
2.   const res1 = await fn1();
   1 U5 r1 r4 U, x
3.   const res2 = await fn2();
   
4.   console.log(res1);// 1
     e# D$ I3 N1 h
5.   console.log(res2);// 2
   + b& `9 S/ Q- K" {
6. }

复制代码

. _' f3 _4 @- X补充但是要做并发请求时，还是要用到
7 Q8 \6 c; P6 Q' }

1. Promise.all()
   
2. const fn = () =>{
   % J: L" x" p4 F" E: R
3.    Promise.all([fn1(),fn2()]).then(res =>{
   5 z! _7 U5 |! A3 y) z4 H
4.        console.log(res);// [1,2]
   
5.    })
   
6. }

复制代码

如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()。
4 _/ T% l/ T) W4 k) d+ H十一、后续欢迎来对以上十点leader的吐槽进行反驳，你的反驳如果有道理的，下次代码评审会上，我替你反驳。此外以上的整理内容有误的地方，欢迎在原文评论中指正，万分感谢。


0 N9 L, s0 y4 J/ R/ z0 u
4 ^; n( B$ Y2 v

---

欢迎光临 漫潮者,私有云,NAS,新媒体电商.软件开发,商乾 (https://www.aurrel.com/)

Powered by Discuz! X3.5