必威体育Betway必威体育官网
当前位置:首页 > IT技术

JS数组(Array)应用大全!!!

时间:2019-08-22 17:12:10来源:IT技术作者:seo实验室小编阅读:60次「手机版」
 

js数组

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

一、生成数组

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);

                                                                                                                                               ......完                                                                                                                                        

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

相关阅读

分享到:

栏目导航

推荐阅读

热门阅读