Javascript的数组
1.什么是数组
数组可以存储多个数据变量的一个容器,数组也可以是空数组
数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
在数组中，数据的编号也叫索引或下标
数组可以存储任意类型的数据
元素：数组中保存的每个数据都叫数组元素
下标：数组中数据的编号
长度：数组中数据的个数，通过数组的length属性获得
2.数组的语法书写
<script>
let 数组名 = [ 数据1,数据2,数据3 ];
//数组里面可以存储字符串 数字 类型等
let arr = ['小红','小白','小乐','小紫',123]
</script>
3.数组的使用
<script>
let arr = ['小红','小白','小乐','小紫',123]
//通过索引号(下标)调用数组中的数据 下标号是从0开始的
arr[0] ; //小红
arr[1] ; //小白
arr[2] ;//小乐
arr[3] ; //小紫
arr[4] ;//123
console.log(arr[1]); //小白 字符串型
console.log(arr[4]) ; //123 数字型
</script>
4.数组的遍历
用循环把数组中每个元素都访问到,一般会用for循环遍历
<script>
//语法
/*
for ( let i= 0 ; i < arr.length ; i++) {
arr[i]
}
*/
//先声明一个数组
let arr = [你好,他好,大家好,好迪,真好,哈哈哈]
//遍历数组是指将数组的每个数据都打印出来
for (let i = 0 ; i < arr.length ; i++ ) {
document.write(`${arr[i]} <br>`)
}
//注意的是遍历数组时 注意到是 i 是从0 开始的 i 条件判断也是小于数组的长度
</script>
5.数组的求和
求数组 [2,6,1,7, 4,9,11,23,45] 里面所有元素的和以及平均值
<script>
//数组
let arr = [10,30,44,66,31,20];
//求和变量
let sum = 0;
//平均值变量
let aor = 0;
//遍历每个数据并相加
for ( let i = 0 ; i < arr.length;i++) {
sum += arr[i]
}
//平均值变量
aor = sum / arr.length
document.write(`${sum} <br>`)
document.write(`${aor}`)
</script>
6.数组最大值
数组中元素顺序不是从大到小排列,有需求的话需要求数组最大值
<script>
//声明一个数组
let arr = [20,15,3,64,81,22,42];
//假定一个变量为数组的第一个值
//比较数组的第一个值,如果设置为0的话,后续数组是负数的数据就比较麻烦
let max = arr[0] ;
//遍历数组
for (let i = 0 ; i < arr.length ; i++ ) {
//假如遍历的数组大于max变量,那么最大值max=遍历的数值
if ( arr[i] > max ) {
max = arr[i]
}
}
document.write(`${max}`)
</script>
7.数组的最小值
<script>
//声明数组
let arr = [1,20,11,37,58,14,-2,30,0]
//假定一个变量为数组的第一个数
let min = arr[0]
//遍历比较最小值
for (let i = 0; i < arr.length; i++) {
if (arr[i] < min ) {
min = arr[i]
}
}
document.write(`数组最小值为${min}`)
8.数组push() 和 unshift()添加新元素
1.push() 使用
数组名 .push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度
<script>
//push增加的元素是添加在数组末尾
let arr = ['平果','香蕉','橘子']
let sum = arr.push ('火龙果' ,'柚子')
console.log(sum); // 5
document.write(`${arr}`) //输出五个元素
</script>
2..unshift()使用
数组名.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度
<script>
//unshift 增加新的元素在数组前面
let arr1 = [ 1,31,44,51,31,11]
arr1.unshift(100,25,45)
console.log(arr1); // 100 , 25 ,45,1,31,44,51,31,11
</script>
9.数组筛选案例
将一个数组 [44, 2, 11, 54, 77, 0, 26, 47, 25, 7] 中大于等于 10 的元素选出来，放入新数组
<script>
//将arr数组大于10的值给空数组
let arr = [44, 2, 11, 54, 77, 0, 26, 47, 25, 7];
//声明一个空数组
let sum = [] ;
for (let i = 0 ; i < arr.length ; i++ ) {
if (arr[i] > 10 ) {
//条件满足添加到空数组中,用到了数组的添加元素
sum.push(arr[i])
}
}
console.log(sum);
</script>
10.数组pop()和shift()删除数组中的元素
1.pop()使用
数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值
<script>
//pop删除 数组最后一个数据 并返回该元素值
let arr = [ 12,11,30,45];
//pop 括号里面不用书写 默认删除数组最后一个元素
arr.pop()
console.log(arr); //12 11 30
</script>
2.shift()使用
数组. shift() 方法从数组中删除第一个元素，并返回该元素的值
<script>
//shift删除 数组第一个数据 并返回该元素的值
let arr = [ 12,11,30,45]
//删除数组中第一个数据,并返回元素的值.
let num = arr.shift() //12
console.log(num); //12
console.log(arr); // 11 30 45
</script>
3.splice()使用
数组. splice() 方法 删除指定元素
1.start 起始位置:
指定修改的开始位置（从0计数,相当于下标）
2.deleteCount:
表示要移除的数组元素的个数
可选的。 如果省略则默认从指定的起始位置删除到最后
<script>
let arr = [1,3,4,87]
//splice ('想要删除的元素的下标','想要删除的个数')
//1.删除数组中的下标为1的元素
//2.从下标1开始,想要删除几个
arr.splice(1,2)
//补充一下 splice 也可以指定添加元素
//splice('想要删除的元素的下标','想要删除的个数','想要添加的元素')
arr.splice(1,0,'我是新增加的元素')
console.log(arr);
</script>
11.用数组动态生成树状图
根据prompt输入框的值展示不同季度高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
width: 1000px;
height: 600px;
margin: 100px auto;
background-color: skyblue;
display: flex;
align-items: flex-end;
justify-content: space-around;
}
li {
width: 100px;
background-color: pink;
/* height: 100px; */
position: relative;
text-align: center;
}
span {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -30px;
}
div {
width: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 100%;
}
</style>
</head>
<body>
<script>
//空数组接受用户数值
let arr = []
//每次for 循环拼接一次li标签,并且把ul标签开头先书写,根据字符串拼接特点在for循环结束后再拼接</ul>完成一个整体
let liHtml = `<ul>`
for (let i = 0 ; i < 4 ; i++) {
//重复4次用户输入,并把每一次数值给到li标签的高度上
let num = +prompt(`请输入第${i + 1}季度数值`)
// arr[i] = num
//用数组的添加方法也可以添加到空数组中
arr.push(num)
//此处用到css的行内样式进行对不同li标签的赋不一样的值
liHtml += `<li style= "height:${arr[i]}px"><span>${i + 1}</span><div>第${i + 1}季度</div></li>`
}
//for循环结束后需要完成双标签书写,所以在最后拼接
liHtml += `</ul>`
//最在页面输出整体布局 ,css已经先写好
document.write(liHtml)
console.log(arr);
</script>
</body>
</html>
