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

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

---

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

上传

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

1. const obj = {
   ) Q7 G* E4 P. n9 H; a' ]
2.     a:1,
   
3.     b:2,
   
4.     c:3,
   8 ?# O' O! i/ s7 t; K: [- D
5.     d:4,
   : i2 e! Y- F# N! E) \! {
6.     e:5,
   2 k. o# ]/ M: e/ L1 `
7. }

复制代码

5 ]: P, m% M9 o1 U$ C4 h吐槽：
; _5 g. Z* }3 l5 |; c/ Y* p

1. const a = obj.a;
   
2. const b = obj.b;
   - a5 f/ [2 j' q8 }$ V/ ]3 F* C4 F
3. const c = obj.c;
   3 y+ B/ T. v8 {
4. const d = obj.d;
   
5. const e = obj.e;

复制代码

, `0 f3 t, ~* V0 s# q0 e+ }
或者
" D9 {2 z" H; M6 n" B

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

复制代码

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

1. const {a,b,c,d,e} = obj;
   ! T( l3 U/ l0 O
2. const f = a + d;
   2 J1 |7 E" a: r) D" u( \$ Z
3. const g = c + e;

复制代码

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

1. const {a:a1} = obj;
   
2. console.log(a1);// 1补充ES6的解构赋值虽然好用。但是要注意解构的对象不能为undefined、null。否则会报错，故要给被解构的对象一个默认值。
   
3. const {a,b,c,d,e} = obj || {};

复制代码

6 o( T; O/ g1 ]: x二、关于合并数据的吐槽比如合并两个数组，合并两个对象。const a = [1,2,3];
2 Q) J! J1 U7 J! Y' G% c

1. const b = [1,5,6];
   + _& F) T" H2 d! ?& ]
2. const c = a.concat(b);//[1,2,3,1,5,6]
   " \" }: n3 m5 h# U  ^4 _8 l4 d
3. const obj1 = {
   
4.   a:1,
   
5. }
   ! A$ d2 o1 \5 @$ Z% @- p/ U8 @7 l  Y
6. const obj2 = {
   2 C9 _  t7 T+ W8 `
7.   b:1,
   
8. }
   
9. const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}吐槽ES6的扩展运算符是不是忘记了，还有数组的合并不考虑去重吗？改进const a = [1,2,3];
     k. z+ K$ ]" w2 W7 d5 g
10. const b = [1,5,6];
    2 t, |$ }6 H  H
11. const c = [...new Set([...a,...b])];//[1,2,3,5,6]
    0 N8 J9 B& X+ O2 x7 \$ S# N
12. const obj1 = {
    0 d! H# a, Q/ p
13.   a:1,
    
14. }
    
15. const obj2 = {
    
16.   b:1,
    
17. }
    
18. const obj = {...obj1,...obj2};//{a:1,b:1}

复制代码

$ l" K9 T* q( e7 o3 r6 c8 J三、关于拼接字符串的吐槽
. J/ t$ E2 m* E+ ~; l( a

1. const name = '小明';
   
2. const score = 59;
   
3. let result = '';
   
4. if(score > 60){
   
5.   result = `${name}的考试成绩及格`;
   6 t( D- C1 q7 o1 z
6. }else{
   , m) A( w# o# P8 ~# ^) Q
7.   result = `${name}的考试成绩不及格`;
   
8. }

复制代码

; ?! e' A  J" Z8 N
% G, ?; A3 I# n* O2 }; ~吐槽像你们这样用ES6字符串模板，还不如不用，你们根本不清楚在${}中可以做什么操作。在${}中可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。改进const name = '小明';

1. const score = 59;
   : z( w  M  D" V/ _" t
2. const result = `${name}${score > 60?'的考试成绩及格':'的考试成绩不及格'}`;

复制代码

) k7 U- P/ X9 H4 Q四、关于if中判断条件的吐槽if(
! L1 Z/ b# {5 r4 w" h2 n: p, v

1.     type == 1 ||
   / `+ r  a6 W5 Y4 C! N
2.     type == 2 ||
   
3.     type == 3 ||
   " W8 [; y: Z0 r6 T9 O/ W
4.     type == 4 ||
   9 H  N+ i+ F& n8 J1 z3 y0 r. O
5. ){
   3 }5 l3 K+ j" j! O( C
6.    //...
   $ x' e* e2 a2 {) F6 o+ B
7. }

复制代码

吐槽ES6中数组实例方法includes会不会使用呢？
0 K0 g9 n0 x/ V! v改进const condition = [1,2,3,4];
- v- n7 y7 m' m! A* N

1. if( condition.includes(type) ){
     c9 ?$ z; @% p5 J" i" G1 u
2.    //...
   
3. }

复制代码

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

1. const result = a.filter(
   
2.   item =>{
   4 A+ E3 D) ]: K  p. e$ b- x$ O" N# T* w
3.     return item === 3
   . {* Z) O. y1 N1 e( b5 t
4.   }
   
5. )

复制代码

吐槽如果是精确搜索不会用ES6中的find吗？性能优化懂么，find方法中找到符合条件的项，就不会继续遍历数组。改进const a = [1,2,3,4,5];

1. const result = a.find(
   : G4 d: x' u" e0 s% s, {# q
2.   item =>{
   , s* m& U8 n  v8 I, O! Z
3.     return item === 3
   $ A# T- [2 V5 m, Y. B
4.   }
   
5. )

复制代码

3 Y' v) i- J, m4 f6 u
六、关于扁平化数组的吐槽一个部门JSON数据中，属性名是部门id，属性值是个部门成员id数组集合，现在要把有部门的成员id都提取到一个数组集合中。
7 y" g9 k: z4 ?% n

1. const deps = {
   
2. '采购部':[1,2,3],
   8 J: L& Z2 ~) e4 {0 r
3. '人事部':[5,8,12],
   
4. '行政部':[5,14,79],
   
5. '运输部':[3,64,105],
   
6. }
   0 N! E# N! D. U" ]2 z
7. let member = [];
   
8. for (let item in deps){
   # t" S- ]% L( ~
9.     const value = deps[item];
   
10.     if(Array.isArray(value)){
    * `7 \! q9 K5 Z
11.         member = [...member,...value]
    
12.     }
    
13. }
      |( k! I- }# A5 @! ?" Y1 H6 r
14. member = [...new Set(member)]

复制代码

+ y" b! ~  E( C& K
吐槽获取对象的全部属性值还要遍历吗？Object.values忘记了吗？还有涉及到数组的扁平化处理，为啥不用ES6提供的flat方法呢，还好这次的数组的深度最多只到2维，还要是遇到4维、5维深度的数组，是不是得循环嵌套循环来扁平化？
改进

1. const deps = {
   # u$ o, j7 K7 r9 k$ D0 d) T
2.     '采购部':[1,2,3],
   1 h( @- n8 C8 e; Z  m% g8 M6 L4 z
3.     '人事部':[5,8,12],
   # Z# Q1 z4 s- z( g5 ]! G( Y
4.     '行政部':[5,14,79],
   
5.     '运输部':[3,64,105],
   ; L0 g" f4 I  P, S% m
6. }
   
7. let member = Object.values(deps).flat(Infinity);

复制代码

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

1. let index = 1;
   6 R. o, E# g0 T5 y6 n- k$ [
2. let key = `topic${index}`;
   4 h7 i. X0 ^( |; s4 e: n0 p0 q5 F
3. obj[key] = '话题内容';吐槽为何要额外创建一个变量。不知道ES6中的对象属性名是可以用表达式吗？改进let obj = {};
   
4. let index = 1;
   6 y- U2 N( x7 J# D8 N3 `
5. obj[`topic${index}`] = '话题内容';

复制代码

$ V4 ]0 T* u8 K# \! @3 W/ p2 q
九、关于输入框非空的判断在处理输入框相关业务时，往往会判断输入框未输入值的场景。if(value !== null && value !== undefined && value !== ''){
, d* u! i, O/ s    //...
9 x$ E3 b/ ?2 X8 p}
吐槽ES6中新出的空值合并运算符了解过吗，要写那么多条件吗？
if((value??'') !== ''){
  //...
}
* X, z- L* s0 A十、关于异步函数的吐槽异步函数很常见，经常是用 Promise 来实现。
' z" N4 \) e* v* F. b" d0 j

1. const fn1 = () =>{
   
2.   return new Promise((resolve, reject) => {
   , t0 ^* X3 b2 C' w
3.     setTimeout(() => {
   9 U$ c4 h3 r, ~& |
4.       resolve(1);
   
5.     }, 300);
   
6.   });
   1 {$ f; W# {- p2 f2 w
7. }
   " v4 K) M0 u) e: b8 ~7 l2 a( Y
8. const fn2 = () =>{
   ) W3 ]4 z$ y" o/ b
9.   return new Promise((resolve, reject) => {
   % ^6 h# N5 ]0 K/ e0 r  [2 g$ f
10.     setTimeout(() => {
    
11.       resolve(2);
    ! I  Y& X1 r& |! H' [
12.     }, 600);
    " ?) e  c( d0 ^# w
13.   });
    $ c  s1 Z) ^5 `; P
14. }
    ' `5 b, c6 A7 M3 {8 h
15. const fn = () =>{
    ! P$ P9 y/ t" f! Q( {
16.    fn1().then(res1 =>{
    5 U9 A4 f! `# y
17.       console.log(res1);// 1
    8 P1 K4 T( E- e
18.       fn2().then(res2 =>{
    
19.         console.log(res2)
    $ u3 a; n6 L& d& l: L6 m  A
20.       })
    
21.    })
    
22. }

复制代码

# ]7 O2 t8 T  c2 |8 r) _' k, N: k3 B7 a吐槽如果这样调用异步函数，不怕形成地狱回调啊！改进
& K  ~+ O+ c' R% g8 y8 W

1. const fn = async () =>{
   
2.   const res1 = await fn1();
   . t1 D! v8 t4 @9 P% ]
3.   const res2 = await fn2();
   
4.   console.log(res1);// 1
   ! T  y% I6 G' E+ ?- J
5.   console.log(res2);// 2
   
6. }

复制代码

补充但是要做并发请求时，还是要用到
$ K) P2 U, U; r1 `( ]/ o( t+ l0 z

1. Promise.all()
   
2. const fn = () =>{
   
3.    Promise.all([fn1(),fn2()]).then(res =>{
   * o$ q6 L2 o: }% {% R! G
4.        console.log(res);// [1,2]
   
5.    })
     L- Q7 x+ `) F5 D" A& P
6. }

复制代码

$ u2 {% t6 u- Q# O2 X5 q3 z如果并发请求时，只要其中一个异步函数处理完成，就返回结果，要用到Promise.race()。
十一、后续欢迎来对以上十点leader的吐槽进行反驳，你的反驳如果有道理的，下次代码评审会上，我替你反驳。此外以上的整理内容有误的地方，欢迎在原文评论中指正，万分感谢。
" U. b* T2 g% F* J" z
/ c3 N' }. f) o. A7 S( A& p# ^

---

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

Powered by Discuz! X3.5