第五节
数组
数组(Array)是一种可以按顺序保存数据的数据类型
let 数组名 = [下标]
数组名.length//可获取数组的个数
<script>
let num = [2,6,1,7,4]
let sum = 0
let average
for (let index = 0; index < num.length; index++) {
sum += num[index]
average = sum / num.length
}
document.write(sum)
document.write(average)
let num1 = [2,6,1,77,52,25,7]
let max = 2
let min = 2
for (let i = 0; i < num1.length; i++) {
if(num1[i] > max){
max = num1[i]
} else{
max = max
}
if(num1[i] < min){
min = num1[i]
} else{
min = min
}
}
document.write(max)
document.write(min)
</script>
数组增加数据
数组.push()：放在数组的结尾
<script>
let arr = ['明明','白白','轻轻','楚楚']
arr.push('爱爱','莲莲')
document.write(arr)
明明,白白,轻轻,楚楚,爱爱,莲莲
</script>
数组.unshift(新增的内容)：放在数组的开头
<script>
let arr = ['明明','白白','轻轻','楚楚']
// arr.push('爱爱','莲莲')
arr.unshift('丹丹','丽丽')
document.write(arr)
丹丹,丽丽,明明,白白,轻轻,楚楚
</script>
指定增加的位置
<script>
// 增加指定位置
let arr3 = ['西瓜','香蕉','菠萝','荔枝','芒果']
// 表示在1的位置上不删除元素，直接增加元素，其余元素的位置往后推
arr3.splice(1,0,'柚子') //'西瓜','柚子','香蕉','菠萝','荔枝','芒果'
// 表示在1的位置上的元素删除后，然后1的位置由‘柚子’替代，其余元素位置不变
arr3.splice(1,1,'柚子')//'西瓜','柚子','菠萝','荔枝','芒果'
document.write(arr3)
</script>
数组删除数据
数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值
<script>
let arr = ['西瓜','香蕉','菠萝','荔枝']
arr.pop() //最后输出：'西瓜','香蕉','菠萝'
</script>
数组. shift() 方法从数组中删除第一个元素，并返回该元素的值
<script>
let arr1 = ['西瓜','香蕉','菠萝','荔枝']
arr1.shift() //最后输出：'香蕉','菠萝','荔枝'
</script>
数组. splice() 方法 删除指定元素
<script>
let arr2 = ['西瓜','香蕉','菠萝','荔枝']
// 指定从那个数开始，要删除几个
arr2.splice(2,1)
document.write(arr2) //'西瓜','香蕉'，'荔枝'
</script>
案例-生成季度柱状图！！！很重要
<style>
ul{
list-style: none;
width: 800px;
height: 500px;
background-color: rgb(149, 236, 168);
display: flex;
justify-content: space-around;
align-items: flex-end;
margin: 100px auto;
}
li{
width: 100px;
/* height: 200px; */
background-color: pink;
position: relative;
}
span{
position: absolute;
left: 50%;
top: -20px;
transform: translateX(-50%);
text-align: center;
}
div{
position: absolute;
top: 100%;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<!-- 分析：先把整体布局写出来，再把这些布局放到相对应的js里面 ，不用循环的结构就放在外面，需要循环的就放里面-->
<!--
<ul>
<li>
<span></span>
<div></div>
</li>
<li>
<span></span>
<div></div>
</li>
<li>
<span></span>
<div></div>
</li>
<li>
<span></span>
<div></div>
</li>
</ul>
-->
<script>
let num
let lihtml = '<ul>'
for (let index = 1; index <=4; index++) {
//记得要用反引号
num = +prompt(`请输入第${index}季度的数据`)
lihtml += `<li style="height:${num}px;"><span>${num}</span><div>第${index}季度</div></li>`
}
lihtml += '</ul>'
document.write(lihtml)
</script>
</body>
拓展知识
<script>
//1. 获取数组的最后一个元素
let arr = [2,4,6,8,10,12]
// arr.length - 1
document.write(arr[arr.length - 1])
// 2.新增或者修改数组元素
let arr1 = ['西瓜','冬瓜','哈密瓜']
// 修改元素
arr1[1] = '傻瓜'
// 添加元素
arr1[3] = '蛋瓜'
// 如果10哪里有元素就相当于修改元素。如果没有，那就是添加元素，而且数组的长度也会变成10 +1
arr1[10] = '蛋瓜'
//3. 数组可以存放不同类型的数据,但是建议一个数组放的东西要统一
let arr2 = ['西瓜',2,null,NaN]
//4.快速清空或删除元素
let arr3 = [2,4,6,8,10,12]
// 只保留三个元素
arr.length = 3
</script>
第六节
什么是函数?
function，是被设计为执行特定任务的代码块
作用
可以实现代码复用，提高开发效率
<script>
function sayHello(){
document.write('hello~~~~~~')
}
// 函数调用，调用几次执行几次
sayHello() //hello~~~~~~
sayHello() //hello~~~~~~
</script>
函数命名规范
1.和变量命名基本一致 2.尽量小驼峰式命名法 3.前缀应该为动词 4.命名建议：常用动词约定
函数传参
形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
<script>
// 形参
function getSum(num1,num2) {
num1 = num1 || 0
num2 = num2 || 0
document.write(num1 + num2)
}
// 实参
getSum(91,86)
</script>
案例：计算总分
<script>
let arr1 = [1,2,3,4,2,22]
let arr2 = [1,2,3,4,2,55]
function calcSum(array) {
let sum = 0
for (let index = 0; index < array.length; index++) {
sum += array[index]
}
document.write(sum + `<br>`)
}
calcSum(arr1)//总分
calcSum(arr2)//总分
//看清那个是变量，那个就可以就先用形参代替，参数需要写在函数外面
</script>
函数返回值
函数内部只能运行到 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写
<script>
// 不用定死num1 + num2 的最终用处
function getSum(num1,num2) {
return num1 + num2
}
getSum(10,20)
document.write(getSum(10,20))
</script>
作用域
1.全局变量 2.局部变量 3.块级变量
<script>
let num = 10000 //全局变量
function name(params) {
let age = 20 // 局部变量
}
</script>
作用域链
<script>
// 就近原则。是根据函数的定义的位置来判断的，不是函数的调用
let num = 200
function name() {
let num = 300
name2() //函数的调用
}
// 函数的定义
function name2() {
console.log(num);
}
name() //输出的是200
function name() {
name = '坐龙' //没有加let，这个就是全局变量，加了，就是局部变量
}
name()
console.log(name);//输出是'坐龙'
</script>
匿名函数
function () {
// 循环体
}
自执行函数
一般搭配匿名函数使用
作用：一次性执行，防止变量污染
使用方式：
(里面放匿名函数)()
函数表达式
let fun = function name2() {
console.log(num);
}
