今天完成的事情：

1、今天继续查看了关于js的资料，学到了很多。

明天计划的事情：

1、明天计划开始制作小课堂，并开始接触js任务。

收获：

1、JS判断元素是否在数组内

一、JQuery

如果是用JQuery的话，可以用inArray()函数：

jquery inarray()函数详解

jquery.inarray(value,array)

确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。

determine the index of the first parameter in the array (-1 if not found).

返回值

jquery

参数

value (any) : 用于在数组中查找是否存在

array (array) : 待处理数组。

用法为：

$.inArray(value, array)

二、自己写函数

function contains(arr, obj) {

    var i = arr.length;

    while (i--) {

        if (arr[i] === obj) {

            return true;

        }

    }

    return false;

}

用法为：

var arr = new Array(1, 2, 3);

contains(arr, 2);//返回true

contains(arr, 4);//返回false

三、给Array增加一个函数

Array.prototype.contains = function (obj) {

    var i = this.length;

    while (i--) {

        if (this[i] === obj) {

            return true;

        }

    }

    return false;

}

使用方法：

[1, 2, 3].contains(2); //返回true

[1, 2, 3].contains('2'); //返回false

四、使用indexOf

但是有个问题是IndexOf在某些IE版本中是不兼容的，可以用下面的方法：

if (!Array.indexOf) {

    Array.prototype.indexOf = function (obj) {

        for (var i = 0; i < this.length; i++) {

            if (this[i] == obj) {

                return i;

            }

        }

        return -1;

    }

}

先判断Array是否有indexOf方法，如果没有就扩展出此方法。

所以上面代码要写在使用indexOf方法的代码之前：

var arr = new Array('1', '2', '3');

if (!Array.indexOf) {

    Array.prototype.indexOf = function (obj) {

        for (var i = 0; i < this.length; i++) {

            if (this[i] == obj) {

                return i;

            }

        }

        return -1;

    }

}

var index = arr.indexOf('1');//为index赋值为0

2、遍历DOM元素的children属性遇到的坑

问题的引出

关于DOM元素的 children 属性，以前我只在意它和 childNodes 属性的区别：即 children属性只会返回子元素节点集合，而 childNodes 返回的就不止元素节点，还有文本节点等所有子节点集合。这样看来， children 似乎是我们获取子元素而舍弃其他类型的子节点的最佳选择，虽然说在IE8-的浏览器下用它还会返回注释节点，但兼容起来也是很简单的。

我们知道， children 返回的子元素集合实际上是一个类似数组的HTMLCollection对象，那接下来我们要获取每个子元素自然要遍历它咯，但是一遍历，问题就出来了：

    <div id="ul">
        <div id='i'></div>
        <div id="ii"></div>
        <div></div>
    </div>

    <script>
        o=document.getElementById('ul').children;        for (i in o) {            console.log(o[i]);
        }    </script>

上面的代码使用了 for-in 进行遍历，但我们预料中的结果并未出现，以chrome为例，运行结果是这个：

这就是我在前面的 原生js练习题-第一课 那篇文章中提到过的坑了，其中有两个奇怪的问题：

1. 多返回了 length 等几个在数组应该是不可枚举的属性。

2. 把有id的元素重复了两次。

关于问题1

先说一下，上面提到的第一点在各个浏览器里情况都相同，而第二点关于返回的元素是否重复在各浏览器下情况还不同。

我们先讨论第一点，这里要考虑 for-in 循环遍历对象时的规则比较奇葩：对象自身和继承到的可枚举属性都会被遍历到。所以为确定多遍历到的内容到底是自身还是原型上的属性，我们来验证一下：

    console.log(Object.keys(o)); //["0","1","2","i","ii"]
    console.log(Object.getOwnPropertyNames(o)); //["0","1","2","i","ii"]

Object.keys() 方法返回的是可枚举的自身属性的属性名组成的数组，而 Object.getOwnPropertyNames() 返回的是所有自身属性的属性名组成的数组（含可枚举和不可枚举）。在这里我们没有看到 length 、 item() 、 namedItem() 三个属性的身影，由此断定他们不是HTMLCollection对象自身的属性，但既然能被 for-in 遍历到那就只能是来自HTMLCollection原型的可枚举属性。我们可以用 Object.getOwnPropertyDescriptor() 来验证其在原型上的可枚举性：

    console.log(Object.getOwnPropertyDescriptor(o.__proto__, 'length').enumerable); //true
    console.log(Object.getOwnPropertyDescriptor(o.__proto__, 'item').enumerable); //true
    console.log(Object.getOwnPropertyDescriptor(o.__proto__, 'namedItem').enumerable); //true

关于问题2

解决了多出来的三个属性的来源，我们再回过头看看为什么会把有id的元素重复了两次。观察用Object.keys() 方法返回的数组，这两次一次用下标做属性名、一次用id名作属性名。但其实两个属性名指向的是同一个对象：

    o[0]===o['i'] //true
    o[1]===o['ii'] //true

可见之所以 for-in 会把id的元素重复遍历两次，不是因为有id的元素都添加进HTMLCollection对象两次，只是一个元素有了两个属性名而已，这是chrome的情况（我的版本是48.0.2564.116 m），但放到火狐和IE下结果却还有点所不同：

    //FF
    console.log(Object.keys(o)); //["0", "1", "2"]
    console.log(Object.getOwnPropertyNames(o)); // ["0", "1", "2", "i", "ii"]
    o[0]===o['i'] //true
    o[1]===o['ii'] //true    //IE11
    console.log(Object.keys(o)); //["i", "ii", "2"]
    console.log(Object.getOwnPropertyNames(o)); // ["i", "ii", "2"]
    o[0]===o['i'] //true
    o[1]===o['ii'] //true

可见虽然不同的浏览器返回的HTMLCollection对象都存在有id的子元素有两个属性名的情况，但从 Object.keys(o) 的结果看，火狐和IE对同一元素默认只取一个属性名。所以如果你在火狐或IE运行一开始那段代码，就会发现 for-in 遍历时火狐和IE也只对同一元素访问一次，不会像chrome那样重复遍历。然而我们还看到，这两个浏览器间选取的属性名也不同，火狐优先选择下标形式，而IE优先选择id形式，同时由 Object.getOwnPropertyNames(o) 的结果我们还可以窥探出火狐实现选取属性名的机制可能是通过将id形式的属性名设为不可枚举来实现的，至于IE就不清楚了。

小结

这下我们可以得出结论了： children 个属性返回的HTMLCollection对象不止能遍历到子元素，还能遍历到来自其原型的 length 、 item() 、 namedItem() 三个属性。而且一旦遍历到的子元素有id，就存在HTMLCollection对象里一个元素会有两个属性名的问题，更让人蛋疼的是各浏览器对这两个属性名的选取各不相同。当然，最根本原因还是因为 children 属性现在还没被正式纳入标准，在使用这种非标准属性时我们难免遇到一些奇葩的状况。

所以这也告诫我们，如果对一个非标准属性的特点不是特别了解，还是不要轻易使用它，否则出现的问题往往是你难以控制的。但如果你还是觉得 children 使用起来方便，那在使用时就得谨记这些问题，比如在遍历子元素时最好放弃 for-in 循环，老老实实使用基本的for循环去遍历数字索引吧，这样就和遍历数组差不多，不会遍历到那些多出来的属性了。

而至于 for-in ，最好只用来遍历数组或简单的对象。既要防止那些添加、修改了原型属性的对象遍历出多余的的结果，也要防止类似 children 这种非标准属性返回一个属性的枚举性不可控的对象的坑。

‍‍‍‍‍‍