js-引用类型-Array
1.数组的操作方法
1 <html> 2 <meta http-equiv="content-type" charset="utf-8" /> 3 <title>操作数组的方法，记得跟python类比</title> 4 5 <script type="text/javascript"> 6 var shuzu=new Array("eric","alis","django","tornado"); 7 //数组的合并方法，concat() 8 console.log("数组的合并方法"); 9 //三种不同的数组转换成字符串的方式 10 console.log(shuzu.concat("liuhuan",[2,3,"jim"]).toString()); 11 console.log(shuzu.concat("liuhuan",[2,3,"jim"]).toLocaleString()); 12 console.log(shuzu.concat("liuhuan",[2,3,"jim"].valueOf())); 13 //数组的切片方法,跟python一样顾前不顾后 14 console.log("======================="); 15 console.log(shuzu.slice(2,3)); 16 //数组的最强大的方法splice方法，主要用途是向数组的中部插入项；有返回值，是一个数组（删除的项组成）***** 17 //1.删除 18 console.log("splice,js数组中的超级方法，基友删除和添加，替换的功能"); 19 var spliceDemo=["eric","宋佳",2,3,3,4]; 20 var delArray=spliceDemo.splice(0,2); 21 console.log(delArray.toString()); 22 console.log(spliceDemo); 23 console.log("替换"); 24 var delArray2=spliceDemo.splice(0,0,"lizbeo","liuhuan"); 25 console.log(delArray2); 26 console.log(spliceDemo); 27 console.log("插入,并删除"); 28 var delArray3=spliceDemo.splice(0,2,"lizbeo222",2222); 29 console.log(delArray3); 30 console.log(spliceDemo); 31 </script> 32 <body> 33 <h1>操作数组的方法</h1> 34 </body> 35 </html>
2.迭代方法
1 <html> 2 <head> 3 <meta http-equiv="content-type" charset="utf-8"> 4 <title>迭代方法</title> 5 <script type="text/javascript"> 6 //ECMAScript为数组定义了5个迭代方法。每个方法都接收2个参数：要在每一项运行的函数（可选）和运行该函数的作用域对象 7 //影响this的值。传入这些方法中的函数会接收三个参数：数组项的值，该项在数组中的位置和数组对象本身。根据使用方法的不同，这个函数 8 //执行后的返回值可能会也可能不会影响方法的返回值。 9 /*evary()*/ 10 var shuzu=[1,2,3,4,5,4,3,2,1]; 11 12 var evaryResult=shuzu.every(function(item,index,array){ 13 return item>2; 14 });//结果是flase,因为every顾名思义就是数组中的每个值都要大于2才能得到true结果。 15 console.log(evaryResult); 16 /*some()*/ 17 var someResult=shuzu.some(function(sb,index,array){ 18 return sb>2; 19 }); 20 console.log(someResult); 21 /*filter()监听，监听符合条件的数组并返回数组*/ 22 var filterResult=shuzu.filter(function(item,sf,jfsklfs){ 23 return item>2; 24 }); 25 console.log(filterResult); 26 /*map();对每一项进行操作，返回每一项操作后的数组*/ 27 var mapResult=shuzu.map(function(mapDemo,sb,sjflasjfaslkjflas){ 28 return mapDemo**2; 29 }); 30 console.log(mapResult); 31 //forEach();方法，相当于for迭代遍历数组 32 console.log("====================="); 33 for(var i;i<=shuzu.length;i++){ 34 window.alert(shuzu[i]); 35 }; 36 37 38 39 40 </script> 41 </head> 42 <body> 43 <h1>迭代方法</h1> 44 <h2>其中map是真的有用这种方法，js数组的map方法可以对每一项进行相同的操作，这是多么叼，最关键的是代码很少。</h2> 45 </body> 46 </html>
3.归并方法(从前往后迭代和从后往前迭代)
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta http-equiv="content-type" charset="utf-8"> 5 <title>归并方法</title> 6 <script type="text/javascript"> 7 var shuzu=new Array(); 8 shuzu=[1,2,3,4,5,6]; 9 //求数组中的每一项的和使用reduce(); 10 var sum=shuzu.reduce(function(pre,cur,index,arry3){ 11 return pre+cur; 12 }); 13 console.log(sum); 14 //使用reduceRight()求数组中的所有项的积; 15 var su1=shuzu.reduceRight(function(pre,cur,index,arry33){ 16 return pre*cur; 17 }); 18 console.log(su1); 19 20 var su3=shuzu.reduce(function(pre,cur,index,sjfsl){ 21 return pre*cur; 22 }); 23 console.log(su3); 24 </script> 25 </head> 26 <body> 27 <h1>归并方法</h1> 28 <h2>这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。传给reduce()和reduceRight()的函数接收4个参数</h2> 29 <h2>前一个值，当前值，项的索引和数组对象。这个函数返回的任何值都会作为第一个参数传给下一项。第一次迭代发生在数组的第二项 30 ，因此第一个参数是数组的第一项，第二个参数是数组的第二项。</h2> 31 32 </body> 33 </html>
4.检测数组
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta http-equiv="content-type" charset="utf-8" /> 5 <script type="text/javascript"> 6 /*Javascript中的数组是1.可以存储任意类型 2.动态调整。*/ 7 //创建方式一：使用array的构造函数： 8 var arrryDemo1=new Array(); 9 var arrayDemo2=new Array(3);//创建一个包含3项的数组 10 var arrayDemo3=new Array("alex");//创建一个包含一项的数组 11 console.log(arrayDemo2.length); 12 console.log(arrayDemo3[0]); 13 //创建方式二：使用字面量进行创造 14 var color=["red","blue",234,2.34]; 15 console.log(color.length); 16 console.log(color[3]); 17 console.log("length属性不只是可读，还可以进行赋值"); 18 color.length=5; 19 console.log(color[4]);//undefinend 20 console.log("移除最后一项"); 21 color.length=3; 22 console.log(color[3]);//undefinend 23 24 //检测数组 25 var checkArray=new Array("李泽博","liuhuan",23424); 26 if(checkArray instanceof Array){ 27 console.log("这是数组类型，数组类型是一个内置引用对象，所以我们使用检测方式的时候，使用的是instanceof"); 28 } 29 30 </script> 31 <style type="text/css"> 32 33 </style> 34 </head> 35 <body> 36 <h1>你好，Javascript</h1> 37 </body> 38 </html>
5.位置方法
1 <html> 2 <head> 3 <meta http-equiv="content-type" charset="utf-8" > 4 <title>位置方法</title> 5 6 <script type="text/javascript"> 7 console.log("位置方法"); 8 var indexDemo=new Array(); 9 indexDemo.push("eric","宋佳","李逵"); 10 console.log(indexDemo.indexOf("eric")); 11 //要查找的项是“李逵”，查找的位置索引是1. 12 console.log(indexDemo.lastIndexOf("李逵",2)); 13 </script> 14 </head> 15 <body> 16 <h1>位置方法</h1> 17 <h3>这2个方法都接收2个参数，一个是要查找的项和（可选的）表示查找起点位置的索引。其中 18 indexOf()方法从数组的开始进行查找，而lastIndexOf()是从结尾开始查找。如果没有，返回-1 19 </h3> 20 </body> 21 </html>
6.重排序
1 <html> 2 <head> 3 <meta http-equiv="content-type" charset="utf-8" /> 4 <title>重新排序</title> 5 6 <script type="text/javascript"> 7 var arrayDemo=[1,2,3,4,5]; 8 //reverse() 9 console.log(arrayDemo.reverse()); 10 //sort(); 11 console.log(arrayDemo.sort());//但是sort是以第一个字母进行的排序 12 </script> 13 </head> 14 <body> 15 <h1>reverse，sort</h1> 16 </body> 17 </html>
7.转换方法
1 <!DOCTYPE> 2 <html> 3 <head> 4 <title>转换方法，也就是数组转换成，字符串，因为alert，console可以自动转换成字符串</title> 5 <meta http-equiv="content-type" charset="utf-8"> 6 <script type="text/javascript"> 7 /*转换方法：*/ 8 var shuzu=["eric","hahah ","刘欢"]; 9 console.log(shuzu.toString()); 10 console.log(shuzu.toLocaleString()); 11 console.log(shuzu.valueOf());//返回的是对象 12 alert(shuzu.valueOf());//返回字符串 13 14 //join方法 15 shuzu.join("||"); 16 console.log(shuzu); 17 alert(shuzu); 18 </script> 19 </head> 20 <body> 21 </body> 22 </html
8.FIFO
1 <html> 2 <head> 3 <title>先进先出</title> 4 <meta http-equiv="content-type" charset="utf-8" / > 5 6 <script type="text/javascript"> 7 console.log("先进先出"); 8 var color=new Array(); 9 var count=color.push("eric","bob","刘欢"); 10 console.log("pushi之后数组的长度是:"); 11 console.log(count); 12 console.log("取出来第一个值"); 13 console.log(color.shift()); 14 var count1=color.unshift("pop","shift","unshift"); 15 console.log("使用unshift进行队列压值"); 16 console.log(color.shift());//pop 17 console.log(color.pop());//刘欢 18 19 20 </script> 21 </head> 22 <body> 23 <h1>先进先出</h1> 24 <h2>后压前取，前压后取</h2> 25 </body> 26 <script type="text/javascript"> 27 /*后压前取*/ 28 var shuzu=new Array(); 29 var count=shuzu.push("刘备","张飞","关羽"); 30 console.log("==============="); 31 console.log(shuzu.shift()); 32 console.log(shuzu.pop()); 33 /*前压后取*/ 34 var shuzu2=new Array(); 35 var count2=shuzu2.unshift("诸葛亮","宋江","鲁智深"); 36 console.log("===================="); 37 console.log(count2); 38 console.log(shuzu2.pop()); 39 </script> 40 </html>
9.LIFO
1 <html> 2 <head> 3 <title>后进先出</title> 4 <meta http-equiv="content-type" charset="utf-8" /> 5 <script type="text/javascript"> 6 var color=new Array(); 7 //压进入，后进先出。注意这个函数是有返回值的，返回的是新数组的长度。 8 var count=color.push("red","yellow","black"); 9 console.log("函数的返回值是:"); 10 console.log(count); 11 alert(color.length); 12 alert(color.pop()); 13 </script> 14 </head> 15 <body> 16 <h1>后进先出</h1> 17 </body> 18 </html>
