JavaScript-DAY3学习笔记

他是一棵杨树

已于 2024-02-15 14:52:42 修改

阅读量634

点赞数 12

文章标签：学习 javascript

于 2024-02-15 14:41:48 首次发布

本文链接：https://blog.csdn.net/m0_58323724/article/details/136113866

版权

1.for语句

1.1for语句的基本使用

语法：

for(变量起始值;终止条件;变量变化量){
//循环体
}

案例-输出1-100

  <script>
    for (let i = 1; i <= 100; i++) {
      document.write(`${i}<br>`)
    }
  </script>

案例-求1-100的偶数和

  <script>
    let sum = 0;
    for (let i = 0; i <= 100; i++) {
      if (i % 2 === 0) {
        sum += i
      }
    }
    alert(sum)
  </script>

案例-遍历数组

  <script>
    let arr = ['ok', 'fine', '6', 'shark', '大头']
    for (let i = 0; i < arr.length; i++) {
      console.log(arr[i])
    }
  </script>

注：

for(;;)构造无限循环
for和while循环的区别：当明确循环次数时推荐用for；当不明确循环次数的时候推荐使用while循环

1.2循环嵌套

语法

for(外部声明记录循环次数的变量;循环条件;变化值){

for(内部声明记录循环次数的变量;循环条件;变化值){
//循环体
}

}

案例-打印5行5列星星

  <script>
    for (let i = 1; i <= 5; i++) {
      for (let j = 1; j <= 5; j++) {
        document.write('★')
      }
      document.write(`<br>`)
    }
  </script>

案例-打印倒三角星星

  <script>
    for (let i = 1; i <= 5; i++) {
      for (let j = 1; j <= i; j++) {
        document.write(`☆`)
      }
      document.write(`<br>`)
    }
  </script>

案例-九九乘法表

  <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>

2.数组

2.1数组是什么

数组是一种可以按顺序保存数据的数据类型

2.2数组的基本使用

声明数组：

字面量声明数组

let 数组名 = [数据1,数据2,数据3,···,数据n]

使用new Array 构造函数声明

取值语法：

数组名[下标]

遍历数组：

for(let i = 0; i<数组名.length;i++){
         数组名[i]
}

2.3操作数组

案例-数组求和

  <script>
    let arr = [1, 3, 6, 4, 9, 7]
    let sum = 0
    for (let i = 0; i < arr.length; i++) {
      sum += arr[i]
    }
    alert(`和为${sum},平均值为${sum / arr.length}`)
  </script>

案例-数组最大值最小值

  <script>
    let arr = [81, 26, 54, 79, 28, 34, 23]
    let max = arr[0]
    let min = arr[0]
    for (let i = 1; i < arr.length; i++) {
      max < arr[i] ? max = arr[i] : max
      min > arr[i] ? min = arr[i] : min
    }
    alert(`最大值为${max},最小值为${min}`)
  </script>
</body>

2.2 操作数组

查询：数组[下标]

重新赋值：数组[下标]=新值

数组添加新的数据：

数组.push(新增内容) ：一个添加到数组末尾，并返回该数组的新长度
数组.unshift(新增内容)：一个或多个元素添加到数组开头，并返回数组的新长度

案例-数组筛选（从数组中筛选大于等于10的元素放入到新数组中）

  <script>
    let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
    let newArray = []
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] >= 10) {
        newArray.push(arr[i])
      }
    }
    console.log(newArray);
  </script>

删除数组中数据：

数组.pop() ：删除最后一个元素，返回删除元素的值
数组.shift()：删除第一个元素，返回删除元素的值
数组.splice(起始位置-索引号，删除几个元素)：删除指定元素

3.综合案例--根据数据生成柱状图

<!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>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>
    <script>
        //4次输入放到一个数组中
        let fourSeasons = []
        for (let i = 1; i <= 4; i++) {
            fourSeasons.push(prompt(`请输入第${i}个季度的数据`))
        }
        // console.log(fourSeasons);
        //遍历数组，根据数据生成4个柱状图，渲染打印到页面中
        document.write(`<div class="box">`)
        for (let i = 0; i < fourSeasons.length; i++) {
            document.write(`
            <div style="height: ${fourSeasons[i]}px;">
            <span> ${fourSeasons[i]}</span>
            <h4>第${i + 1}季度</h4>
            </div>
        `)
        }
        document.write(`</div>`)

    </script>
</body>

</html>

他是一棵杨树

关注

12
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-DAY3学习笔记

案例-数组筛选（从数组中筛选大于等于10的元素放入到新数组中）数组是一种可以按顺序保存数据的数据类型。3.综合案例--根据数据生成柱状图。重新赋值：数组[下标]=新值。案例-求1-100的偶数和。案例-打印5行5列星星。案例-数组最大值最小值。案例-输出1-100。案例-打印倒三角星星。2.2数组的基本使用。
复制链接

扫一扫