JS数组（Array）应用大全！！！

                                                         【书山有路勤为径，学海无涯苦作舟】

一、生成数组

1、使用Array构造函数：  var arr = new Array(10);   //创建一个包含10项的数组    

2、使用数组字面量表示法： var arr1 = [10];
// console.log(arr)   //[]
// console.log(arr1)  //[10]

 

二、数组方法

var arr2 = ['nice', 'hello', 'good', 'hi'];
var arr3 = [100, 21, 3, 14, 85, 36];
 var arr4 = ['a', 'b', 'c', 'd', 'e', 'f'];

1、join()    

 join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用'逗号'为分隔符，该方法只接收一个参数：即分隔符。

      var arr5 = arr2.join("-");
//var arr6 = arr3.join("-");
//console.log(arr2)   //['nice', 'hello', 'good', 'hi'];
//console.log(arr3)     //[1, 2, 3, 4, 5, 6]
//console.log(arr5)    //nice-hello-good-hi
//console.log(arr6)     //1-2-3-4-5-6
//此方法不改变原数组，只是将数组转变为字符串输出。

//通过join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串，函数如下：
                function repeatString(str,n) {
                    return new Array(n+1).join(str);
                }
// console.log(repeatString("abc",3));          // abcabcabc
//console.log(repeatString("Hi",5));           //HiHiHiHiHi
    

2、push()和pop()
//push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度,原数组发生改变。 
//pop()：数组末尾移除最后一项，减少数组的 length值，然后返回移除的项，原数组发生改变。
//var len1 = arr2.push("haha")
//var len2 = arr2.push(...arr4)
//console.log(len1)   //5
//console.log(len2)   //11
// console.log(arr2)    //['nice', 'hello', 'good', 'hi', "haha", "a", "b", "c", "d", "e", "f"]
//返回尾部添加后的新数组长度，原数组发生改变
                
// var str1 = arr2.pop()
// console.log(str1)   //f   
// console.log(arr2)    //['nice', 'hello', 'good', 'hi', "haha", "a", "b", "c", "d", "e"]
// console.log(arr2.length)    //10
//  返回尾部被删除的元素，原数组发生改变
                
                
3、unshift() 和 shift()
//unshift:将参数添加到原数组开头，并返回数组的长度 。
//shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。 
//这组方法和上面的push()和pop()方法正好对应，一个是操作数组的开头，一个是操作数组的结尾。
// var len3 = arr2.unshift(10)
// var len4 = arr2.unshift(...['a','b','c'])
//  console.log(len3)   //5
//   console.log(len4)   //8
//  console.log(arr2)    //["a", "b", "c", 10, 'nice', 'hello', 'good', 'hi']
//返回头部添加后的新数组长度，原数组发生改变
                
//var str2 = arr2.shift()
//console.log(str2)    //a
//console.log(arr2)    //["b", "c", 10, 'nice', 'hello', 'good', 'hi']
//返回头部被删除的元素，原数组发生改变

4、sort()：按升序排列数组项----即最小的值位于最前面，最大的值排在最后面(比较的是ASCII码表的值)。
//在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况：
// var arr7 = arr2.sort()
// var arr8 = arr3.sort()
//  console.log(arr2)        //["good", "hello", "hi", "nice"]
//  console.log(arr3)        //[100, 14, 21, 3, 36, 85]
//  console.log(arr7)        //["good", "hello", "hi", "nice"]
//   console.log(arr8)        //[100, 14, 21, 3, 36, 85]
//返回被sort后的新的数组，原数组也随之改变
                
 //为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：
                function compare(a,b){
                    if(a>b){return 1}
                    else if(a<b){return -1}
                    else {return 0}
                }
                function sort(a,b){
                    return a-b;
                }
//  var arr9 = arr2.sort(sort)
// var arr10 = arr3.sort(sort)
//  console.log(arr2)        //["good", "hello", "hi", "nice"]
//  console.log(arr3)        //[3, 14, 21, 36, 85, 100]
// console.log(arr9)        //["good", "hello", "hi", "nice"]
//  console.log(arr10)        //[3, 14, 21, 36, 85, 100]
//返回被sort后的新的数组，原数组也随之改变
                
                
5、reverse()
//reverse()：反转数组项的顺序。
// var arr11 = arr2.reverse()
// console.log(arr2)        //["hi", "good", "hello", "nice"]
// console.log(arr11)        //["hi", "good", "hello", "nice"]
//返回reverse之后的新数组，原数组随之改变
                
//反转字符串的方法
                function reverseString(str){
                    return str.split(" ").reverse().join(" ");
                }
// console.log(reverseString("hello World !"))   //! World hello

6、concat()
//concat() ：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。
// var arr12 = arr2.concat("bye",arr3)
//  console.log(arr2)        //["nice", "hello", "good", "hi"]
//  console.log(arr3)        //[100, 21, 3, 14, 85, 36]
//    console.log(arr12)        //["nice", "hello", "good", "hi", "bye", 100, 21, 3, 14, 85, 36]
//从上面测试结果可以发现：传入的不是数组，则直接把参数添加到数组后面，如果传入的是数组，则将数组中的各个项添加到数组中。
 //不改变原数组
  //但是如果传入的是一个二维数组呢？
// var arr13 = arr2.concat("tom",["hh",["ad","hp"]])
// console.log(arr2)        //["nice", "hello", "good", "hi"]
//console.log(arr13)        //["nice", "hello", "good", "hi", "tom", "hh", Array[2]]
// console.log(arr13[6])    //["ad", "hp"]
//不会展开二维数组的每一项
                
                
7、slice()
 //slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
//var arr14 = arr3.slice(1)
//var arr15 = arr3.slice(1,5)
// var arr16 = arr3.slice(2,-3)
// var arr17 = arr3.slice(-6,-3)
// console.log(arr3)    //[100, 21, 3, 14, 85, 36]
// console.log(arr14)    //[21, 3, 14, 85, 36]
// console.log(arr15)    //[21, 3, 14, 85]
//console.log(arr16)    //[3]
//console.log(arr17)    //[100, 21, 3]
 //返回从原数组中指定开始下标到结束下标（被截取）之间的项组成的新数组。原数组不会发生改变。当参数出现负数时，将负数加上原数组长度的值（6）来替换该位置的数即可。
                
                
8、splice()
//splice()：很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。 
//注意：该方法会改变原始数组。
//arrayObject.splice(index,howmany,item1,.....,itemX)
 /* 参数1： 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。    index，数组的索引值
* 参数2： 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
 * 参数3： 可选。向数组添加的新项目。
   * */
// var arr18= arr2.splice(1,3)       //在['nice', 'hello', 'good', 'hi']数组index1后做删除['hello', 'good', 'hi']操作。（相当于删除）
//console.log(arr2)    //["nice"]
//console.log(arr18)    //["hello", "good", "hi"]
// var arr19= arr2.splice(1,0,"ph","hty")            //在["nice"]数组index1后做添加["ph","hty"]操作。（相当于添加）
//console.log(arr2)    //["nice", "ph", "hty"]
//console.log(arr19)    //[]
// var arr20 = arr2.splice(1,2,"ph","hty","fd")     //在["nice", "ph", "hty"]数组index1后做删除["ph","hty"]，然后再添加  ["ph", "hty", "fd"]操作。（相当于替换）
//console.log(arr2)    //["nice", "ph", "hty", "fd"]
//console.log(arr20)    //["ph", "hty"]
 //返回被删除的数组，如果没有删除项，则返回空数组[],原数组发生相应的改变。

                
9、indexOf()和 lastIndexOf()
 //indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。 
//lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。
//这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符。
//     index：  0 1 2 3 4 5 6 7 8 9 10         
//var arr21 = [1,3,5,5,7,7,5,5,5,3,1];
// console.log(arr21.indexOf(5));        //2
// console.log(arr21.lastIndexOf(5));        //8
// console.log(arr21.indexOf(5,4));        //6
//注释：从index4的位置（即数组第一个7）开始往数组后查询5所在本数组的index首次出现的位置，即index6所在的位置5
//console.log(arr21.lastIndexOf(5,5));        //3
//注释：从index5的位置（即数组第二个7）开始往数组前查询5所在本数组的index首次出现的位置，即index3所在的位置5
// console.log(arr21.indexOf("5"));        //-1
//返回被查找项的位置索引，如果找不到就返回-1。  
//注意：索引是从正数第一个（index0）开始，不存在逆向

补充：

                                
10、forEach()
//forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参
//arr.forEach(function(item,index,items){})
/*参数1：遍历的数组内容item
 * 参数2：对应的数组索引 index
 * 参数3：数组本身items
 */
      /*var arr22= [1, 2, 3, 4, 5];
      arr22.forEach(function(x,index,a){
           console.log(x + '|' + index + '|' + (a === arr22));
      });*/
       //1|0|true
       //2|1|true
       //3|2|true
       //4|3|true
       //5|4|true
                
                
11、map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
//map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。
//.map(callback(index,domElement))
//由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。
                /*var arr23 = [1, 2, 3, 4, 5];
                var arr24 = arr23.map(function(item){
                    console.log(item)
                    return item*item
                })*/
//console.log(arr23)      //[1, 2, 3, 4, 5]
//console.log(arr24)   //[1, 4, 9, 16, 25]

12、filter()
//filter(fn(item,index){})：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
                /*var arr25 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
                var arr26 = arr25.filter(function(x,index) {
                    return index % 3 === 0 || x >= 8;
                });*/
//console.log(arr26);        //[1, 4, 7, 8, 9, 10]

        
13、every()
//every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
                /*var arr27 = [1, 2, 3, 4, 5];
                var arr28 = arr27.every(function(x){
                    return x < 10;
                });*/
//console.log(arr28)    //true
                
                
14、some()
//some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
                /*var arr29 = [1, 2, 3, 4, 5];
                var arr30 = arr29.some(function(x){
                    return x < 2;
                });*/
// console.log(arr30)    //true

15、reduce()和 reduceRight()
//这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。
//这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。
//传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
                /*var arr31 = [1,2,3,4,5];
                var arr32 = arr31.reduce(function(pre,cur,index,items){
                    console.log(pre)
                    console.log(cur)
                    console.log(items)
                    console.log(index)
                    return pre * cur;
                },10)*/
//console.log(arr32);

 

                                                                                                                                                       ......完                                                                                                                                        

                                                                                       【根据自己的理解手敲，如有错误，请留言指正，待大神指点】...