循环
当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环
退出循环
continue：结束本次循环，继续下次循环
break：跳出所在的循环（结束，下面的循环不继续）
while循环
<script>
//循环条件
while (condition) {
//循环体
}
</script>
案例：
求1+2+3+4+.....100的和
<script>
let num1 = 1;
let num2 = 0;
while (num1 <= 100) {
num2 += num1
num1++
}
console.log(num2);
</script>
输出：
for循环
优点: 把声明起始值、循环条件、变化值写到一起，让人一目了然
<script>
// 循环的变量 循环条件 变化值
for (let index = 0; index < array.length; index++) {
//循环体
}
</script>
案例：
求1-100的偶数和
<script>
let num1 = 0;
for (let i = 0; i <= 100; i++) {
i % 2 == 0 ? num1 += i : num1
}
console.log(num1);
</script>
输出：
数组
创建数组
let arr = ['xioalu', '小明', '熊安安']
取值
//取单个值
console.log(arr[2]);
//取全部长度
console.log(arr.length);
输出：
遍历数组
因为数组初始值为0
所以比较需使用<号
<script>
let arr = ['xioalu', '小明', '熊安安']
for (let index = 0; index < arr.length; index++) {
console.log(arr[index]);
}
</script>
输出;
数组求和
<script>
let arr = [1, 3, 54, 75, 3],
num = 0,
num2 = 0;
for (let index = 0; index < arr.length; index++) {
// num2 = (num += arr[index]) && (num / arr.length)
num += arr[index]
}
console.log(num);
// console.log(num / arr.length);
</script>
输出：
平均值
总和除余数组总长度
<script>
let arr = [1, 3, 54, 75, 3],
num = 0,
num2 = 0;
for (let index = 0; index < arr.length; index++) {
num2 = (num += arr[index]) && (num / arr.length)
// num += arr[index]
}
console.log(num2);
// console.log(num / arr.length);
</script>
输出：
数组求最大最小值
用num第一个值跟arr数组的每一个值去比较，
如果arr的值小于（大于）num的值，那么arr的值就赋给num
可以利用三元表达式或if语句
let arr = [2, 3, 54, 75, 3],
num = arr[0];
for (let index = 0; index < arr.length; index++) {
// arr[index] > num ? num = arr[index] : num = num
arr[index] < num ? num = arr[index] : num = num
// if (arr[index] > num) {
// num = arr[index]
// }
}
console.log(num);
输出：
元素增加
push
通过变量名.push('内容')来增加
放在最后
<script>
let arr = ['配合', 'jhda']
arr.push('fnsjau')
console.log(arr);
</script>
输出：
小案例
通过用户输入来增加
<script>
// let arr = ['配合', 'jhda']
// arr.push('fnsjau')
// console.log(arr);
let arr = [];
for (let index = 1; index <= 5; index++) {
let userName = prompt('请输入名字')
arr.push(userName)
}
console.log(arr);
</script>
输出：
unshift
把元素放在最前面
let arr = ['配合', 'jhda']
arr.unshift('fnsjau')
console.log(arr);
输出：
元素删除
元素返回值可取
删除的元素值，赋给新的变量
<script>
let arr = ['香蕉', '小鹿', '大象']
let num = arr.shift()
let num2 = arr.pop()
console.log(num)
console.log(num2);
</script>
输出：
pop
删除最后一元素
<script>
let arr = ['香蕉', '小鹿', '大象']
arr.pop()
console.log(arr);
</script>
输出：
shift
删除第一个元素
<script>
let arr = ['香蕉', '小鹿', '大象']
arr.shift()
console.log(arr);
</script>
效果：
元素指定删除
splice（要从第几个开始删除，从这里开始删除几个）
也可以增加元素（1要从第几个开始删除，2从这里开始删除几个，3增加的元素）
在指定的元素前面加上增加的元素数据
<script>
let arr = ['西嘎', '芝麻', '噢噢']
arr.splice(1, 1)
console.log(arr);
</script>
输出：
数组找大于等于值
arr值比较是否大于等于设定值
然后通过push把大于等于10的数值增加到空的数组里面
<script>
let arr = [2, 3, 54, 75, 3],
num = [];
for (let index = 0; index < arr.length; index++) {
if (arr[index] >= 10) {
num.push(arr[index])
}
} console.log(num);
</script>
输出：
数组的补充
修改元素
选中元素即可修改
<script>
let arr = ['小橘', '小鹿', '小安']
arr[1] = '小明'
console.log(arr);
</script>
输出：
获取最后一元素
数组总长度减1
<script>
let arr = ['小橘', '小鹿', '小安']
console.log(arr[arr.length - 1]);
</script>
输出：
添加元素
拿到需要添加的序号然后直接赋值
<script>
let arr = ['小橘', '小鹿', '小安'];
arr[3] = '小明';
console.log(arr);
</script>
输出：
案例
根据用户输入的数据生成柱状图
生成HTMl
利用变量拼接的方式生成ul，分别在变量值开始与结束放标签的头尾
利用for循环生成里面的li
<script>
let liHtnl = '<ul>';
for (let index = 0; index < 4; index++) {
liHtnl += ` <li style><span>${index}</span><i>第${index}季度</i></li>`;}
liHtnl += '</ul>';
document.write(liHtnl);
</script>
Html效果：
创建数组
创建一个空数组（即用户柱状图需要的数据）
在循环里面请求输入框，把用户输入的值通过增加的方式
赋给一开始创建好的空数组
//liHeight就是空的数组
let liHeight = [];
height = +prompt(`请输入你的第${index + 1}次数据`);
//把数据增加到空数组里面
liHeight.push(height)
css行内样式
然后通过行内样式的方式改变li的高度
liHeight[index]即用户输入的数据值
liHtnl += ` <li style="height:${liHeight[index]}px;"><span>${liHeight[index]}</span><i>第${index + 1}季度</i></li>`;
完整代码
<script>
//创建空数组
let liHeight = [];
//创建ul的头（通过拼接的方式）
let liHtnl = '<ul>';
//for循环创建li
//for循环获取用户输入的数据值（通过元素增加的方式push把数据赋给准备好的空数组）
//通过for循环把用户的数据赋给li
for (let index = 0; index < 4; index++) {
height = +prompt(`请输入你的第${index + 1}次数据`);
liHeight.push(height)
liHtnl += ` <li style="height:${liHeight[index]}px;"><span>${liHeight[index]}</span><i>第${index + 1}季度</i></li>`;
}
//创建ul的尾
liHtnl += '</ul>';
//输出整个HTML页面
document.write(liHtnl);
</script>
效果：
函数
函数出发点
精简代码
函数复用
函数命名的规范
- 和变量命名基本一致
- 尽量小驼峰式命名法
- 前缀应该为动词
- 命名建议：常用动词约定
函数的声明
function 函数名(params) {
函数体
}
函数的调用
function 函数名(params) {
函数体
}
//函数调用
函数名()
形参实参
传入数据列表 声明这个函数需要传入几个数据 多个数据用逗号隔开
//形参
function getAll(num1, num2) {
console.log(num1 + num2);
}
//实参
getAll(20, 10);
案例
计算总和
把声明好的数组通过实参传到形参里面
<script>
let arr1 = [22, 33, 22]
let arr2 = [22, 44, 55]
function getSum(arr) {
let num = 0;
for (let index = 0; index < arr.length; index++) {
num += arr[index]
} console.log(num);
}
getSum(arr1)
getSum(arr2)
</script>
输出：
返回值
return加上需要返回的变量（值）
案例
返回最大值
返回值后就可以直接输出函数名的值
也可以再给返回值命名 let max = getMin(arr1), 这样输出即可 console.log(max);
<script>
let num1 = 111,
num2 = 222;
function getMax(n1, n2) {
if (n1 > n2) {
return n1
} else {
return n2
}
}
getMax(num1, num2)
//输出返回的值
console.log(getMax(num1, num2));
</script>
输出：
作用域
三大类
全局、局部、块级
全局
写在script标签内的 根目录
任意地方都可以访问
<script>
//谁都可以访问
let num = 100;
</script>
局部
写在函数的内部变量
只允许自己访问
<script>
function name(params) {
//只允许自己内部访问
let num = 100;
}
</script>
块级
自己在大括号里面声明，独食
<script>
// 这就是块级变量
for (let index = 1; index < array.length; index++) {
const element = array[index];
}
</script>
