JS 数组总结

    /**
     * JS数组
     * 类型：JS数组是无类型的，数组元素可以是任意类型
     * 索引：基于零的32位数值，索引(下标)范围：0 到 (2的32次方)-2 [即 0 到 4 294 967 294],
     *       即4 294 967 295个元素,在这个下标范围内,数组的 length 属性可以自动维护
     * 特性：
     * 1、动态；创建数组无需声明大小,其长度会根据需要动态增长或缩减
     * 2、连续性：JS数组可能是稀疏的，元素索引不一定要连续
     * 属性：length属性，表示数组长度(数组中数字索引的长度)
     */

    /**
     * 数组的创建:
     * 1、使用直接量字符创建
     * 2、调用构造函数 Array() 创建
     */
    //使用数组直接量创建数组
    var arr=[];

    // 数组的直接量的语法允许有可选逗号作结尾,直接量中被省略的值是不存在的,
    //访问时会输出 undefined, 且直接量中的值不一定要是常量,也可以是表达式
    var arr=[,,];
    console.log(arr);//[ <2 empty items> ] 这里数组为空,没有元素
    //解析：上面语句实际上与 var arr=[,]; 相同
    //第一个逗号左边和右边各有一个 item,第二个逗号可选(即可有可无)

    var num=1024;
    var arr=[undefined,undefined,++num];
    console.log(arr);//[ undefined, undefined, 1025 ]
    //解析：这里的两个元素值为：undefined (这里数组有值,并不为空,只不过值刚好为:undefined)

    //调用构造函数Array()创建数组
    var arr=new Array();//[]
    var arr=new Array(10);//[ <10 empty items> ] 指定数组长度为10
    //var arr=new Array(4294967296);//RangeError: Invalid array length
    //解析：数组索引范围(0 到 4 294 967 294)，即4 294 967 295个元素,创建数组时超出范围报错
    var arr=new Array(123,"abc",{});//[ 123, 'abc', {} ] //显式指定多个数组元素

    /**
     * 数组元素的读写：
     * 数组是对象的特殊形式，使用方括号访问数组元素就像使用方括号访问对象的属性一样
     * 数组索引和对象属性的区分：
     * 1、所有索引都是属性名
     * 2、只有在范围内(0 到 (2的32次方)-2)的整数属性名才是索引
     * 3、因为所有数组都是对象,因此可以为数组创建任意名字的属性,如果使用的
     *    属性名是数组索引(范围内的整数),那么数组就会根据需要更行它的 length 属性值
     * 4、事实上数组索引仅仅是对象属性名的一种特殊情况,这意味着js数组没有"越界"错误概念
     *    即当试图查询对象(数组是对象)中不存在的属性时,不会报错,只会得到 undefined
     */
    var arr=[];
    arr[1]="num1";
    arr[2.000]="num2";//与 arr[2]="num2";相等
    arr[-1.23]=true;//超出范围,不是索引,是属性
    console.log(arr,arr[100]);
    //[ <1 empty item>, 'num1', 'num2', '-1.23': true ] undefined
    //解析：arr[0] 没有赋值,所以为空。arr[1],arr[2]对应数组索引。
    //最后面的 '-1.23': true 就跟对象中的键值对一样,可通过 arr[-1.23]/arr["-1.23"] 访问到
    //arr[100]超出当前数组的长度,但访问时不会报错,而是输出 undefined


    /**
     * 稀疏数组：
     * 稀疏数组就是包含从0开始的不连续的索引的数组
     */
    var arr=[];
    arr[20]="hello";
    console.log(arr,arr.length);//[ <20 empty items>, 'hello' ] 21
    //解析：虽然数组长度为 21，但是数组是稀疏的,只有一个元素,前面元素全部为空


 /**
  * 数组的长度 length 属性:
  * 更准确地说数组的 length 属性，表示的是数组中数字索引的长度,而不是数组中元素的个数
  */

  var arr=[];//一个空数组,length=0
  arr[3]="num3",arr["test"]="hello world",arr[-100]="-100";
  console.log("length:"+arr.length,arr);
  //length:4 [ <3 empty items>, 'num3', test: 'hello world', '-100': '-100' ]
  //解析：数组前面3个元素为空,arr[3]在上面赋值为 num3,后面两个不是索引,而是被当成对象属性
  //数字索引有4个(arr[0]、arr[1]、arr[2]、arr[3]),也就说明:length 表示的是数组中数字索引的长度(这个就是数组长度)
  //由此引出了下面这样一个特殊行为

  //当设置 length 属性为一个小于当前数组长度的非负数n时,当前数组中那些索引值大于或等于n的元素将从中删除
  //当设置 length 属性为一个大于当前数组长度的非负值n时,不会添加新元素,而是在数字索引元素后面添加空元素
   var arr=new Array(1,2,3,4,5,6,7,8);
   arr["a"]="a",arr["test"]="hello";
   console.log("length:"+arr.length,arr);
   //length:8 [ 1, 2, 3, 4, 5, 6, 7, 8, a: 'a', test: 'hello' ]

   arr.length=2;
   console.log("length:"+arr.length,arr);
   //length:2 [ 1, 2, a: 'a', test: 'hello' ]
   //解析：可以看到索引arr[2]到arr[7]都被删除了,因为 length 表示的是数组中数字索引的长度(这个就是数组长度)

   arr.length=5;
   console.log("length:"+arr.length,arr);
   //length:5 [ 1, 2, <3 empty items>, a: 'a', test: 'hello' ]
   //解析：可以看到数组增加了3个空元素,且长度增加了,因为 length 表示的是数组中数字索引的长度(这个就是数组长度)


   /**
    * 数组的方法：
    * join()、reverse()、sort()、concat()、slice()、splice()、
    * push()、pop()、shift()、unshift()、toString()、toLocalString()、valueOf()
    * forEach()、map()、filter()、every()、some()
    * reduce()、reduceRight()、indexOf()、lastIndexOf()
    */

    //join()方法，按指定字符串将数组中各个元素(这里指有索引的元素，下同)连接起来并返回
    //始末状态：不会改变数组本身
    //参数：分隔符
    var data=[1,2,3,4,5,6,7,8];
    data["test"]="test";
    console.log(data.join(" @--> "));//1 @--> 2 @--> 3 @--> 4 @--> 5 @--> 6 @--> 7 @--> 8
    console.log(data);//[ 1, 2, 3, 4, 5, 6, 7, 8, test: 'test' ] 不会改变数据本身

    //reverse()方法，将数组中的元素倒序，并返回倒序后的数组(是倒序，不是从大到小排序,只是把元素位置倒转)
    //始末状态：会改变数组本身
    //参数:无
    var data=[3,"d",1,"hello",{},-1,9,"b"];
    data["test"]="test";
    console.log(data.reverse());//[ 'b', 9, -1, {}, 'hello', 1, 'd', 3, test: 'test' ]
    console.log(data);//[ 'b', 9, -1, {}, 'hello', 1, 'd', 3, test: 'test' ] 会改变数据本身

    //sort()方法，将数组元素按指定顺序排序并返回排序后的数组，数组元素默认按照字母表顺序排序
    //始末状态：会改变数组本身
    //参数：可传入一个比较函数作为参数
    var data=["z","x","p",5,4,3,2,1,12,19,25,21," ",""];
    data["test"]="test";
    console.log(data.sort());
    //[ '', ' ', 1, 12, 19, 2, 21, 25, 3, 4, 5, 'p', 'x', 'z', test: 'test' ]
    //解析:虽然"2"的值比"12","19"要小,但是按照字符串比较时,"12","19",位于"2"前面，可以看出,数组元素默认按照字母表顺序排序

    //比较函数，接受两个参数:
    //如果第一个参数应该位于第二个之前则返回一个负数
    //如果两个参数相等则返回0
    //如果第一个参数应该位于第二个之后则返回一个正数
    //原理：类似于冒泡排序

    function compare(a,b){return a-b}//从小到大排序
    var data=[5,4,3,2,1,12,19,25,21];
    data.sort(compare);
    console.log(data);//[ 1, 2, 3, 4, 5, 12, 19, 21, 25 ]

    //原理：如果把上面的比较函数稍加修改,并记录下比较次数和比较的元素，
    //输出结果可以看到,一共调用了15次，每次将元素两两比较,仔细查看结果类似于冒泡排序
    var count=0,result="";
    function compare(a, b) {
        //other code
        result+="#"+(++count)+"->"+a+"和"+b+"比较 ";
        if (a < b) {
            return -1;
        }
        else if (a > b) {
            return 1;
        }
        else {
            return 0;
        }        
        //other code
    }
    console.log(result);
    //#1->5和4比较 #2->5和3比较 #3->4和3比较 #4->5和2比较 #5->4和2比较 #6->3和2比较 #7->5和1比较 #8->4和1比较 
    //#9->3和1比较 #10->2和1比较 #11->5和12比较 #12->12和19比较 #13->19和25比较 #14->25和21比较 #15->19和21比较

    // concat()方法，创建并返回一个新数组，新数组元素包括调用concat()方法的原始数组的元素和concat()中的每个参数
    // 如果concat()参数中的任意一个参数是数组,则返回的是该数组中的元素，而不是该数组本身
    // 始末状态：不会改变数组本身
    // 参数：任意类型
    var data=[1,2,3];
    console.log(data.concat(0,[11,22],[ 33, [44] , [ {} , [55] , "test"], 66] ));
    //[ 1, 2, 3, 0, 11, 22, 33, [ 44 ], [ {}, [ 55 ], 'test' ], 66 ]
    //解析：(1,2,3)为数组原来的元素,所以直接返回,concat()中有3个参数,其中两个是数组,简化后相当于data.concat(0,[数组一],[数组二])
    //因此返回的是0,和[数组一]、[数组二]里面的元素(数组里面元素可以是任意类型,因此元素也可以是数组)
    console.log(data);//[ 1, 2, 3 ]

    //slice()方法,返回指定数组的一个片段或者子数组
    //始末状态: 不会改变数组本身
    //参数：可不带参数或一个参数或两个参数,只有一个参数时,返回指定位置开始到当前数组末尾的所有项,负数表示倒数第几个数
    //参数一：截取字符串的起始位置 参数二：截取字符串的结束位置(截取时不包括该位置的字符) 不带参数：与 Array.prototype.slice(0)返回的结果一样
    var data=[1,2,3,4,5,6,7,8];
    data["test"]="test";
    console.log(data.slice(3));//[ 4, 5, 6, 7, 8 ] 从下标位3的位置开始一直到数组末尾
    console.log(data.slice(2,-1));//[ 3, 4, 5, 6 ] 从下标位2的位置开始一直到数组倒数第二个数(截取时不包括该位置的字符)
    console.log(data);//[ 1, 2, 3, 4, 5, 6, 7, 8, test: 'test' ]

    //splice()方法,在数组中插入或删除元素，返回在数组中删除的元素
    //始末状态：会改变数组本身
    //参数：可有一个或两个参数或多个，只有一个参数时,从起始位置到数组末尾的所有元素都将被删除(这里指有索引的元素，前面已经提过了)
    //参数一：插入或删除的起始位置 参数二：从数组中删除的元素个数 参数二后面的参数：这些参数将会插入数组参数一中的位置
    var data=[1,2,3,4,5,6,7,8];
    data["test"]="test";
    console.log(data.splice(6));//[ 7, 8 ]
    console.log(data);//[ 1, 2, 3, 4, 5, 6, test: 'test' ]
    console.log(data.splice(3,2));//[ 4, 5 ]
    console.log(data);//[ 1, 2, 3, 6, test: 'test' ]
    console.log(data.splice(2,0,11,[22],{}),data);
    //输出：[] ，从下标为2的位置开始删除0个元素(即不删除),在将后面的参数插入数组,插入位置是下标2的位置(即参数一)
    console.log(data);//[ 1, 2, 11, [ 22 ], {}, 3, 6, test: 'test' ]

    //push()方法，在数组末尾添加参数，并返回修改后数组的长度(即length的值)
    //始末状态：会改变数组本身
    //参数：任意个任意类型的参数
    var data=[1,2,3];
    data["test"]="test";
    console.log(data.push(4,[5],{}));//6
    console.log(data);//[ 1, 2, 3, 4, [ 5 ], {}, test: 'test' ]

    //pop()方法,删除并返回数组最后一个元素
    //始末状态：会改变数组本身
    //参数：无
    var data=[1,2,3];
    data["test"]="test";
    console.log(data.pop());//3 删除被返回元素 3
    console.log(data);//[ 1, 2, test: 'test' ]

    //unshift()方法,与push()类似,只不过添加的参数是在数组开头
    //shift()方法,与pop()类似,只不过删除的参数是在数组开头

    //forEach()方法，对数组中的每一项运行给定函数，无返回值
    //始末状态：不会改变数组本身
    //参数：给定的函数
    //函数参数：可以有3个参数，参数一：当前数组元素 参数二：当前元素索引 参数三：数组本身
    var data=[1,2,3,{}];
    var count=0;
    data["test"]="test";
    console.log(data.forEach(function(item,index,arr){count++;}));//undefined 无返回值
    console.log(data,"count:"+count);//[ 1, 2, 3, {}, test: 'test' ] 'count:4' 可以看出循环了4次

    //map()方法，将数组每个元素传递给指定函数，返回一个数组，该数组包含指定函数的返回值
    //始末状态：不会改变数组本身
    //参数：给定的函数
    //函数参数：可以有3个参数，参数一：当前数组元素 参数二：当前元素索引 参数三：数组本身
    var data=[1,2,3,4,5];
    data["test"]="test";
    console.log(data.map(function(item,index,arr){return item*2;}));//[ 2, 4, 6, 8, 10 ]
    console.log(data);//[ 1, 2, 3, 4, 5, test: 'test' ]

    //filter()方法，对数组中的每一项运行给定函数，返回指定函数运行结果为true 的项组成的数组
    //始末状态：不会改变数组本身
    //参数：给定的函数
    //函数参数：可以有3个参数，参数一：当前数组元素 参数二：当前元素索引 参数三：数组本身
    var data=[1,2,3,4,5];
    data["test"]="test";
    console.log(data.filter(function(item,index,arr){return item%2==0;}));//[ 2, 4 ] 过滤出偶数
    console.log(data);//[ 1, 2, 3, 4, 5, test: 'test' ]

    //every()方法,对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true
    //始末状态：不会改变数组本身
    //参数：给定的函数
    //函数参数：可以有3个参数，参数一：当前数组元素 参数二：当前元素索引 参数三：数组本身
    var data=[1,2,3,4,5];
    data["test"]="test";
    console.log(data.every(function(item,index,arr){return item%2==0;}));//false 部分返回 true
    console.log(data.every(function(item,index,arr){return item>0;}));//true 全部都返回 true
    console.log(data);//[ 1, 2, 3, 4, 5, test: 'test' ]

    //some()方法,对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true
    //始末状态：不会改变数组本身
    //参数：给定的函数
    //函数参数：可以有3个参数，参数一：当前数组元素 参数二：当前元素索引 参数三：数组本身
    var data=[1,2,3,4,5];
    data["test"]="test";
    console.log(data.some(function(item,index,arr){return item%2==0;}));//true 部分返回 true
    console.log(data.some(function(item,index,arr){return item>0;}));//true 全部都返回 true
    console.log(data);//[ 1, 2, 3, 4, 5, test: 'test' ]

    //reduce()方法，按照指定函数，迭代数组的每一项，然后返回一个构建的最终值
    //始末状态：不会改变数组本身
    //参数：参数一：执行简化操作的函数 参数二(可选)：传递给函数的初始值，当没有改参数时会将数组的第一个元素作为初始值
    //函数参数：可以有4个参数，参数一：当前为止累计操作的结果 参数二：当前数组元素 参数三：当前元素索引 参数四：数组本身
    var data=[1,2,3,4,5];
    data["test"]="test";
    console.log(data.reduce(function(x,y){return x+y},10));//25 (即10+1+2+3+4+5的累加结果)
    console.log(data.reduce(function(accumulative,item,index,arr){
        console.log("accumulative:"+accumulative); 
        return accumulative+item
    }));//accumulative:1(数组第一个元素作为初始值) accumulative:3(1+2) accumulative:6(3+3) accumulative:10(6+4) ,15 (即1+2+3+4+5的累加结果)
    console.log(data);//[ 1, 2, 3, 4, 5, test: 'test' ]

    //reduceRight()方法,与reduce()，不过是按照索引从高到低运算
    var data=[1,2,3,4,5];
    data["test"]="test";
    console.log(data.reduceRight(function(x,y){return x+y},10));//25 (即10+1+2+3+4+5的累加结果)
    console.log(data.reduceRight(function(accumulative,item,index,arr){
        console.log("accumulative:"+accumulative); 
        return accumulative+item
    }));//accumulative:5(数组最后一个元素作为初始值) accumulative:9(5+4) accumulative:12(9+3) accumulative:14(12+2) ,15 (即5+4+3+2+1的累加结果)
    console.log(data);//[ 1, 2, 3, 4, 5, test: 'test' ]

    
    //indexOf()方法，搜索整个数组中具有给定值得元素,返回找到的第一个元素的索引，没有找到则返回-1
    //始末状态：不会改变数组本身
    //参数：参数一：要搜索的元素(这里指有索引的元素，前面已经提过了) 参数二(可选)：指定从哪个元素开始搜索,默认为0，负数表示从倒数第几个数开始
    var data=[1,1,2,3,4,5,{},"str","str",6,7];
    data["test"]="test";
    console.log(data.indexOf(1),data.indexOf("str",-4),data.indexOf("test"));//0 7 -1
    //解析：对于元素“1”，找到遇到的第一个“1”,返回该元素下标"0"。对于元素"str"，从倒数第4个数(即从左往右的第一个“str”)开始搜索,
    //找到遇到的第一个"str",返回该元素下标“7”。对于"test",由于这里是指有索引的元素,因此没有找到对应的元素,返回"-1"

    //lastIndexOf()方法，与indexOf()方法类似,只不过搜索的方向是从数组尾部开始搜索
    var data=[1,1,2,3,4,5,{},"str","str",6,7];
    data["test"]="test";
    console.log(data.lastIndexOf(1),data.lastIndexOf("str",-4),data.lastIndexOf("test"));//1 7 -1
    //解析：对于元素“1”,因为是从尾部开始搜索,所以先遇到的是数组中的第二个"1",返回该元素下标"1"。
    //对于"str"和“test"解析同上