JavaScript中数组和网页的交互以及二维数组

237 阅读1分钟

一、数组中的内部元素可以为任意元素,如数值、字符串、函数、数组里面再存放数组等。
1、字符串数组
例如:将数组中的内容输入到网页命令行中。
var arr=["百度","腾讯","阿里","字节"]
for(var n=0;n<arr.length;n++){
console.log(arr[n])
}

1.png

2.png

二、数组和网页相结合
1、页面结构在js中统称为DOM
2、通过id、class、标签名称在js中找到对应的DOM元素
3、通过id找到对应的元素 可以用到 document.getElementById()
4、(dom).innerHTML表示设置标签的内容
例如:在js中设置标签的内容为我是js中的li
首先在<body></body>中添加一个ul标签为空标签即
<body>``<ul id="nav"></ul>``</body>
然后再<script></script>中添加代码即
var str="<li>我是js中的li</li>"
var nav=document.getElementById("nav")
nav.innerHTML=str

3.png

4.png

三、字符串拼接
例如:将数组中的元素拼接成一个长的字符串
var arr=["百度","腾讯","阿里","字节"]
var str=""
for(var n=0;n<arr.length;n++){
str=str+arr[n]
}
console.log(str)

5.png

6.png

例如:将数组中的内容拼接成li标签形式
var arr=["百度","腾讯","阿里","字节"]
var str=""
for(var n=0;n<arr.length;n++){
str=str+"<li>"+arr[n]+"</li>"
}
console.log(str)

7.png

8.png

例如:在网页中显示数组中的元素
var arr=["百度","腾讯","阿里","字节"]
var str=""
for(var n=0;n<arr.length;n++){
str=str+"<li>"+arr[n]+"</li>"
}
var nav=document.getElementById("nav")
nav.innerHTML=str

9.png

10.png

四、二维数组
二维数组:在数组中再嵌套一个数组
例如:在数组[[1,2,3],[4,5,6]]中找出6这个元素
var arr=[[1,2,3],[4,5,6]]
console.log(arr[1][2])

11.png

12.png

例如:在命令行中遍历数组[[1,3,4],[5,7,9]]
var arr=[[1,3,4],[5,7,9]]
for(var n=0;n<arr.length;n++){
for(var j=0;j<arr[n].length;j++){
console.log(arr[n][j])
}
}

13.png

14.png