【记录】前端开发中那些常用的简写方式
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 } = newObj10、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 = https://www.it610.com/article/value
}else{
value ='默认值'
}//等同
value ??= '默认值'//例子
10 ??= '默认值' //10
null ??= '默认值' //默认值其实都是一些 ES6/7/8/9/10/11/12新特性而已，项目中我也常常会用到，一定程度上简化了代码量，看起来也优雅些。
互补建议：前端开发规范>>>
推荐阅读
- 宽容谁
- 我要做大厨
- 增长黑客的海盗法则
- 画画吗（）
- 20170612时间和注意力开销记录
- 2019-02-13——今天谈梦想（）
- 远去的风筝
- 三十年后的广场舞大爷
- 叙述作文
- 20190302|20190302 复盘翻盘