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 新个性而已,我的项目中我也经常会用到,肯定水平上简化了代码量,看起来也优雅些。
互补倡议:前端开发标准 >>>