引用类型之数组array最全的详解

Array类型

今天总结一下array类型。 js中的数组是有着非常强大的功能。具有很大的灵活性，有两个方面的特点

1、数组的每一项可以保存任何的数据类型；2、数组大小可以动态的调整；看下面的例子：

           var one=new Array();      //空数组
           var two=new Array(5)      //length为5的数组
           var three=new Array("double",3)   //包含double和3的数组

           var four=[]               //用[]表示
           var five=[1,2,3,4]
           console.log(five[0])      //1 数组的索引从0开始，length-1
           console.log(five.length)  //4 数组大小length为4
           five.length=10
           console.log(five[4])      //索引从4到9都是undefined

检测类型

前面谈过，对于引用类型，可以用instanceof来检测，可以得到对象是不是数组，这只适合于只有一个全局环境。对于具有几个全局环境，可以用ES5新增的Array.isArray()方法

          var one=[]
          if(one instanceof Array){
                  console.log("true")
          }

          if(Array.isArray(one)){
                  console.log("true")    IE9支持
          }

转换方法

我们所知道的，所有对象都有toString()、toLocaleString()、valueOf()的方法

对于数组而言：valueOf()返回的是数组本身；toString()返回数组中每个值得字符串形式拼接而成的一个有逗号分隔开的字符串（数组的每一项都会调用toString()方法）

          var one=[1,"2","great"];
          var two=one.toString();         //数组每一项都调用toString()方法，组成的字符串
          var three=one.valueOf();        //返回数组本身
          var four=one.toLocaleString()   //数组的每一项都调用toLocaleString()方法，组成字符串

          console.log(typeof two)         //string
          console.log(typeof two[0])      //string
          console.log(Array.isArray(three))    //true
          console.log(typeof four)        //string
          console.log(typeof four[0])     //string

          var first=[1,2,3,4]
          console.log(first.join("||"))   //join()方法主要是连接，默认还是逗号的

补充一下关于toString()和toLocaleString()之间的区别，主要体现在日期和数字上

         1、日期上的区别，locale代表的是国际化和本土化中的概念
         var date=new Date();
         console.log(date.toString())        //默认的日期 Mon Jan 29 2018 16:01:34 GMT+0800 (中国标准时间)
         console.log(date.toLocaleString())  //本地化日期 2018/1/29 下午4:01:34

         2、数字超过3位数的区别
         var num1=100;
         var num2=1000000;
         console.log(num1.toString())        //
         console.log(num1.toLocaleString())  //
         console.log(num2.toString())        //
         console.log(num2.toLocaleString())  //1,000,000 每3个0都会有逗号

操作数组的方法

栈方法（后进先出）：push()，推入和pop()，弹出两种

         var one=[1,2]
         one.push(3,4)       //在末尾添加3,4
         console.log(one)    //1,2,3,4
         var two=one.pop()   //删除并返回末尾数
         console.log(one)    //1,2,3
         console.log(two)    //

队列方法（先进后出）：shift()，移除和unshift()，增加两种

         var one=[1,2]
         one.unshift(3,4)    //在开头添加3,4
         console.log(one)    //3,4,1,2
         var two=one.shift()   //删除并返回第一数
         console.log(one)    //2,3,4
         console.log(two)    //

重新排序方法：reverse()和sort()方法，他们的返回值是排序后的数组

        //reverse()方法
        var one=[1,2,3,4]
        console.log(one.reverse())   //4,3,2,1 翻转数组项的顺序

        //sort()方法
        var two=[0,5,10,15]
        console.log(two.sort())      //0,10,15,5  sort方法默认是升序排列,先回把每一项调用toString()方法，按照string的规则进行排序

        //sort接受比较函数
        //普通的比较
        var three=[0,5,10,15]
        var threes=three.sort(rank1)  //调用比较函数
        function rank1(num1,num2){
               if(num1<num2){
                      return -1
               }
               if(num1>num2){
                      return 1
               }
               else{
                      return 0
               }
        }
        function rank2(num1,num2){      //或者这样
                return num1-num2        //num1-num2为升序;num2-num1为降序
               }
        console.log(threes)             //0,5,10,15     

        //对象的比较
        var objectList=[]
        function person(name,age){
            this.name=name;
            this.age=age;
        }
        objectList.push(new person("double",5))
        objectList.push(new person("single",15))
        objectList.push(new person("another",10))

        objectList.sort(function rank(a,b){    //比较函数进行排序
               return a.age-b.age
        })

        for(var i=0;i<objectList.length;i++){  //遍历一遍
             console.log("name"+objectList[i].name+" age"+objectList[i].age)
        }

concat()方法：基于当前数组中的所有项创建一个新数组（先创建当前数组的一个副本，将接受到的参数添加到该数组的末尾），对原数组没有影响。

slice()方法：基于当前数组中的一项或多项创建一个新的数组，规则比较多，对原数组没有影响。

这两种方法值得注意，对原数组没有影响；而其他方法是基于原数组的操作

       var one=[1,2,3]
       var two=one.concat(4,5,[6,7])
       console.log(one)      //[1,2,3]    创建了副本
       console.log(two)      //[1,2,3,4,5,6,7]

       var one=[1,2,3,4,5]

       console.log(one.slice())        //截取整个数组
       console.log(one.slice(3))       //4,5   索引3开始到结束
       console.log(one.slice(0,3))     //1,2,3 不包括索引3
       console.log(one.slice(1,-1))    //出现负数，-1为倒数第一,-2为倒数第二
       console.log(one.slice(-4,-1))   //都加上length再说,2,3,4

修改数组项的万能大法：splice()方法

删除：指定2个参数，要删除的第一项位置和删除的项数

插入：指定3个参数，起始位置，0（要删除的项数），要插入的项

替换：指定3个参数，起始位置，要删除的项，要插入的任意数量的项

       var one=["a","b","c","d"]
       one.splice(3,1)           //d
       console.log(one)          //a,b,c
       one.splice(2,0,"e","f")
       console.log(one)          //a,b,e,f,c    添加是在前面添加
       one.splice(2,1,"g","h")
       console.log(one)          //a,b,g,h,f,c

位置方法

indexOf()和lastIndexOf()方法，要查找的项和（可选的）表示查找起点位置的索引；indexOf从数组的开头开始向后查找，lastIndexOf从数组前面查找

都返回要查找项在数组中的位置，找不到就返回-1，会使用全等操作符

      var one=[1,2,3,2,4]
      console.log(one.indexOf(1))     //0 返回的是要查找项的索引值
      console.log(one.indexOf("1"))   //-1 因为比较使用的是全等操作符，所以找不到直接返回-1
      console.log(one.indexOf(4,2))   //5 从索引为2开始查找
      console.log(one.lastIndexOf(2)) //

迭代方法

es5规定的5种迭代方法，接受两个参数：每一项上运行的函数和（可选）运行该函数的作用域对象——影响this值

函数接受三个参数：item数组中的每个元素；index数组中每个元素的索引；array数组本身；item为必选，其他为可选

      every和some是数组的逻辑判定，对数组应用指定的函数判断，返回布尔值
      every传入的函数每一项都返回true才返回true，相当于&&
      而some传入的函数的任意一项返回true就会返回true，相当于||
      var one=[1,2,3,4,5]
      var everyResult=one.every(function(item,index,array){
                 return item>4
      })
      console.log(everyResult)      //flase 不是每一项都大于4

      var someResult=one.some(function(item,index,array){
                 return item>4
      })
      console.log(someResult)       //true  存在大于4的项

      filter返回一个数组，该数组的元素为指定检查数组中满足函数条件的所有元素
      var one=[1,2,3,4,5,6]
      var filterResult=one.filter(function(item,index,array){
                return item>4
      })
      console.log(filterResult)    //5,6  返回满足条件的数组

      map返回一个数组，该数组的元素为传入函数的结果的集合
      var one=[1,2,3,4]
      var mapResult=one.map(function(item,index,array){
                return item*4
      })
      console.log(mapResult)       //4,8,12,16 返回经过函数的结果的数组

     forEach用于调用数组中每一个元素，将元素返回给回调函数，没有返回值;本质上和使用for循环迭代数组是一样的

     var one=[1,2,3,4,5,6]
     one.forEach(function(item,index,array){
                  console.log(item)         //1——6的迭代
     })

     var two=[1,2,3,4]
     var sum=0
     two.forEach(function(item,index,array){
             sum+=item                //累加
     })
     console.log(sum)                //

     two.forEach(function(item,index,array){
             two[index]=item+1       //元素自加
     })
     console.log(two)               //2,3,4,5

并归方法

reduce()和reduceRight()这两个方法都会迭代数组的所有项，然后构建一个最终返回的值，reduce从数组第一项开始遍历，reduceRight从数组最后一个遍历；

    基本语法为array.reduce(function,initialValue)
    函数接受四个参数：pre,cur,index,array
    如果有初始值，pre就是初始值，没有则pre为数组第一项，cur为数组第二项

    var one=[1,2,3,4]
    var sum=one.reduce(function(pre,cur,index,array){
            return pre+cur
    },0)
    console.log(sum)  //10

    pre为0，cur为1   pre为pre和cur之和1，cur为2  ……一直遍历结束

   对于reduceRight来说，没有初始值，pre就是最后一项，cur为倒数第二项；有初始值则cur为最后一项

最后：ES5中的新方法具有极强功能，代替原来用for循环遍历的种种，下次再用实际项目总结