目录
1.数组的概念
2.创建数组
1.通过数组字面量创建数组
1.代码
2.效果
2.通过new Array()创建数组
1.代码
2.效果
3.数组的基本操作
1.获取数组的长度
案例:获取数组的长度
1.代码
2.效果
2.修改数组的长度
1.代码
2.效果
4.访问数组
案例:访问数组
1.代码
2.效果
5.遍历数组
1.for循环遍历数组
案例:通过for循环遍历数组
1.代码
2.效果
2.通过while遍历数组
案例:通过while遍历数组
1.代码
2.效果
3.通过do..while遍历数组
案例:通过do..while遍历数组
1.代码
2.效果
4.通过for in 遍历数组
案例:通过for in 遍历数组
1.代码
2.效果
5.通过for of 遍历数组
案例:通过for...of循环遍历数组
1.代码
2.效果
6.通过foreach遍历数组
案例:通过foreach遍历数组
1.代码
2.效果
7.通过foreach+箭头函数遍历数组
1.代码
2.效果
6.为数组添加元素
案例:为数组添加一个元素
2.效果
7.修改数组中的元素
案例:修改数组中的元素
1.代码
2.效果
8.删除数组中的元素
案例:删除数组中的元素
1.代码
2.效果
9.二维数组
案例:二维数组的遍历
1.代码
2.效果
1.数组的概念
数组是一种线性数据结构,它允许存储和管理多个值(元素)于单个变量名之下。在JavaScript中,数组可以包含任意类型的数据,并且长度是可变的。
注:javaScript中的数组里面存取的东西可以相同类型的数据类型,也可以是不同的数据类型。
//创建一个课程名字数组
var myClassNameArray = ["语文","数学","英语","高数","java","spring","javaScript"]
javascript中的数组有索引,内容,大致抽象为下图
2.创建数组
1.通过数组字面量创建数组
//创建一个空数组
var myFirstNullArray=[]
//创建一个含数据的数组
var myTwoArray = ["语文","数学","英语","高数","java","spring","javaScript"]
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初步认识数组</title> </head> <body> <script> //创建一个空数组 var myFirstNullArray = [] console.log(myFirstNullArray); //创建一个含数据的数组 var myTwoArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"] console.log(myTwoArray); </script> </body> </html>
2.效果
2.通过new Array()创建数组
//通过new Array()创建空数组
var createArrayByNewArray = new Array();
//通过new Array() 创建一个长度为3的数组
var createArrayLengthBynewArray = new Array(3);
//通过new Array() 创建包含数据的数组
var createArrayContainInfoByNewArray = new Array(["语文","数学","英语","高数","java","spring","javaScript"])
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过new Array创建数组</title> </head> <body> <script> //通过new Array()创建空数组 var createArrayByNewArray = new Array(); document.write("createArrayByNewArray"+createArrayByNewArray); document.write("<br>"); //通过new Array() 创建一个长度为3的数组 var createArrayLengthBynewArray = new Array(3); document.write("createArrayLengthBynewArray"+createArrayLengthBynewArray); document.write("<br>"); //通过new Array() 创建包含数据的数组 var createArrayContainInfoByNewArray = new Array(["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]) document.write("createArrayContainInfoByNewArray"+createArrayContainInfoByNewArray); </script> </body> </html>
2.效果
3.数组的基本操作
1.获取数组的长度
通过array.length 获取数组的长度
var myArray = new Array(["语文","数学","英语","高数","java","spring","javaScript"]);
console.log("数组的长度为:"+myArray.length)
案例:获取数组的长度
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取数组的长度</title> </head> <body> <script> //获取数组的长度 var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"] console.log(myArray.length); </script> </body> </html>
2.效果
2.修改数组的长度
为array.length修改数组的值
var myArray = new Array(["语文","数学","英语","高数","java","spring","javaScript"]);
console.log("数组的长度为:"+myArray.length)
myArray.length=10;
console.log("数组的长度为:"+myArray.length)
console.log("数组的内容为:"+myArray)
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>修改数组的长度</title> </head> <body> <script> var myArray = new Array(["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]); console.log("数组的长度为:" + myArray.length) myArray.length = 10; console.log("数组的长度为:" + myArray.length) console.log("数组的内容为:" + myArray) </script> </body> </html>
2.效果
4.访问数组
注:通过数组的索引访问数组中的元素,索引不能超过数组的最大长度
var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"];
//访问数组中的元素
console.log(myArray[0]);
console.log(myArray[1]);
console.log(myArray[5]);
console.log(myArray[3]);
案例:访问数组
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>访问数组</title> </head> <body> <script> var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]; //访问数组中的元素 console.log(myArray[0]); console.log(myArray[1]); console.log(myArray[5]); console.log(myArray[3]); </script> </body> </html>
2.效果
看右边控制台输出
5.遍历数组
1.for循环遍历数组
for (var i = 0; i < myArray.length; i++) {
document.write("这是第" + i + "的内容:" + myArray[i] + "<br>");
}
案例:通过for循环遍历数组
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过for循环遍历数组</title> </head> <body> <script> var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"] /** * for循环遍历数组 */ document.write("通过for循环遍历数组"); for (var i = 0; i < myArray.length; i++) { document.write("<br>"); document.write("这是第" + i + "的内容:" + myArray[i] + "<br>"); document.write("<br>"); } </script> </body> </html>
2.效果
2.通过while遍历数组
var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
//通过while循环遍历数组
document.write("通过while循环遍历数组");
var j = 0;
while (j < myArray.length) {
document.write("<br>");
document.write("这是第" + j + "的内容:" + myArray[j]);
j++;
}
案例:通过while遍历数组
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过while循环遍历数组</title> </head> <body> <script> var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"] //通过while循环遍历数组 document.write("通过while循环遍历数组"); var j = 0; while (j < myArray.length) { document.write("<br>"); document.write("这是第" + j + "的内容:" + myArray[j]); j++; } </script> </body> </html>
2.效果
3.通过do..while遍历数组
var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
/**
* do...while循环遍历数组
*/
document.write("通过do...while循环遍历数组");
var k = 0;
do {
document.write("<br>");
document.write("这是第" + k + "的内容:" + myArray[k]);
k++;
} while (k < myArray.length);
案例:通过do..while遍历数组
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过doWhile遍历数组</title> </head> <body> <script> var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"] /** * do...while循环遍历数组 */ document.write("通过do...while循环遍历数组"); var k = 0; do { document.write("<br>"); document.write("这是第" + k + "的内容:" + myArray[k]); k++; } while (k < myArray.length); </script> </body> </html>
2.效果
4.通过for in 遍历数组
var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
document.write("<hr>");
document.write("通过for...in循环遍历数组");
for (var item in myArray) {
document.write("<br>");
document.write("这是第" + item + "的内容:" + myArray[item]);
}
document.write("<hr>");
案例:通过for in 遍历数组
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过for in 遍历数组</title> </head> <body> <script> var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"] document.write("<hr>"); document.write("通过for...in循环遍历数组"); for (var item in myArray) { document.write("<br>"); document.write("这是第" + item + "的内容:" + myArray[item]); } document.write("<hr>"); </script> </body> </html>
2.效果
5.通过for of 遍历数组
var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
document.write("<hr>");
document.write("通过for...of循环遍历数组");
for (var item of myArray) {document.write("这是第" + item + "的内容:" + item);
document.write("<br>");
}
document.write("<hr>");
案例:通过for...of循环遍历数组
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过for...of循环遍历数组</title> </head> <body> <script> var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"] document.write("<hr>"); document.write("通过for...of循环遍历数组"); for (var item of myArray) { document.write("这是第" + item + "的内容:" + item); document.write("<br>"); } document.write("<hr>"); </script> </body> </html>
2.效果
6.通过foreach遍历数组
案例:通过foreach遍历数组
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过foreach遍历函数</title> </head> <body> <script> //通过foreach遍历函数 var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"] document.write("<hr>"); document.write("通过forEach循环遍历数组"); myArray.forEach(function (item, index) { document.write("<br>"); document.write("这是第" + index + "的内容:" + item); }) </script> </body> </html>
2.效果
7.通过foreach+箭头函数遍历数组
var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
//通过foreach遍历数组
document.write("通过foreach+箭头函数遍历数组");myArray.forEach(item => {
document.write("<br>");
document.write("这是第" + item + "的内容:" + item);
})
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过foreach+箭头函数遍历数组</title> </head> <body> <script> var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"] //通过foreach遍历数组 document.write("通过foreach+箭头函数遍历数组"); myArray.forEach(item => { document.write("<br>"); document.write("这是第" + item + "的内容:" + item); }) </script> </body> </html>
2.效果
6.为数组添加元素
var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
document.write(myArray);
document.write("<br>");
//通过push向数组中添加一个元素myArray.push("javaEE");
document.write("通过push向数组中添加一个元素");
document.write("<br>");
document.write(myArray);
案例:为数组添加一个元素
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>为数组添加一个元素</title> </head> <body> <script> var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"] document.write(myArray); document.write("<br>"); //通过push向数组中添加一个元素 myArray.push("javaEE"); document.write("通过push向数组中添加一个元素"); document.write("<br>"); document.write(myArray); </script> </body> </html>
2.效果
7.修改数组中的元素
.通过索引去修改元素 数组[索引]
var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
document.write("修改前的数组为:"+myArray);
document.write("<hr>");
//修改数组中的元素
myArray[0] = "语文改";
myArray[1] = "数学改";
myArray[2] = "英语改";
myArray[3] = "高数改";
myArray[4] = "java改";
myArray[5] = "spring改";
document.write("修改后的数组为:"+myArray);
案例:修改数组中的元素
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>修改数组中的元素</title> </head> <body> <script> var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"] document.write("修改前的数组为:"+myArray); document.write("<hr>"); //修改数组中的元素 myArray[0] = "语文改"; myArray[1] = "数学改"; myArray[2] = "英语改"; myArray[3] = "高数改"; myArray[4] = "java改"; myArray[5] = "spring改"; document.write("修改后的数组为:"+myArray); </script> </body> </html>
2.效果
8.删除数组中的元素
注:splice(从索引位置开始,删除几个元素)
var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"]
document.write("删除数组中的元素前:"+myArray);
document.write("<br>");
//删除数组中的元素myArray.splice(2,1);
document.write("删除数组中的元素后:"+myArray);
案例:删除数组中的元素
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>删除数组中的元素</title> </head> <body> <script> var myArray = ["语文", "数学", "英语", "高数", "java", "spring", "javaScript"] document.write("删除数组中的元素前:"+myArray); document.write("<br>"); //删除数组中的元素 myArray.splice(2,1); document.write("删除数组中的元素后:"+myArray); </script> </body> </html>
2.效果
9.二维数组
数组的数组
案例:二维数组的遍历
注:这里只使用嵌套for循环遍历,除了这个还可通过
for in 嵌套,
while嵌套,
do....while嵌套,
foreach嵌套遍历,
for of 嵌套遍历,
foreach+箭头函数嵌套遍历,
等
有兴趣自己可以试一下,我这里便不在做案例了
1.代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>二维数组的遍历</title> </head> <body> <script> //二维数组的遍历 var myArray = [ ["语文", "数学", "英语"], ["高数", "java", "spring"], ["javaScript", "html", "css"] ]; //通过for循环遍历二维数组 for(var i = 0; i < myArray.length; i++){ for(var j = 0; j < myArray[i].length; j){ document.write("<br>"); document.write("这是第" + i + "行,第" + j + "列的内容:" + myArray[i][j]); } } </script> </body> </html>