为了方便大家的理解和使用，我会将这些方法进行分类讲解和分析

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //1：数组的定义
  10.             var colors0=new Array();    //创建数组
  11.             var colors1=new Array(20);    //创建数组并指定长度
  12.             var colors2=new Array(\'red\',\'blue\',\'green\');//定义数组并赋值
  13.             var colors3=[];//字面量定义空数组
  14.             console.log(colors0.length);//0
  15.             console.log(colors1.length);//20
  16.             console.log(colors2.length);//3
  17.             //2：数组的访问和修改
  18.             console.log(colors2[0]);//访问数组 red
  19.             colors2[1]=\'小明\';    //修改数组下标中的值
  20.             console.log(colors2[1]);
  21.             //3.遍历数组
  22.             for(var i=0;i<colors2.length;i++){
  23.                 console.log(colors2[i]);//red,小明，green
  24.             }
  25.             
  26.         </script>
  27.     </body>
  28. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>数组中的栈方法</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             var colors=new Array();    //创建数组
  10.             var count=colors.push(\'red\',\'green\')//向数组的结尾添加元素
  11.             console.log(colors);    //red,green
  12.             count=colors.push(\'black\');    
  13.             console.log(colors);    //red,green,black
  14.             var item=colors.pop();//移除数组的最后一项
  15.             console.log(item);    //black
  16.             
  17.             
  18.         </script>
  19.     </body>
  20. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>数组中的队列方法</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             var colors=new Array();//创建数组
  10.             var count=colors.push(\'red\',\'green\');    //推入两项
  11.             console.log(count);//2
  12.             count=colors.push(\'black\');    //推入另一项
  13.             console.log(count);//3 
  14.             var item=colors.shift();//取得第一项
  15.             console.log(item);    //red 
  16.             console.log(colors.length);//2
  17.             
  18.             var color=new Array();    //创建数组
  19.             var c=color.unshift(\'red\',\'green\');//推入两项
  20.             console.log(c);//2
  21.             c=color.unshift(\'black\');
  22.             console.log(c);//3
  23.             var i=color.pop();
  24.             console.log(i);//green
  25.             console.log(color.length);//2
  26.         </script>
  27.     </body>
  28. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>数组中的重排序方法</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //reverse()方法和sort()方法
  10.             //1：测试reverse()方法
  11.             var values1=[1,2,3,4,5];
  12.             values1.reverse();    //将数组进行反转
  13.             console.log(values1);//5,4,3,2,1
  14.             
  15.             //2：测试sort()方法
  16.             var values2=[0,1,5,10,15];
  17.             values2.sort();//将数组进行排序，比较ASCII编码
  18.             console.log(values2);//0,1,10,15,5
  19.             
  20.             //3：sort()方法接受函数实现升序
  21.             function descArray(a,b){
  22.                 if(a<b){
  23.                     return -1;
  24.                 }else if(a>b){
  25.                     return 1;
  26.                 }else{
  27.                     return 0
  28.                 }
  29.             }
  30.             var item=[0,1,3,2,4];
  31.             item.sort(descArray);
  32.             console.log(item);    //0,1,2,3,4    
  33.             
  34.             //4：sort()方法接受函数实现降序
  35.             function ascArray(a,b){
  36.                 if(a<b){
  37.                     return 1;
  38.                 }else if(a>b){
  39.                     return -1;
  40.                 }else{
  41.                     return 0;
  42.                 }
  43.             }
  44.             var items=[10,1,2,4,6,5,7];
  45.             items.sort(ascArray);
  46.             console.log(items);//10,7,6,5,4,2,1
  47.             
  48.         </script>
  49.         
  50.     </body>
  51. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>数组中的操作方法</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //1：测试操作方法concat()
  10.             var colors1=[\'red\',\'blue\',\'green\'];
  11.             var colors2=colors1.concat(\'yellow\',[\'black\',\'brown\']);
  12.             console.log(colors1);    //red,blue,green
  13.             console.log(colors2);    //red,blue,green,yellow,black,brown
  14.             //2:测试操作方法splice(startIndex,[endIndex]);
  15.             var colors3=[\'red\',\'green\',\'blue\',\'yellow\',\'purple\'];
  16.             var colors4=colors3.splice(1);
  17.             var colors5=colors3.splice(1,4);
  18.             console.log(colors4);    //green,blue,yellow,purple
  19.             console.log(colors5);    //green,blue,yellow
  20.             //3:测试splice()方法
  21.             //(1):测试splice()删除方法
  22.             //参数：要删除第一项的位置，删除的项数
  23.             var item=[\'red\',\'blue\',\'green\'];
  24.             var removed=item.splice(0,1);
  25.             console.log(removed);//red
  26.             console.log(item);//blue,green
  27.             //(2):测试splice()添加方法
  28.             //参数：起始位置，0(要删除的项数)，要插入的项
  29.             removed=item.splice(1,0,\'yellow\',\'orange\');
  30.             console.log(removed);//返回一个空的数组，因为移除的项为0
  31.             console.log(item);    //blue,yellow,orange,green
  32.             //(3):测试splice()修改方法
  33.             //参数：起始位置，删除的项数，插入的任一项
  34.             removed=item.splice(1,1,\'red\',\'purple\');
  35.             console.log(removed);//yellow
  36.             console.log(item);//blue,red,purple,orange,green
  37.         </script>
  38.     </body>
  39. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>数组中转换方法</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             var colors=[\'red\',\'green\',\'blue\'];//创建一个包含三个字符串的数组
  10.             //1:测试toString()方法
  11.             console.log(colors.toString());    //red,green,blue
  12.             //2：测试join()方法
  13.             var item=[\'red\',\'blue\',\'green\'];
  14.             console.log(item.join(\'|\'));//red|blue|green
  15.             console.log(item.join(\'||\'));//red||blue||,green
  16.         </script>
  17.     </body>
  18. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>数组中的迭代方法</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //迭代方法:every(),filter(),forEach(),map(),some()
  10.             //传递参数，数组项的值，数组中的位置，数组对象本身
  11.             var numbers=[1,2,3,4,5,4,3,2,1];
  12.             //1:测试erery()函数
  13.             var everyResult=numbers.every(function(item,index,array){
  14.                 return item>2;
  15.             });
  16.             console.log(everyResult);//false
  17.             //2:测试some()函数
  18.             var someResult=numbers.some(function(item,index,array){
  19.                 return item>2;
  20.             });
  21.             console.log(someResult);//true
  22.             //3:测试filter()函数
  23.             var filterResult=numbers.filter(function(item,index,array){
  24.                 return item>2;
  25.             });
  26.             console.log(filterResult);//3,4,5,4,3
  27.             //4：测试map()函数
  28.             var mapResult=numbers.map(function(item,index,array){
  29.                 return item*2;
  30.             });
  31.             console.log(mapResult);//2,4,6,8,10,8,6,4,2
  32.             //5：测试forEach()函数
  33.             numbers.forEach(function(item,index,array){
  34.                 //执行某些操作
  35.                 console.log(item);//1,2,3,4,4,3,2,1
  36.             })
  37.             
  38.             
  39.         </script>
  40.     </body>
  41. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>数组中的归并方法</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             //归并方法：reduce()和reduceRight()
  10.             //传递参数：前一个值，当前值，项的索引，数组对象
  11.             var array=[1,2,3,4,5]
  12.             //1：测试reduce()方法
  13.             var sum1=array.reduce(function(prev,cur,index,array){
  14.                 return prev+cur;
  15.             });
  16.             console.log(sum1);//15
  17.             //2：测试reduceRight()方法
  18.             var sum2=array.reduceRight(function(prev,cur,index,array){
  19.                 return prev+cur;
  20.             });
  21.             console.log(sum2);//15
  22.         </script>
  23.     </body>
  24. </html>

 

版权声明：本文为jjgw原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/jjgw/p/11608609.html