题目讲解:
1
let i =0,可以提到括号外面,console.log(i)循环外面输出
=============================================
2
变量是在循环里面声明,所以输出不能再括号以外输出
案例:
输入星星行列:
body>
<script>
// 获取行
let n = +prompt('请输入行数');
// 获取列
let m = +prompt('请输入列数');
// 第一层循环的5 表示 行
for (let index = 1; index <= n; index++) {
for (let index1 = 1; index1 <= m; index1++) {
document.write('⭐');
}
document.write('<br/>');
}
</script>
</body>
九九乘法表:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
span{
border: 1px solid #000;
padding: 10px 0 ;
width: 100px;
text-align: center;
display: inline-block;
}
</style>
</head>
<body>
<script>
for (let index = 1; index <= 9; index++) {
for (let index1 = 1; index1 <= index; index1++) {
let num = index1 * index;
document.write(`<span> ${index1} * ${index} = ${num} </span>`);
}
document.write('<br/>');
}
</script>
</body>
数组
数组(Array)是一种可以按顺序保存数据的数据类型
代码演示:
for循环+数组:
代码:
<body>
<script>
let arr=['a','b','c','d','e','f']
for (let index = 0; index < 6; index++) {
console.log(arr[index]);
}
</script>
</body>
进阶:
数组求和:
代码:
<body>
<script>
// 数组
let arr = [2, 6, 1, 7, 4];
// 存放总的数据
let sum = 0;
// 循环
for (let index = 0; index < arr.length; index++) {
// 使用变量 来存放数组中的每一个数值
sum += arr[index];
// index=0 sum += arr[index] sum += 2;
// index=1 sum += arr[index] sum += 6;
}
console.log(sum); // 和 20
// 平均值 = 和 / 数组的长度
console.log(sum / arr.length);
</script>
</body>
数组最大值及最小值:
最大值:
<body>
<script>
let arr = [-2, -6, -1, -77, -52, -25, -7];
let max = arr[0];
for (let i = 0; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
console.log(max);
</script>
</body>
最小值:
<body>
<script>
let arr=[2,6,1,77,52,25,7]
let s=arr[0]
for (let index = 0; index < arr.length; index++) {
if(arr[index]<s){
s=arr[index]
}
}
console.log(s)
</script>
</body>
操作数组:
增:
push放末尾(用最多)
代码演示:
body>
<script>
let arr=[]
for (let i = 0; i < 4; i++) {
let userName=prompt("请输入名字")
arr.push(userName)
}
console.log(arr)
</script>
</body>
案例:
数组的过滤
把大于10的数组增加到数组arr2中
<body>
<script>
let arr1=[2,0,6,1,77,0,52,0,25,7]
let arr2=[]
for (let i = 0; i < arr1.length; i++) {
if(arr1[i]>=10){
arr2.push(arr1[i])
}
}
console.log(arr2)
</script>
</body>
unshift放开头
代码演示:
<body>
<script>
let arr = ['black', 'red'];
arr.unshift("yellow");
console.log(arr);
</script>
</body>
总结:
1 push和unshift 都可以做到给数组添加新元素
2 这两个代码在执行的时候 还可以返回 数组的长度(了解)
数组去零案例:
获取不等于零的数组元素
<body>
<script>
let arr = [1, 3, 4, 5, 3, 2, 4, 0, 0, 3, 22, 98];
let newArr = [];
for (let index = 0; index < arr.length; index++) {
if (arr[index] !== 0) {
newArr.push(arr[index]);
}
}
console.log(newArr);
</script>
</body>
删:
pop
删除最后一个元素
代码演示:
<body>
<script>
let arr = ['西瓜', '香蕉', '麻瓜'];
// 希望删除掉最后的一个元素 麻瓜 不要
arr.pop();
console.log(arr); // ['西瓜', '香蕉']
====================================================
shift
删除第一个元素
代码演示:
<body>
<script>
let arr = ['西瓜', '香蕉', '麻瓜'];
// 希望删除掉第一个元素
arr.shift();
console.log(arr);
</script>
</body>
返回该元素解释:
<body>
<script>
let arr = ['西瓜', '香蕉', '麻瓜'];
// let first = arr.shift();
// console.log(first);
// console.log(arr);// first = 西瓜 arr = 香蕉 麻瓜
let last = arr.pop();
// last = 麻瓜
// arr = 西瓜 香蕉
console.log(last);
console.log(arr);
</script>
</body>
===================================================
splice
代码演示:
<body>
<script>
let arr = ['西瓜', '香蕉', '麻瓜'];
// 在 1的位置,删除0个元素,增加一个红薯
// ['西瓜', '红薯', '香蕉', '麻瓜'];
arr.splice(1, 1, '红薯');
console.log(arr);
</script>
</body>
综合案例:
动态生成柱状图:
关键代码:
<body>
<script>
let liHtml=`<ul>`
let liHight=[];
for (let index = 0; index < 4; index++) {
let Hight= +prompt(`请输入你想要的第${index+1}个高度的数据`)
liHight.push(Hight);
}
for (let index = 0; index <4; index++) {
liHtml +=`<li style="height:${liHight[index]}px;">
<span>${liHight[index]}</span>
<div>第${index+1}季度</div>
</li>`
}
liHtml +=`</ul>`
document.write(liHtml)
</script>
</body>
数组补充:
1 获取数组中最后一个元素
代码:
===================================================