JavaScript基础语法three-CSDN博客

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 = 0
    for (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]:max
        max = 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'))//4
    document.write('<br>')
    document.write(arr)//pink,hot,smile,silence
    document.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())//green
    document.write('<br>')
    document.write(arr)//red,pink,blue
    document.write('<br>')
    document.write(arr.shift())//red
    document.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
    })