关于javascript:记录前端开发中实用的简写方式

1、多行申明

let num = 0;
let newColor = 'blue'
let nameList = []
/*----------这种，格式化后不再优雅------------*/
let num=0, newColor = 'blue', nameList = [];

//改成 ---/也罕用于两个变量值的替换
let [ num,newColor,nameList ] = [ 0,'blue',[] ]

2、后盾参数状态码转换

switch(num){
  case 0:
    status = '待处理'
   break;
  case 1:
    status = '解决中'
   break;
  case 2:
    status = '已解决'
   break;
}

//数字状态码转文字
const status = ['待处理','解决中','已解决'][num]

//文字转数字状态码
const status = ['待处理','解决中','已解决'].indexOf('已解决')

3、属性名转中文

switch(str){
  case "name":
     return '名称';
  case "age":
     return '年龄';
  case "city":
     return '城市'
  default:
     return '无此项'
}

//改成
const newObj = {
  name:"名称",
  age:"年龄",
  city:"城市",
}
return newObj[str] || '无此项'

4、if 赋值语句改为三元表达式

if(code === 200){
   tips = '上传胜利'
}else{
   tips = '上传失败'
}

//改成
const tips = code === 200 ? '上传胜利' : '上传失败'

5、空值合并（0也算一个值）

if(num || num == 0){
  return num
}else{
  return '-'
}

//改成 ---/ 如果 num 的值为 undefined 或 null 则返回 '-' 占位
num ?? '-'

6、多个”或“判断

if(city == '深圳' || city == '广州' || city == '上海' || city == '北京'){}

//改成
if(['深圳','广州','上海','北京'].includes(city)){}

7、链式判断

const newObj = {
  name:"肥尸",
  address:{
    street:"钵兰街"
  }
}

if(newObj && newObj.address && newObj.address.street){}

//改成
if(newObj?.address?.street){
  alert('好家伙，肥尸你藏得够深啊~')
}

8、对象合并—数组合并—数组去重

const params1 = {
  startTime:"",
  endTime:"",
}
const params2 = {
  ...params1,
  name:"",
}

const newArr1 = ['用户1','用户2','用户3']
const newArr2 = [...newArr1,'用户4','用户5']

const newArr3 = [1,1,2,2,3,3,4,5,6,6,7,8,8,9,10,10]
const newArr4 = [...new Set(newArr3)]

9、对象构造

const newObj = {
  name:"脑中突然浮现出她的名字",
  age:22
}
const name = newObj.name;
const age = newObj.age;

//改成
const { name,age } = newObj

10、Math办法

/* Math.floor 取整*/
let num = 10.56
Math.floor(num) //10
~~num //10

/* Math.pow 幂运算*/
let [min,max] = [2,6]
Math.pow(min,max) //64
min**max //64

11、字符串补全长度

//前补齐 ---/罕用于对工夫位数的补齐
'9'.padStart(2,'0') //09

//后补齐
'优'.padEnd(2,'等') //优等

12、最新的 ES2021 逻辑赋值运算符 ??= ，&&= 和 ||=

if(value){
  value = value
}else{
  value = '默认值'
}

//等同
value ??= '默认值'

//例子
10 ??= '默认值' //10
null ??= '默认值' //默认值

其实都是一些 ES6/7/8/9/10/11/12新个性而已，我的项目中我也经常会用到，肯定水平上简化了代码量，看起来也优雅些。

互补倡议：前端开发标准>>>