JavaScript数组详解
JavaScript数组
1.数组的几个特点
（1）数组中可以存放任意类型的数据
（2）可以通过索引号（从0开始）获取或修改数组元素
（3）数组的长度可以通过length属性获取
（4）可以通过for 循环遍历数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> //数组可以存放任意类型的数据 var arr01 = ["zhangsan", "lisi", true, false, 0, -1, undefined, { name: "zahngsan", age: 18 }]; //可以通过索引号获取数组元素，索引号从0 开始 console.log(arr01[0]); console.log(arr01[6]); console.log(arr01[7]); console.log("============================"); //还可以通过索引号修改数组元素 console.log(arr01[5]); arr01[5] = "hello"; console.log(arr01[5]); console.log("============================="); //可以通过length 属性获取数组的长度 console.log(arr01.length); console.log("==============================="); //可以通过for 循环遍历数组元素 for( var i=0;i<arr01.length;i++){ console.log(arr01[i]); } </script> </body> </html>
2.数组对象 Array()
2.1 通过数组对象创建数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 还记得 用 new Object() 创建对象吗，它只能用 = 赋值的方法添加对象的属性和方法 // 而 通过 new Array () 创建对象，则可以直接像其中添加数组元素 var arr01 = new Array("123","zhang",true,123); //for 循环遍历一下 for(var i=0;i<arr01.length;i++){ console.log(arr01[i]); } </script> </body> </html>
2.2 instanceof 运算符 可以用来检测是否为数组，如果是返回 true
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var arr01 = new Array(1,2,3); var arr02 = [1,2,3]; var arr03 = 1; //可以通过 instanceof 运算符检测是否为数组，如果是，返回true console.log(arr01 instanceof Array); console.log(arr02 instanceof Array); console.log(arr03 instanceof Array); </script> </body> </html>
2.3 数组对象的添加删除操作
push() //在末尾添加一个或多个数组元素
unshift() //在开头添加一个或多个元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> var arr = new Array(1,2,3) //push() 在末尾添加一个或多个元素 arr.push(4); arr.push(5,6); for(var i=0;i<arr.length;i++){ console.log(arr[i]); } console.log("===========================") //unshift() 在开头添加一个或多个元素 arr.unshift(0); arr.unshift(-2,-1); for(var i=0;i<arr.length;i++){ console.log(arr[i]); } </script> </body> </html>
pop() //删除末尾的元素
shift() //删除开头的元素
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <script> 10 var arr = new Array(1,2,3) 11 12 //pop() 删除末尾的元素 13 arr.pop(); 14 for(var i=0;i<arr.length;i++){ 15 console.log(arr[i]); 16 } 17 console.log("==================="); 18 19 //shift() 删除开头的元素 20 arr.shift(); 21 for(var i=0;i<arr.length;i++){ 22 console.log(arr[i]); 23 } 24 25 </script> 26 </body> 27 </html>
2.4 翻转数组 reverse()
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <script> 12 var arr = new Array(1, 2, 3) 13 14 //翻转数组 reverse() 15 arr.reverse(); 16 for (var i = 0; i < arr.length; i++) { 17 console.log(arr[i]); 18 19 } 20 </script> 21 </body> 22 23 </html>
2.5 数组排序 sort()
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <script> 12 var arr = new Array(1, 4,9,3,6,7,8,3,65,87,34,65) 13 14 //升序排列 15 arr.sort(function(a,b){ 16 return a-b; 17 }); 18 for(var i=0;i<arr.length;i++){ 19 console.log(arr[i]); 20 21 } 22 console.log("============================="); 23 24 25 //降序排列 26 arr.sort(function(a,b){ 27 return b-a; 28 }); 29 for(var i=0;i<arr.length;i++){ 30 console.log(arr[i]); 31 32 } 33 </script> 34 </body> 35 36 </html>
2.6 返回数组元素的索引号 indexof() (注意返回的是满足条件的第一个元素的索引号)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <script> 10 var arr = ["zhang",14,35,true,false,true]; 11 //index() 返回选定数组元素的索引号，注意只返回第一个满足条件的数组元素的索引号 12 13 console.log(arr.indexOf("zhang")); 14 console.log(arr.indexOf(true)); 15 </script> 16 </body> 17 </html>
示例: 数组去重
算法： 创建一个新的数组，然后遍历旧数组，那个旧数组的元素去查询新数组，如果索引值返回-1，表示数组中不存在该元素，将其添加进去。如果索引值不为-1，代表数组中存在该元素，则不添加
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body> 9 <script> 10 var arr01 =new Array("a","b","c","c","b","z","i"); 11 //数组去重 12 13 var arr02 = new Array(); 14 for(var i=0;i<arr01.length;i++){ 15 if( arr02.indexOf(arr01[i]) === -1 ){ 16 arr02.push(arr01[i]) 17 } 18 } 19 20 for(var i=0;i<arr02.length;i++){ 21 console.log(arr02[i]); 22 23 } 24 </script> 25 </body> 26 </html>
2.7 将数组转化成字符串
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 </head> 9 10 <body> 11 <script> 12 var arr01 = new Array("a", "b", "c", "c", "b", "z", "i"); 13 14 //通过 join() 将数组转化成字符串，注意括号中写什么就以什么来分隔 15 console.log(arr01.join("-")); 16 console.log("====================================="); 17 18 var arr02 = new Array(1,2,3,4,5,6,7); 19 //不写的话就以逗号来分隔 20 console.log(arr02.join()); 21 22 23 </script> 24 </body> 25 26 </html>
