使用if和else来做判断,但是这段代码真的太冗余了,求帮忙优化一下

document.getElementsByClassName("current")[0].onclick = function () { // 点击列表数字 1
            //alert("abv");
            for(var i = 0; i< listShow; i++ )
            {
                document.getElementsByClassName("sojob-item-main")[i].parentNode.style.display = "block";
                //console.log('title =', strObj[i]['title']);
                document.getElementsByClassName('title')[i].innerHTML = "<a href='article_detail.html?id="+strObj[i]['id']+"&userID="+strObj[i]['uid']+"'>"+strObj[i]['title']+"</a>";
                
                if( strObj[i]['sex'] == '男' ) {
                    document.getElementsByClassName('author')[i].innerHTML = strObj[i]['author'].substr(0,1) + "先生";
                } else if ( strObj[i]['sex'] == '女' ) {
                    document.getElementsByClassName('author')[i].innerHTML = strObj[i]['author'].substr(0,1) + "女生";
                }
                
                var temptation = document.getElementsByClassName("temptation");
                if( strObj[i]['birthday'] == null ){
                    temptation[i].innerHTML = "本人没有提供出生日期";
                } else {
                    temptation[i].innerHTML = "出生月份:"+strObj[i]['birthday'].substr(0,4)+ "年";
                }
                
                var publishTime = document.getElementsByClassName('publishTime');
                if( strObj[i]['dateline'] == null || strObj[i]['dateline'] == ''){
                    publishTime[i].innerHTML = "未知";
                } else {
                    publishTime[i].innerHTML = "发布时间:" + strObj[i]['dateline'];
                }
                            
                var fieldFinancing = document.getElementsByClassName("field-financing");
                if (strObj[i]['marriage'] == 1) {
                    fieldFinancing[i].innerHTML = "未婚单身无目标";
                } else if (strObj[i]['marriage'] == 2) {
                    fieldFinancing[i].innerHTML = "未婚单身有目标";
                } else if (strObj[i]['marriage'] == 3) {
                    fieldFinancing[i].innerHTML = "未婚有对象交往";
                } else if (strObj[i]['marriage'] == 4) {
                    fieldFinancing[i].innerHTML = "未婚有对象谈婚论嫁中";
                } else if (strObj[i]['marriage'] == 5) {
                    fieldFinancing[i].innerHTML = "离异没孩子找对象";
                } else if (strObj[i]['marriage'] == 6) {
                    fieldFinancing[i].innerHTML = "离异没孩子不找对象";
                } else if (strObj[i]['marriage'] == 7) {
                    fieldFinancing[i].innerHTML = "离异有孩子找对象";
                } else if (strObj[i]['marriage'] == 8) {
                    fieldFinancing[i].innerHTML = "离异有孩子不找对象";
                } else if (strObj[i]['marriage'] == 9) {
                    fieldFinancing[i].innerHTML = "订婚";
                } else if (strObj[i]['marriage'] == 10) {
                    fieldFinancing[i].innerHTML = "已婚";
                } else {
                    fieldFinancing[i].innerHTML = "婚姻状况:未知";
                }
                
                var personEducation = document.getElementsByClassName('personEducation');
                if (strObj[i]['education'] == 0) {
                    personEducation[i].innerHTML == "学历:高中以下";
                } else if (strObj[i]['education'] == 1) {
                    personEducation[i].innerHTML = "学历:高中";
                } else if (strObj[i]['education'] == 2) {
                    personEducation[i].innerHTML = "学历:大专";
                } else if (strObj[i]['education'] == 3) {
                    personEducation[i].innerHTML = "学历:本科";
                } else if (strObj[i]['education'] == 4) {
                    personEducation[i].innerHTML = "学历:硕士";
                } else if (strObj[i]['education'] == 5) {
                    personEducation[i].innerHTML = "学历:博士";
                } else if (strObj[i]['education'] == 6) {
                    personEducation[i].innerHTML = "学历:博士后";
                } else {
                    personEducation[i].innerHTML = "学历:未知";
                }
                
                var personOccupation = document.getElementsByClassName('personOccupation');
                if( strObj[i]['occupation'] == null || strObj[i]['occupation'] == ''){
                    personOccupation[i].innerHTML = "未知";
                } else {
                    personOccupation[i].innerHTML = strObj[i]['occupation'];
                }
                
                var personSalary = document.getElementsByClassName('personSalary');
                personSalary[i].innerHTML = strObj[i]['salary'] + "元/月";
            }
        }

这是我写的一段代码,使用大量了if和esle,但是我自己感觉无法优化

不用es6的情况下,如何才能优化?

阅读 3.2k
6 个回答
var mp = ['未婚单身无目标', '未婚单身有目标', '未婚有对象交往']
fieldFinancing[i].innerHTML = mp[strObj[i]['marriage']] || '婚姻状况:未知'

if else 那一大段可以换成switch

把选项封装成数组或对象

使用对象的键值对:

a = {
    1: "未婚单身无目标",
    2: "...",
}
b = a[strObj[i]['marriage']] || '婚姻状况:未知'

仅提供思路 下面为函数内容

            var get = document.getElementsByClassName;
            if (!get) {
                return;
            }
            get = get.bind(document);
            var personEducation = [
                "学历:高中以下",
                "学历:高中",
                "学历:大专",
                "学历:本科",
                "学历:硕士",
                "学历:博士",
                "学历:博士后"
            ],  fieldFinancing = [
                "婚姻状况:未知",
                "未婚单身无目标",
                "未婚单身有目标",
                "未婚有对象交往",
                "未婚有对象谈婚论嫁中",
                "离异没孩子找对象",
                "离异有孩子找对象",
                "离异有孩子不找对象",
                "订婚",
                "已婚"
            ];            
            for(var i = 0; i< listShow; i++ ) {
                var o = strObj[i],
                    _get = (function(i){
                        return function(name){
                            return get(name)[i] || {};
                        }
                    })(i);
                if (!o) {
                    console.warn('strObj[', i, ']', 'is undefined');
                    continue;
                }
                _get('sojob-item-main').parentNode.style.display = "block";
                _get('title').innerHTML = "<a href='article_detail.html?id="+o.id+"&userID="+o.uid+"'>"+o.title+"</a>";
                _get('author').innerHTML = o.author.substr(0,1) + (o.sex === '男' ? "先生" : "女生");
                _get('temptation').innerHTML = o.birthday ? "出生月份:" + o.birthday.substr(0,4) + "年" : "本人没有提供出生日期";
                _get('publishTime').innerHTML = o.dateline ? "发布时间:" + o.dateline : "未知";                
                _get('fieldFinancing').innerHTML = fieldFinancing[o.marriage] || "婚姻状况:未知";
                _get('personEducation').innerHTML = personEducation[o.education] || "学历:未知";
                _get('personOccupation').innerHTML = o.occupation || "未知";
                _get("personSalary").innerHTML = o.salary + "元/月";
            }

提供个思路

const actions = new Map([
  ['guest_1', ()=>{/*do sth*/}],
  ['guest_2', ()=>{/*do sth*/}],
  ['master_1', ()=>{/*do sth*/}],
  ['master_2', ()=>{/*do sth*/}],
  ['default', ()=>{/*do sth*/}],
])
const onButtonClick = (identity,status)=>{
  let action = actions.get(`${identity}_${status}`) || actions.get('default')
  action.call(this)
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题