循环-for
for循环基本使用
for(变量起始值;终止条件;变量变化值)
{
//循环体
}
while(true)和for(;;) 可以构造“无限”循环
循环嵌套
for(外部声明记录循环次数的变量;循环条件;变化值)
{
for(内部声明记录循环次数的变量;循环条件;变化值)
{
循环体
}
}
打印倒三角形星星
<script>
for (let i = 1; i <= 5; i++) {
for (let j = 1; j <= i; j++) {
document.write('*')
}
//换行使用<br>标签
document.write('<br>')
}
</script>
九九乘法表
<script>
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= i; j++) {
document.write(`${j}*${i}=${i * j}    `)
}
document.write('<br>')
}
</script>
数组
数组:(Array)是一种可以按顺序保存数据的数据类型
数组的基本使用-遍历数组
<script>
// 数组求最大值
let arr = [1, 2, 5, 4, 7]
let max = arr[0]
for (let i = 0; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i]
}
}
document.write(`最大值为${max}`)
</script>
操作数组
操作数组-增
数组名.push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度 (重点)
数组名.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头,并返回该数组的新长
let arr1 = ['green', 'pink', 'blue']
arr1.push('red') //['green', 'pink', 'blue','red']
arr1.unshift('red') //['red','green', 'pink', 'blue']
//将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来,放入新数
<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>
操作数组-删
数组名. pop() 方法从数组中删除最后一个元素,并返回该元素的值
数组名. shift() 方法从数组中删除第一个元素,并返回该元素的值
数组名. splice(start,deleteCount) 方法 删除指定元素
let arr2 = ['green', 'pink', 'blue']
arr2.pop() //无参数 返回值是删除的元素 ['green', 'pink']
arr2.shift() //无参数 返回值是删除的元素 ['pink', 'blue']
arr.splice(0, 1) // ['pink', 'blue']
操作数组-改
数组[下标] = 新值
操作数组-查
数组[下标]
冒泡排序
原理:比较两个相邻的数字大小,如果第一个比第二个大则交换位置。对每一对相邻元素作同样的工作,每一趟只能确定将一个数归位。即第一趟只能确定将末位上的数归位,第二趟只能将倒数第 2 位上的数归位,依次类推下去。如果有 n 个数进行排序,只需将 n-1 个数归位,也就是要进行 n-1 趟操作。
let arr3 = [3, 2, 4, 1, 6]
//核心算法思想
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j+1]) {
//交换两个数的值
let temp = arr[j]
arr[j] = arr[j+1]
arr[j+1] = temp
}
}
数组排序
数组名. sort() 方法可以排序,默认升序。
let arr4 = [4, 2, 5, 1, 3]
arr4.sort() // [1, 2, 3, 4, 5]
// 升序排列写法
arr4.sort(function (a, b) {
return a - b
})
console.log(arr4) // [1, 2, 3, 4, 5]
// 降序排列写法
arr4.sort(function (a, b) {
return b - a
})
console.log(arr4) // [5, 4, 3, 2, 1]
综合案例
根据数据生成柱形图
<script>
let arr = []
for (let i = 1; i <= 4; i++) {
let num = prompt(`请输入第${i}季度的数据`)
alert(`第${i}季度的数据为${num}`)
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>
渲染图片
<ul class="box">
<script>
let num = prompt('请输入1~20个之间的英雄的个数')
//方法1 数组法
// 将照片放入数组中
// let arr = [
// './images/1.webp',
// './images/2.webp',
// './images/3.webp',
// './images/4.webp',
// './images/5.webp',
// './images/6.webp',
// './images/7.webp',
// './images/8.webp',
// './images/9.webp',
// './images/10.webp',
// './images/11.webp',
// './images/12.webp',
// './images/13.webp',
// './images/14.webp',
// './images/15.webp',
// './images/16.webp',
// './images/17.webp',
// './images/18.webp',
// './images/19.webp',
// './images/20.webp'
// ]
// for (let i = 0; i < num; i++) {
// document.write(`
// <li>
// <img src="${arr[i]}" alt="">
// </li>
// `)
// }
//方法2 循环和字符串插值 注意:所有图片都遵循 ./images/数字.webp 的命名规则的情况下
for (let i = 1; i <= num; i++) {
document.write(`
<li>
<img src="./images/${i}.webp" alt="">
</li>
`)
}
</script>
</ul>