JavaScript基础day03

循环-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}&nbsp&nbsp&nbsp&nbsp`)
      }
      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>