？三元表达式和数组的应用

今天在写代码时用到了一个if else的一个判断，突然想到了原来遇见的一个面试题目：

1. 现有一数组 a，长度未知，数组每一项的数据类型约定为 Number，请用 JavaScript 实现以下逻辑：
   如果 a 的长度为零，则为其添加一个新项，值为 1。
   如果 a 的长度不为零，则按照 先进先出 的原则，移除一项。
   评分标准：代码越精简越好，<=30 字符 10 分，<=35 字符 6 分， >35 字符 3 分（空格不算）

a[a.length?'shift':'push'](1);

一开始看到这道题目的时候完全无法理解这个写法是什么，后来翻看文档了解了为啥能这么写。

首先我们要先理解一个东西：数组，大家在学习数组的时候，很可能忽视这么样一种写法

Paste_Image.png

是的，数组是一个对象， obj.['name'] == obj.name,这两种写法其实是一个意思，同时里面使用了？这个三元运算符表达式 ：
(expr1) ? (expr2) : (expr3) 在 expr1 求值为 TRUE 时的值为 expr2，在 expr1 求值为 FALSE 时的值为 expr3。

我们再来看面试题:
如果a存在不为空：a['shift'](1) 即a.shift(1)
如果a不存在：a['push'](1) 即a.push(1)

理解了这个面试题，那么今天我写的代码就能进行优化啦，我写了个类似于百度地图悬浮工具栏的模块，其中封装了一个鼠标事件的构造函数：

Paste_Image.png

当鼠标点击选择菜单区域时，下端div自动切换，是不是很简单？我之前是这么写的，其中的if else语句用来判断div是否隐藏，隐藏了就点击显示，没隐藏就点击隐藏，同时进行切换。

var listDisplay=function(p){
        this.p=p;
        this.start();
};

listDisplay.prototype={
            start:function(){
                var _this = this;
                $(this.p).on('click', 'li', function(e){
                    var $target = $(e.target);
                        $div = $(_this.p).children('div').eq($target.index());
                    //注意这里的逻辑
                    if($div.hasClass('active')) {
                        _this.classDel($div);
                    }
                    else{
                        _this.classAdd($div);
                    }
                });
            },
            classAdd:function(node){
                $(this.p).children('div').removeClass('active');
                node.addClass('active');

            },
            classDel:function(node){
                node.removeClass('active');
            }

        };
new listDisplay($('.wrap_list')[0]);

那有没有写的简约点，也就是B格高点的写法呢，把if else换成三元运算符？的写法试试，成功！

$div.hasClass('active')?_this.classDel($div):_this.classAdd($div);

装B就要彻底点，还有没有更简单的写法？下面这个就是融合了数组和？的方式组合成的，是不是要比if else高大上多了，哈哈哈！

_this[$div.hasClass('active')?'classDel':'classAdd']($div);