JavaScript基础语法three
1.for语句
for(变量起始值;终止条件;变量变化量){
//循环体
}
案例：打印九九乘法表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {display: inline-block;width: 60px;padding: 5px 10px;border: 1px solid pink;margin: 2px;border-radius: 5px;box-shadow: 2px 2px 2px rgba(255, 192, 203);}</style>
</head>
<body><script>for (let i = 1; i <= 9; i++) {for (let j = 1; j <= i; j++) {document.write(`<span>${j}×${i}=${i * j}</span>`)}document.write('<br>')}</script>
</body>
</html>
2.数组
数组：是一种可以按顺序保存数据的数据类型
<script>//字面量声明数组let arr =[1,2,'pink',true]//使用Array构造函数let array=new Array(1,2,3)</script>数据基本使用：
数组求和：
<script>//数组求和let arr = [2, 6, 1, 7, 4]let sum = 0for (let i = 0; i < arr.length; i++) {sum += arr[i]}document.write(`和为：${sum}<br>`)document.write(`平均值为：${sum / arr.length}`)</script>求数组最大值最小值：
<script>let arr = [2, 6, 1, 77, 52, 25, 7]let max = arr[0]let min = arr[0]for (let i = 1; i < arr.length; i++) {if (max < arr[i]) {//max<arr[i]?max=arr[i]:maxmax = arr[i]}if (min > arr[i]) {min = arr[i]}}document.write(`数组中最大值为：${max}，最小值为：${min}`)</script>操作数组：
查询：数组[下标]
修改:数组[下标]=新值
增：
数组名.push(新增的内容)，追加到数组末尾，返回数组新长度
数组名.unshift(新增的内容)，追加到数组开头
<script>let arr = ['pink', 'hot', 'smile']document.write(arr.push('silence'))//4document.write('<br>')document.write(arr)//pink,hot,smile,silencedocument.write('<br>')arr.unshift('apple')document.write(arr)//apple,pink,hot,smile,silence</script>
<script>//筛选数组中大于10的元素let arr=[2,0,6,1,77,0,52,0,25,7]let newArr=[]for(let i=0;i<arr.length;i++){if(arr[i]>10){newArr.push(arr[i])}}document.write(`大于10的元素为${newArr}`)</script>删除：
数组名.pop(),删除数组最后一个元素，并返回该元素的值
数组名.shift()，删除数组第一个元素
数组名.splice(操作的下标,删除的个数)
<script>let arr = ['red', 'pink', 'bule', 'green']document.write(arr.pop())//greendocument.write('<br>')document.write(arr)//red,pink,bluedocument.write('<br>')document.write(arr.shift())//reddocument.write('<br>')//document.write(arr.splice(0, 1))//从索引号为0的位置开始删，只删除一个pink//document.write(arr.splice(1))//从索引号为1的位置开始删</script>综合案例：生成数据柱状图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</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>123<script>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>
冒泡排序：
<script>let arr = [5, 4, 3, 2, 1]for (let i = 0; i < arr.length - 1; i++) {for (let j = 0; j < arr.length - 1; j++) {//第一个数大于第二个数才交换if (arr[j] > arr[j + 1]) {let temp = arr[j]arr[j] = arr[j + 1]arr[j + 1] = temp}}}console.log(arr);</script>
//arr.sort()升序排序arr.sort(function(a,b){return a-b})//降序排序arr.sort(function(a,b){return b-a})