代码简洁之道

133 阅读1分钟

1. 数组中取值

// 常规逻辑 
const apples = ["🍎", "🍏"]; 
const redApple = apples[0]; 
const greenApple = apples[1]; 
console.log(redApple); // 🍎 
console.log(greenApple); // 🍏; 
// 优雅写法 
const apples = ["🍎", "🍏"]; 
const [redApple, greenApple] = apples; // 使用解构赋值 console.log(redApple); // 🍎 
console.log(greenApple); // 🍏;

2. 对象取值

// 常规逻辑 
const user = { name: "DevPoint", age: 30, }; 
const name = user.name; // DevPoint 
const age = user.age; // 30 
console.log(name); console.log(age); 
// 优雅写法 
const user = { name: "DevPoint", age: 30, }; 
const { name, age } = user; 
console.log(name); // DevPoint 
console.log(age); // 30

3. 对象合并

// 优雅写法 
const employee = { name: "DevPoint", age: 30 }; 
const salary = { grade: "A" }; 
const summary = { ...employee, ...salary }; 
console.log(summary); // { name: 'DevPoint', age: 30, grade: 'A' }

4. 根据状态 0 1 2...渲染不同的组件样式

const status = [
    <Alert message="待办" type="info" showIcon />,
    <Alert message="已完成" type="success" showIcon />,
    <Alert message="已取消" type="error" showIcon />,
]

render:( _,record ) => {
    return status[record.status]
}

4. 获取当前时间

const data = new Date();
const week = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
setClockTime(moment().format('HH:mm:ss')); // 时分秒
setClockDate(data.getFullYear() + '-' + (data.getMonth() + 1) + '-' + data.getDate()); // 年月日
setClockWeek(week[data.getDay() - 1]); // 星期几

4. 计算倒计时:天

const date = new Date()
const dateArr = []
const endTime = new Date('2023/09/23 08:00:00')
const diff = parseInt((endTime.getTime() - date.getTime()) / (60 * 60 * 24 * 1000))
dateArr.push(
    ...String(diff)   
      .padStart(3, '0') 
      .split('')
)  // String()初始化一个新创建的String对象,使其表示一个空字符序列;padStart()用于头部补全,padEnd()用于尾部补全