JavaScript 优雅写法

多种可能

当提到多种可能时，大家首先想到的可能是 if...else if...else 或者 switch...case。例如判断不同的事件：
1.多种可能对应同一种情况

if(status === 0 || status === 1 || status === 2 || status === 3) {
    console.log('按钮可以点击');
}
// =>

if([0, 1, 2, 3].includes(status)) {
    console.log('按钮可以点击');
}

2.多种可能对应不同情况

let content = [];
if(event === 'click') {
    content = ['jump', clickFunction];
} else if (event === 'blur') {
    content = ['jungle', blurFunction];
} else if (event === 'scroll') {
    content = ['scroll', scrollFunction];
} else if (event === 'size') {
    content = ['change', sizeFunction];
} else if (event === 'focus') {
    content = ['jungle', focusFunction];
} else {
    content = ['other', otherFunction];
}





let content = [];
const eventObject = {
    'click': ['jump', clickFunction],
    'blur': ['jungle', blurFunction],
    'scroll': ['scroll', scrollFunction],
    'size': ['change', sizeFunction],
    'focus': ['jungle', focusFunction],
}
content = eventObject[event] || ['other', otherFunction];

if(status === 0) {
    text = '已删除'
} else if (status === 1) {
    text = '未开始'
} else if (status === 2) {
    text = '上课中'
} else if (status === 3) {
    text = '已下课'
} else if (status === 4) {
    text = '已评估'
} else {
    text = '--'
}



switch(status) {
    case 0:
        text = '已删除';
        break;
    case 1:
        text = '未开始';
        break;
    case 2:
        text = '上课中';
        break;
    case 3:
        text = '已下课';
        break;
    case 4:
        text = '已评估';
        break;
    default:
        text = '--';
        break;
}

// 简洁写法
const statusTextArray = ['已删除', '未开始', '上课中', '已下课', '已评估'];
text = statusTextArray[status] || '--';


// status 非数值或数值过大
const statusTextObject = {
    100: '已删除',
    101: '未开始',
    102: '上课中',
    103: '已下课',
    104: '已评估'
}
text = statusTextObject[status] || '--';

// 非数值我们将对象的 key 替换为对应status的值即可。

深层嵌套对象

开发过程中，避免不了会遇到深层对象的取值，既然是深层对象，那我们肯定需要一层一层去判断是否存在对应的key才能继续获取下一层，不然的话，如果某一次数据的某一层不为对象或对应的值不存在时，又没有做异常处理，那我们的程序就会崩溃。怎么避免这种问题，并写出优雅的代码呢？

1.正常写法

const user = {
    base: {
        family: {
            parent: {
                mather: {
                    name: '...'
                },
                father: {
                    name: '...'
                }
            }
        }
    }
}
let fatherName = '';
if(user && user.base && user.base.family && user.base.family.parent && user.base.family.parent.father) {
    fatherName = user.base.family.parent.father.name || '-';
}

如上所示，当对象层级过深，我们需要每级都判断，那我们还可以怎么写呢？

// 使用 ES6 新特性 ?.
let fatherName = '';
fatherName = user?.base?.family?.parent?.father?.name;