javascript中的数组扩展（一）

 javascript中的数组扩展（一）

随着学习的深入，发现需要学习的关于数组的内容也越来越多，后面将会慢慢归纳，有的是对前面的强化，有些则是关于前面的补充。

一、数组的本质
    数组是按照次序排列的一组值，本质上，数组是一种特殊的对象
            console.log(typeof[1,2,3]);//object
    数组是对象但是对象不是数组
            var arr = ['a','b','c','d','e'];
            console.log(Array.isArray(arr));//true
            console.log(Array.isArray([]));//true
            console.log(Array.isArray({}));//false,空的对象不是数组
    数组的特性体现在，它的键名是按次序排列的一组整数。由于数组成员的键名是固定的，因此数组不用为每个元素指定键名，而对象的每个成员都要指定键名。
            var aa = ['a','b','c'];
            console.log(Object.keys(aa));//0,1,2
            var obj = {
                name1:'a',
                name2:'b',
                name3:'c'
            };
    数组是对象的特殊形式。在javascript中规定对象的键名一律为字符串，所以数组的键名也为字符串。
            var o = {
                1:'one',
                2:'two',
            }
            console.log(o[1]);//one
    在数组中：（非字符串的键名会被转为字符串，然户将其作为属性名来使用）
            var a = ['a','b','c'];
            console.log(a['0']);//a
            console.log(a[1]);//a
    但是在数组中要区分数组的索引和对象的属性名：所有的索引都是属性名，但只有在（0~2的32次方-2）之间的整数属性名才是索引
    当属组的属性不是（0~2的32次方-2）之间的整数时，只是数组的属性名，其明显特征是不改变数组数组长度
    注意：单独的数值不能作为标识符，数组的成员只能用方括号法表示
            var a = [1,2,3]    ;
            console.log(a[0]);//0
            console.log(a.0);//Uncaught SyntaxError: Unexpected number
    下面通过例子来区别索引和属性名
            var a = [1,2,3]    ;
            a[-1.23]=true;//属性名
            console.log(a.length);//3
            a[10] = 11;//索引
            console.log(a.length);//11
            a['abc'] = 'foodoir';//属性名
            console.log(a.length);//11

二、在谈到数组的本质的时候，我们不得不提数组检测的几种方法：            
        【typeof】   
            var arr = [1,2,3];
            console.log(typeof arr);//object,这个方法能很好的证明数组是对象
        【instanceof】
            var arr = [1,2,3];
            console.log(arr instanceof Array);//true
            var str = 'abc';
            console.log(str instanceof Array);//false
            //扩充
            var str = 'abc';
            str[0] = 1;
            str[1] = 2;
            str[2] = 3;
            console.log(str[1]);//b
            console.log(str.length);//3
            console.log(str instanceof Array);//false        
            var str = [];
            str[0] = 1;
            str[1] = 2;
            str[2] = 3;
            console.log(str[1]);//2
            console.log(str.length);//3
            console.log(str instanceof Array);//true
        【toString】
            var arr = [1,2,3];
            console.log(Object.prototype.toString.call(arr) === '[object Array]');//true
        【valueof()】

　　　　方法返回数组本身
            var a = [1,2,3];
            console.log(a.valueOf());//1,2,3
            console.log(a.valueOf() instanceof Array);//true

后来ECMAScript5新增了【Array.isArray()】方法。这个方法的目的最终是确定某个值到底是不是数组，而不管他是在哪个全局执行环境中创建的。这个方法的使用如下：

　　　　if(Array.isArray(value)){
    　　　　//对数组执行某些操作
　　　　}

三、关于数组的长度
   通用公式：数组长度 = 最大索引 + 1，再次强调：delete操作并不该变数组的长度
　关于数组长度的深度剖析
    1、当索引大于现有数组长度时，length属性的值将设置为索引值+1
            var a = [1,2,3];
            console.log(a.length);//3
            a[10] = 11;
            console.log(a.length);//11
    2、当length属性的设置小于当前长度时，将当前索引值大于设置的数组长度的元素从数组中删除
            var a = [1,2,3,4,5];
            a.length = 3;
            console.log(a);//1,2,3
            a.length = 0;
            console.log(a);//''
            a.length = 10;
            console.log(a);//,,,,,,,,,,
            console.log(a[3]);//undefined
    3、将数组的长度设为大于当前的长度，实际上并没有想数组中添加新元素，只是在数组的尾部创建了一个空的区域（见上）
    4、将数组的length值设为不合法的值，我们来看结果
            [].length = -1;//Uncaught RangeError: Invalid array length
            [].length = Math.pow(2,32);//Uncaught RangeError: Invalid array length
            [].length = 'abc';//Uncaught RangeError: Invalid array length
    5、那么问题来了，我们如何设置数组的长度不可修改呢？
        我们可以通过前面学习对象时的相关知识来解决
            var arr = [1,2,3];
            Object.defineProperty(arr,'length',{
                writable:false,
            });
            console.log(arr.length);//3
            arr[4] = 4;
            console.log(arr.length);//3
            console.log(arr)//1,2,3  说明设置不可修改length属性成功了

四、前面介绍了遍历数组的三种方法：for、for/in、forEach，接下来我们针对这三种方法进行一下扩展
    for()循环
        当索引连续时，可以用for循环遍历
            var arr = ['a','b','c',123];
            for(var i = 0 ; i<arr.length;i++){
                console.log(arr[i]);//a,b,c,123
            }
        补充：当索引连续时，也可以用while循环遍历数组
            var a = [1,2,3,4];
            var i = 0;
            while(i<a.length){
                console.log(a[i]);//1,2,3
                i++;
            }
            var j = a.length;
            while(j--){
                console.log(a[j]);//3,2,1
            }
        但是如数组为稀疏数组时，仍要使用for循环怎么办？
        此时应该给for循环增加一些条件
            var a = [1,,,,5,6];
            for(var i=0;i<a.length;i++){
                if(!(i in a)){
                    //console.log(typeof i);//number，注意：此时的返回值为number！！！
                    console.log(a[i]);//undefined
                }
            }
        前面是我自己踏进去的个坑，下面才是正确的解法，比较这二者的区别
            var a = [1,,,,5,6];
            for(var i=0;i<a.length;i++){
                if(!(i in a)) continue;
                //console.log(typeof i);//number，注意：此时的返回值为number！！！
                console.log(a[i]);//1,5,6
            }
    for/in循环
        从前面可以看出，在面对稀疏数组时，我们用for/in循环的话会方便很多
            var a = [1,,,,5,6];
            for(var i in a){
                console.log(a[i]);//1,5,6
            }
        由于for/in循环能够枚举继承的属性名，如添加到Array.prototype中的方法。由于这个原因，在数组上不应该使用for/in循环，除非使用额外的检测方法来过滤掉不想要的属性
            var a = [1,,,4];
            a.b = 'b';
            a.c = -5;
            a.d = 7.8
            for(var i in a){
                console.log(a[i]);//1,4,b,-5,7.8
            }
        我们可以通过加判定条件来跳过不是非负整数的i
            var a = [1,,,4];
            a.b = 'b';
            a.c = -5;
            a.d = 7.8
            for(var i in a){
                //console.log(typeof i);//String，注意：在前面用for循环中的for/in循环中typeof的返回值为number
                if(String(Math.floor(Math.abs(Number(i))))!==i) continue;
                console.log(a[i]);//1,4
            }
        下面我们通过前面对象的方法中的hasOwnProperty()函数来获取不是继承下来的属性
            var arr1 = [];
            arr1[1] = 'x';
            arr1[22] = 'y';
            arr1[333] = 'z';
            for(var i in arr1){
                console.log(arr1[i]);//x,y,z
            }//这种方法遍历的是继承下来的属性，若不想遍历继承下来的属性可以用hasOwnProperty()函数
            for(var i in arr1){
                if(arr1.hasOwnProperty(i)){
                    console.log(arr1[i]);//x,y,z
                }
            }//这种方法遍历的不是继承下来的属性
    我们还可以通过forEach()方法来遍历数组
        语法：Array.forEach(function(value[,index[,array]]){函数体})
            var arr2 = [1,2,3,4,5,6];
            方法一：
            arr2.forEach(function(x){
                console.log(x);
            });1,2,3,4,5,6
            方法二：
            function Test(element,index,array){
                console.log('要处理的数组为：'+array);
                console.log('索引：'+index+'--值为：'+element);
            }
            arr2.forEach(Test);

五、类数组：拥有length属性和对应非负整数属性的对象叫类数组
            var obj = {};
            obj[0] = 'a';
            obj[1] = 'b';
            console.log(obj);//Object {0: "a", 1: "b"}
            console.log(obj.length);//undefined
            但是将{}换成[]，这样是不是就很熟悉了
            var arr = [];
            arr[0] = 'a';
            arr[1] = 'b';
            console.log(arr);//["a", "b"]
            console.log(arr.length);//2
            前面那个带有{}的就是类数组，我们可以通过下面的例子来进一步了解它
            var a = {};
            var i = 0;
            while(i<10){
                a[i]=i*i;
                i++;
            }
            a.length = i;
            var total = 0;
            for(var j=0;j<a.length;j++){
                total += a[j];
            }
            console.log(total);//285
            有三个常见的类数组对象：arguments对象，DOM方法，字符串
            arguments对象
            function args(){
                return arguments;
            }
            var arrayLike = args('a','b');
            console.log(arrayLike[0]);//a
            console.log(arrayLike.length);//2
            console.log(arrayLike instanceof Array);//false
            DOM方法
            var elts = document.getElementsByTagName('div');
            for(var i=0;i<elts.length;i++){
                return true;
            }
            console.log(elts.length);//?
            console.log(elts instanceof Array);//false
            字符串
            console.log('abc'[1]);//b
            console.log('abc'.length);//3
            console.log('abc' instanceof Array);//false
            注意：字符串是不可变值，故把它们当作数组来看时，它们是只读的。push()、sort()、reverse()、splice()等方法会修改数组，它们在字符串上是无效的，且会报错。