前端-JS基础-day3
目录
1、for循环
2、数组遍历
3、退出循环
4、循环嵌套
5、数组的基本使用
6、数组操作-修改
7、数组操作-新增
8、数组筛选
9、数组操作-删除
10、案例-数据生成柱状图
11、冒泡排序和sort
1、for循环
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>for循环</title>
</head>
<body><script>// 输出1-100中的偶数的和let sum = 0for(let i = 1; i <= 100; i++){if(i % 2 === 0){sum += i}}document.write(`总和为：${sum}`)</script>
</body>
</html>2、数组遍历
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>遍历数组</title>
</head>
<body><script>let arr = ['小明','小华','小刚','小梁','小红']// 遍历数组for(let i = 0; i < arr.length; i++){console.log(arr[i])}</script>
</body>
</html>3、退出循环
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>退出循环</title>
</head>
<body><script>// for(let i = 1; i <= 5; i++){// if(i === 3){// continue // 退出本次循环，本次循环中 continue 下面的语句不再执行// }// console.log(i)// }for(let i = 1; i <= 5; i++){if(i === 3){break // 退出整个循环，结束循环}console.log(i)}</script>
</body>
</html>4、循环嵌套
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>循环嵌套</title>
</head>
<body><script>// 外层循环，打印第 n天for(let i = 1; i <= 3; i++){document.write(`第${i}天<br>`)for(let j = 1; j <= 5; j++){document.write(`记住了第${j}个单词<br>`)}}</script>
</body>
</html>5、数组的基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组的基本使用</title>
</head>
<body><script>let arr = [2, 6, 1, 7, 4]// 1、求和的变量 sumlet sum = 0// 2、遍历累加for(let i = 0; i < arr.length; i++){sum += arr[i]}// 3、打印输出console.log(`数组的和为：${sum}`)console.log(`数组的平均值为：${sum / arr.length}`)</script>
</body>
</html>6、数组操作-修改
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组操作-修改</title>
</head>
<body><script>// let arr = []// console.log(arr)// console.log(arr[0])// arr[0] = 1// arr[1] = 5// console.log(arr)let arr = ['pink', 'red', 'green']// 修改for(let i = 0; i < arr.length; i++){arr[i] = arr[i] + '老师'}console.log(arr)</script>
</body>
</html>7、数组操作-新增
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组操作-新增</title>
</head>
<body><script>let arr = ['red', 'green']// push 在数组后面添加元素arr.push('pink')console.log(arr) // ['red', 'green', 'pink']// arr.push('pink','hotpink')// console.log(arr) // ['red', 'green', 'pink', 'hotpink']// unshift 在数组前面添加元素// arr.unshift('pink')// console.log(arr) // ['pink', 'red', 'green']// arr.unshift('pink','hotpink')// console.log(arr) // ['pink', 'hotpink', 'red', 'green']</script>
</body>
</html>8、数组筛选
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组筛选</title>
</head>
<body><script>let arr = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]// 1、声明一个新的空数组let newArr = []// 2、遍历旧数组for(let i = 0; i < arr.length; i++){// 3、满足条件，追加到新数组if(arr[i] >= 10){newArr.push(arr[i])}}// 4、输出新的数组console.log(newArr)</script>
</body>
</html>9、数组操作-删除
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组操作-删除</title>
</head>
<body><script>let arr = ['red', 'green', 'blue']// console.log(arr.pop()) // blue// 1、pop() 删除最后一个元素// arr.pop()// console.log(arr) // ['red', 'green']// 2、shift 删除第一个元素// arr.shift()// console.log(arr) // ['green', 'blue']// 3、splice 删除指定元素 splice(起始位置索引，删除几个元素)arr.splice(1, 1)console.log(arr) // ['red', 'blue']// arr.splice(1) // 未指定删除个数，从索引删到最后// console.log(arr) // ['red']</script>
</body>
</html>10、案例-数据生成柱状图
<!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>综合案例</title><style>* {margin: 0;padding: 0;}.box {display: flex;width: 700px;height: 300px;border-left: 1px solid pink;border-bottom: 1px solid pink;margin: 50px auto;justify-content: space-around;align-items: flex-end;text-align: center;}.box>div {display: flex;width: 50px;background-color: pink;flex-direction: column;justify-content: space-between;}.box div span {margin-top: -20px;}.box div h4 {margin-bottom: -35px;width: 70px;margin-left: -10px;}</style>
</head>
<body><script>// 1、四次弹框输入效果// 声明一个新的数组let arr = []for(let i = 1; i <= 4; i++){// let num = prompt(`请输入第${i}季度的数组：`)// arr.push(num)arr.push(prompt(`请输入第${i}季度的数组：`))}// console.log(arr)// 盒子开头document.write(`<div class="box">`)// 盒子中间，利用循环的形式，和数组有关系for(let i = 0; i < arr.length; i++){document.write(`<div style="height: ${arr[i]}px;"><span>${arr[i]}</span><h4>第${i + 1}季度</h4></div>`)}// 盒子结尾document.write(`</div>`)</script>
</body>
</html>11、冒泡排序和sort
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>冒泡排序</title>
</head>
<body><script>let arr = [2, 4, 3, 5, 1]// 冒泡排序// for(let i = 0; i < arr.length - 1; i++){// for(let j = 0; j < arr.length - 1 - i; j++){// if(arr[j] > arr[j+1]){// let temp = arr[j]// arr[j] = arr[j+1]// arr[j+1] = temp// }// }// }// console.log(arr)// sort排序// arr.sort() // 默认升序// console.log(arr)// sort 升序排序// arr.sort(function(a, b){// return a - b// })// console.log(arr)// sort 降序排序arr.sort(function(a, b){return b - a})console.log(arr)</script>
</body>
</html>