超实用的17个代码简写技巧

前言

    记得我之前看一个阿里大佬的视频，他说他 “从来不可能写两层以上嵌套的 if 判断，基本上平常遇到的任何判断，都能用各种花里胡哨的语法展平” 。

    如果你看过源码，想必也能发现有很多花里胡哨的语法，把你秀的头皮发麻。不过我个人认为，源码它是在技术底层的层面，不需要考虑代码可读性，减少代码量和提高性能才是关键。但是我们平常工作中的业务代码，还是要考虑下可读性的。当然了，不是说不能简写代码，是要遵守一些规范，比如命名规范什么的，对于一些复杂的操作如果简写了要做好注释。

    下面我给大家大概总结了一下平常可以用到的简写语法。如果有错误或者补充可以评论区告诉我~

本期博客参与了【新星计划】，还请大家三连支持一下🌟🌟🌟感谢感谢💓💓💓

** ps: 下面的“无效”“有效”不是指代码有错误！**

一、if判断多个值

描述：判断值满足多个条件

无效代码：if (value === 'a' || value === 'b' || value === 'c') { ... }

有效代码：if (['a', 'b', 'c'].includes(value)) { ... }

二、或非判断

描述：当条件为true或false时，执行某些操作或赋值

无效代码：

if(condition){
    toto()
}
//或者
if(!condition){
    toto()
}

有效代码：

condition && todo()
condition || todo()

const a = undefined
const value = a|| '1';   //短路求值

三、if条件语句有返回值，不要写else

无效代码：

if (...) {
  return 'abin'
} else {
  return 'ok'
}

有效代码：

if (...) {
  return 'abin'
}

return 'ok'

四、if判断输入非空

无效代码：if(value !== null && value !== undefined && value !== ''){ //... }

有效代码：if((value??'') !== ''){ //... }

补充：要注意 ?? 和 || 的区别：

• ??是空值合并操作符，它只判断null和undefined；

• || 是逻辑判断（或） 操作符，它判断的是boolean值，除了0、""、null、undefined、NaN               和 false 是假值之外，其他的都是真值。
  

五、!!将任何变量转换成boolean

六、判断对象的某些属性是否存在，可选项 .?

无效代码：

const toto = { a: { b: { c: 5 } } }

if (!!toto.a && !!toto.a.b && !!toto.a.b.c) { ... } // toto.a.b.c exist

有效代码：

if (!!toto.a?.b?.c) { ... } // toto.a.b.c exist，属性不存在会返回undefined

七、for循环简写

无效代码：for (let i = 0; i < arr.length; i++)

有效代码：for (let index in arr)

八、十进制指数

描述：当需要写数字带有很多零时（如10000000），可以采用指数（1e7）来代替这个数字：

九、对象属性简写

描述：如果属性名与key名相同

无效代码：const obj = { x:x, y:y };

有效代码：const obj = { x, y };

十、双重非位运算简写

无效代码：

Math.floor(4.9) === 4 //true

有效代码：

~~4.9 === 4 

//true

十一、数组精确查找

无效代码：遍历数组进行查找

const pets = [
 { type: 'Dog', name: 'Max'},
 { type: 'Cat', name: 'Karl'},
 { type: 'Dog', name: 'Tommy'},
]
 
function findDog(name) {
   for(let i = 0; i<pets.length; ++i) {
     if(pets[i].type === 'Dog' && pets[i].name === name) {
         return pets[i];
      }
   }
}

有效代码：

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

十二、对象取值

无效代码：

const obj = {
    a:1,
    b:2,
}
//取值
const c = obj.a;
const d = obj.b;
const e = obj.a;

有效代码：

const obj = {
    a:1,
    b:2,
}
//取值
const { a, b} = obj
const c = a
const d = b
const e = a

补充：要注意解构的对象不能为

undefined

、

null

。否则会报错，故要给被解构的对象一个默认 值。

十三、对象动态属性名

无效代码：可以用 [] 号set/get对象属性，而且它还可以写表达式

有效代码：

obj = {};
let index = 1;
obj[`key${index}`] = '内容';

十四、合并数据

无效代码：

const a = [1,2,3];
const b = [1,5,6];
const c = a.concat(b);//[1,2,3,1,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = Object.assign({}, obj1, obj2);//{a:1,b:1}

有效代码：

const a = [1,2,3];
const b = [1,5,6];
const c = [...new Set([...a,...b])];//[1,2,3,5,6]

const obj1 = {
  a:1,
}
const obj2 = {
  b:1,
}
const obj = {...obj1,...obj2};//{a:1,b:1}

补充：数组合并考虑下去重，用Set先处理下

十五、拼接字符串

描述：别用加号拼接了，用模板字符串好吗

无效代码：

const name = '小明';
const score = 59;
let result = '';
result = name + score>60?'的考试成绩及格'的考试成绩不及格':

有效代码：

const name = '小明';
const score = 59;
let result = '';
result = `${ name }的考试成绩&{ score>60?'':'不' }及格`

补充：模板字符串里可以写表达式，千万被写出下面这种代码，会被鄙视的

const name = '小明';
const score = 59;
let result = '';
if(score > 60){
  result = `${name}的考试成绩及格`; 
}else{
  result = `${name}的考试成绩不及格`; 
}

十六、扁平化数组

描述：一个班级JSON数据中，属性名是部门id，属性值是个部门成员id数组集合，现在要把有部 门的成员id都提取到一个数组集合中。

const deps = {
    '一班':[13,21,42],
    '二班':[34],
    '三班':[45,134,79],
    '四班':[33,64,15],
}

无效代码****：嵌套遍历取值

有效代码：

const deps = {
    '一班':[13,21,42],
    '二班':[34],
    '三班':[45,134,79],
    '四班':[33,64,15],
}
let member = Object.values(deps).flat(Infinity);

改写：

Infinity

作为

flat()

方法的参数，可以将任意维度的数组扁平化

十七、仅当对象存在时才向其添加属性

无效代码****：

const toto = { name: 'toto' }
const other = { other: 'other' }
// The condition is not important
const condition = true

if (condition) {
   other.name = toto.name 
}

有效代码****：

const condition = true

const other = {
   other: 'other',
   ...condition && { name: 'toto' }
}

补充：利用了扩展运算符，解构赋值和&& 逻辑运算符

最后

以后再补充~ 也欢迎大家评论区给我补充，共同学习进步！