JavaScript基础_03day


const 和var 和 let 的区别

https://blog.csdn.net/nilmao/article/details/123749696

简单来说:

1-var 声明的范围是函数作用域,let 和 const 声明的范围是块作用域

2-var 声明的变量会被提升到函数作用域的顶部,let 和 const 声明的变量不存在提升,且具有暂时性死区特征

3-var 允许在同一个作用域中重复声明同一个变量,let 和 const 不允许

4-在全局作用域中使用 var 声明的变量会成为 window 对象的属性,let 和 const 声明的变量则不会

5-const 的行为与 let 基本相同,唯一 一个重要的区别是,使用 const 声明的变量必须进行初始化,且不能被修改

即现在在声明变量的时候,一般不使用var,而是使用const,当声明的变量的值会发生改变时,使用let

注意,引用数据类型,如数组和函数,对象等,它们里面的数据发生变化,也可以使用const来声明

因为变量储存的是它们的地址,而不是里面的一系列数据,数据改变,地址没变,所以不会与const冲突。

for循环

417

分号表示语句的结束,所以括号里面其实有三句语句。

注意是运行一次循环体内的语句后,再进行i++

其中for循环最大的价值是循环遍历数组

418

<script>
  const arry = ['雷军','埃隆马斯克','乔布斯','库克','哈哈']
  for(let i=0;i<arry.length;i++){
    document.write(arry[i])
  }
</script>

1-因为数组值变化,但是地址没变,arry存储的是地址,所以可以用const

2-数组名.length可以确定数组的长度

3-因为数组是从0开始,所以i=0也从0开始

4-因为数组的下标比长度少1,所以需要写成i=0;i<=arry.length-1;i++,也可以把=去掉,写成i=0;i<arry.length;i++

退出循环

for循环和while循环等循环和switch都可以用break来退出整个语句体。

for循环和while循环等循环也可以用continue退出本次循环,继续判断循环条件,进行下一次循环。

for循环嵌套

419

一般for循环才有嵌套,while循环嵌套较少。

疑问

420

这里有一个疑问,外循环多次,内循环的j不是重复声明了吗,let不是不能重复声明?

答:这里存在一个垃圾回收机制,内循环的for循环完毕后,会自动回收j变量,外循环第二次循环进来,会再

声明一个j,但是原先的j已经不存在了,被回收了。

for循环嵌套的应用

421

<script>
    for(let i=1;i<=3;i++){
      document.write(`${i}天 </br>`)
      for( let j=1;j<=5;j++){
        document.write(`记住了第${j}个单词</br>`)
      }
    }
  </script>

案例一

422

首先我们来打印一个5x5的三角

423

分析:我们要去找到一个算法,就像写h5和c3,需要布局分析,不要上手就写。

1-很明显外循环控制有多少行,内循环控制一行打几个星星

2-内循环是通过中间语句j<=x来控制打几个星的

3-所以我们要修改,括号内中间语句的条件

4-很明显倒三角的第一行就是一个星,第二行就是两个星,所以,我们把

for(let j=1;j<=5;j++){
           document.write(`⭐`)
     }

改成

for(let j=1;j<=i;j++){
           document.write(`⭐`)
     }

即可。

九九乘法表

434

代码:

435

分析:与倒三角同理,把三角星换成乘法表达式即可(找到表达式的规律为 jxi

数组

数组是什么?

436

注意数组内的数据是有顺序的。

437

数组可以存储任意类型的数据,可以是字符串,也可以是布尔类型,甚至是对象等等。

438

439

案例-求数组内元素和

<script>
   const arry =[2,6,1,7,4]
   let sum = 0
   for(let i = 0 ;i<arry.length;i++){
       sum =sum+arry[i]
   }
   document.write(`和是${sum}`)
   document.write(`平均数是${sum/arry.length}`)
 </script>

注意sum和要在for循环外就用let声明,不要放在for循环内,因为for循环内的变量是块作用域,在for语句块外无法被使用。

求数组内元素最大值

440

<script>
    const arry =[2,6,1,77,52,25,7]
    let max = arry[0]
    // for循环在i=1是因为已经把arry[0]给了max,不需要再比较
    for(let i = 1 ;i<arry.length;i++){
        if(max<arry[i]){
            max=arry[i]
        }
    }
    document.write(`最大值是${max}`)
  </script>

操作数组

441

查和改简单,增和删需要记忆一下

学过数据结构的都知道 puch是入,pop出

shift:转换,去除

unshift即不去除则为增加

splice捻接; 绞接(两段绳子); 粘接(胶片、磁带等);胶接处; 粘接处; 绞接处;

数组.push()

442

puch中一次可以添加多个值,逗号隔开即可

注意这里是增加到数组的末尾,而且会返回新数组的长度(可以声明一个变量接收,也可以直接打印)

arr.push是在数组的后面添加,arr.unshift是在数组的前面添加(可同时添加多个)

443

案例

444

<script>
  const arry =[2,0,6,1,77,0,52,0,25,7]
  const newarry=[]
  for(let i=0;i<arry.length;i++){
    if(arry[i]>=10){
      newarry.push(arry[i])
    }
  }
  document.write(newarry)
 
</script>

删除

pop()

445

删除数组中的元素可以用arry.pop(),注意它的括号里面没有值,指定一次只删除数组中的最后一个元素;

无法像push()一样一次增加任意多个;

而且push()返回的是新数组的长度,但是pop()返回的是刚刚删除的元素值;

如果要删除多个可以给pop加一个循环;

shift()

446

splice删除指定元素(重点)

447

448

从哪里开始删除就在括号内第一个值就写谁的序号(包括删它),后面一个值是设置删几个,不设置的话默认删完。

我们也可以写三个参数,第三个参数是在第一个参数的位置插入东西

arr.splice(1,0,"yellow")

这样的话就不会删除东西,因为第二个参数为0,而且会插入yellow到green前面

449

总结:

1-pop和push是在末尾操作,shift和unshift是在数组前面操作

2-增的push()和unshift()可以一次添加多个元素,写在小括号内

3-删的pop()和shift()一次只能删除一个元素,小括号内不需要写值

4-pop()和shift()返回的是删除的元素,push()和unshift返回的是新数组长度。

5-splice没有返回值

冒泡排序

450

451

分析:找出规律书写for循环的条件,写两个for循环即可,外循环控制趟数,内循环控制每趟的交换次数,然后通过冒泡要求,书写if的条件。

452

453

<script>
  const arry =[2,333,6,1,77,22,52,0,25,7]
  for(let i=0;i<arry.length-1;i++){
    for(let j=0;j<arry.length-i-1;j++){
      if(arry[j]>arry[j+1]){
          let temp =arry[j]
          arry[j]=arry[j+1]
          arry[j+1]=temp
      }
    }
  }
  document.write(arry)
</script>

综合案例-柱状图

454

要求:通过用户在js中输入的值,自动生成柱形图。

分析:

455

doncument.write(``)内反引号拓展

456

这个反引号是把所有doucument,write里面的代码给浏览器,浏览器再打印出来,不需要在一个doncument.write(``)内把语句写完,是可以多个拼凑的。

参考代码

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

    <!-- <div style="height: 123px;">
        <span>123</span>
        <h4>第1季度</h4>
    </div>
    <div style="height: 156px;">
        <span>156</span>
        <h4>第2季度</h4>
    </div>
    <div style="height: 120px;">
        <span>120</span>
        <h4>第3季度</h4>
    </div>
    <div style="height: 210px;">
        <span>210</span>
        <h4>第4季度</h4>
    </div> -->


    <script>
        // 1. 利用循环弹出四次输入框, 会得到4个数据,放到数组里面
        let arr = []
        for (let i = 1; i <= 4; i++) {
            // prompt(`请输入第 ${i} 季度的数据`)  ===  123
            arr.push(prompt(`请输入第 ${i} 季度的数据`))
        }
        // console.log(arr)
        // 注意我们渲染循环的是柱子 
        document.write(`<div class="box">`)
        // 循环4个柱子
        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>

我的代码

<!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>
    
  <!-- <div class="box">
        <div style="height: 123px;">
            <span>123</span>
            <h4>第1季度</h4>
        </div>
        <div style="height: 156px;">
            <span>156</span>
            <h4>第2季度</h4>
        </div>
        <div style="height: 120px;">
            <span>120</span>
            <h4>第3季度</h4>
        </div>
        <div style="height: 210px;">
            <span>210</span>
            <h4>第4季度</h4>
        </div>
    </div> -->

  <script>
    const data = []
    data_i = prompt(`你要输入几个季度的数据?`)
    for (let i = 0; i < data_i; i++) {
      data.push(prompt(`请输入第${i + 1}个季度的数据`))
    }
    document.write(`<div class="box">`)
    // 循环4个柱子
    // 这里的for循环j一样可以写成i,因为它们两个变量虽然名字相同,但是因为作用域
    // 所以它们其实是两个不同变量。
    for (let j = 0; j < data_i; j++) {
      document.write(`
            <div style="height: ${data[j]}px;">
            <span>${data[j]}</span>
            <h4>第${j+1}季度</h4>
        </div>`)
    }
    document.write(`</div>`)

  </script>



</body>

</html>

总结:

1-如果页面效果和预想中的不一样,可以在浏览器控制台看看有没有错误,我这里就把数组名字写错过,导致for循环没有运行。


文章作者: 瑾年
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 周东奇 !
免责声明: 本站所发布的一切内容,包括但不限于IT技术资源,网络攻防教程及相应程序等文章仅限用于学习和研究目的:不得将上述内容用于商业或者非法用途,否则一切后果请用户自负。本站部分信息与工具来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如有侵权请邮件(jinnian770@gmail.com)与我们联系处理。
  目录