每日学习心得：Js获取Checkboxlist所选值、instanceof 和typeof区别、为Array添加contains方法

2013-11-24

前言：

上周在工作中遇到了一些跟JS以及前台交互的问题，虽然算不上多么高深，但是在解决时也走了一些弯路，所以就总结一下。

1. JS获取checkboxList所选的值

这个的应用场景是需要在前台获取checkboxList的所选的值，然后作为dataService的参数传递为后台的方法。

在aspx页的界面显示代码如下：

<div>
    <label>请选择国家：</label>
        <asp:CheckBoxList ID="Cblist" runat="server">
        <asp:ListItem Value="CN" Text="中国" />
        <asp:ListItem Value="JP" Text="日本" />
        <asp:ListItem Value="US" Text="美国" />
        <asp:ListItem Value="UK" Text="英国" />
        </asp:CheckBoxList>
   <input type="button" value="确定" onclick="getCheckBoxListSelectedVales()" />
    </div>

但是在浏览器里边渲染过之后就成了这样子，从页面的渲染代码看，我们几乎看不出有什么特殊的属性来帮助我们获取被选中的项的值

<div>
    <label>请选择国家：</label>
        <table id="Cblist">
              <tr>
                               <td><input id="Cblist_0" type="checkbox" name="Cblist$0" value="CN" /><label for="Cblist_0">中国</label></td>
               </tr><tr>
                               <td><input id="Cblist_1" type="checkbox" name="Cblist$1" value="JP" /><label for="Cblist_1">日本</label></td>
               </tr><tr>
                               <td><input id="Cblist_2" type="checkbox" name="Cblist$2" value="US" /><label for="Cblist_2">美国</label></td>
               </tr><tr>
                               <td><input id="Cblist_3" type="checkbox" name="Cblist$3" value="UK" /><label for="Cblist_3">英国</label></td>
               </tr>
</table>
   <input type="button" value="确定" onclick="getCheckBoxListSelectedVales()" />
    </div>

这个时候我们该如何去获取checkboxList的所选值呢？请看如下代码：

functiongetCheckBoxListSelectedVales() {
            varcblists=$("[id*=Cblist]");
            varselected_value=newString('');
            for (vari=0; i<cblists.length; i++) {
                if (cblists[i].checked) {
                    if (selected_value!='')
                        selected_value+=',';
                    selected_value+=cblists[i].value;
                }
            }
            alert(selected_value);
}

在以上代码中我们先通过$(“[id*=XXX]”)的方式进行过滤，这句代码的意思是过滤出所有id中包含XXX的元素，这样我们可以得到一个数组。然后F12在开放人员工具里，”脚本”，我们cblists添加监视，可以看到该数组中包含5个数组元素，点击其中某一元素，然后发现他们有一个checked的属性，同时还有value属性，这样我们就可以通过checked属性来判断该元素是否被选中，如果选中再获取其值。

2. JS将一个数组字符串转换为数组对象

这里的应用场景是获取了一个json对象，但是该json对象并不能满足最终的需要，还需要对其进行修饰、改造。然后新建了一个string对象，将json对象重新进行拼接，最终得到了一个满足需要的字符串，但是最终需要的还是一个对象，这个时候该如何办呢？请看如下示例：

//将一个json字符串转换为对象
            var array_string = '[\'中国\',\'日本\',\'美国\',\'英国\']';
            array_string = eval('(' + array_string + ')');
            if (array_string instanceof Array)
                alert('array_string\'s type is Array');
            else
                alert('array_string\'s type is string');

这里主要用了eval方法，eval(string)方法，主要用来计算某个字符或者执行一段js代码。如上所示需要将一个拼接好的数组形式的字符串转换为一个数组对象，需要在字符串之外加上一个小括号:eval(‘(‘+XXXX+’))

同时这里为了判断该字符串转换后的类型，还用了instanceof，在判断该类型时，很多人会首先想到typeof(),但是typeof()方法，得到的是object，其次typeof能得到的结果只有number,boolean,string,function,object,undefined这几种，对于 Array,Null 等特殊对象使用 typeof 一律返回 object。而instanceof运算符，主要是用来判断某一个变量是否是某个对象的实例，这里需要注意的是这里的 instanceof 测试的
object 是指 js 语法中的 object，不是指 dom 模型对象。

3 JS 为Array添加contains方法

这里的应用场景是需要判断Array中是否包含某一元素，我们知道在string中有contains方法，但是数组里却没有这样的方法，而有些时候可能会需要多次判断数组中是否包含某一元素，所以需要为Array添加一个contains方法，这样可以方便使用，具体代码如下：

//为Array添加Contains方法
Array.prototype.contains = function(obj) {
            var i = this.length;
            while (i--) {
                if (this[i] === obj) {
                return true;
                }
            }
            return false;
        }
Var countryes=[‘中国’,’美国’,’日本’,’英国’]；
            if (array_string.contains('中国'))
                alert('It\'s China!');

今天就总结到这里了，希望能给大家带来一些帮助。