前端学习笔记-JS篇-02

MarisolHu

已于 2024-08-12 22:25:55 修改

阅读量1k

点赞数 31

分类专栏：前端学习文章标签：学习笔记

于 2024-08-12 20:39:33 首次发布

本文链接：https://blog.csdn.net/Yvonne_hjj/article/details/141139742

版权

前端学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

运算符

赋值运算符

对变量进行赋值的运算符。

已经学过的赋值运算符:=【将等号右边的值赋予给左边，要求左边必须是一个容器】

其他赋值运算符:
+= -= *= /= %=

原始写法和简化写法【其实就是java基础】

一元运算符

众多的JavaScript 的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符。

二元运算符：

let num = 10 + 20

但是：

前置自增和后置自增独立使用时二者并没有差别!
一般开发中我们都是独立使用
后面 i++后置自增会使用相对较多,并且都是单独使用

例题：

let i= 1

console.log(i++ + ++i + i)

最后得出结果为7

比较运算符

>:左边是否大于右边

<:左边是否小于右边
>=:左边是否大于或等于右边

<=:左边是否小于或等于右边
==:左右两边值是否相等
===:左右两边是否类型和值都相等
!==: 左右两边是否不全等

对比：

= 单等是赋值
== 是判断
=== 是全等
开发中判断是否相等，强烈推荐使用===

字符串比较，是比较的字符对应的ASCI码

从左往右依次比较
如果第一位一样再比较第二位，以此类推
比较的少，了解即可

NaN不等于任何值，包括它本身【涉及到"NaN“都是false】

尽量不要比较小数，因为小数有精度问题

不同类型之间比较会发生隐式转换

逻辑运算符

使用场景:逻辑运算符用来解决多重条件判断
正确写法:num>5 && num<10

案例：

需求:用户输入一个，判断这个数能被4整除，但是不能被100整除,满足条件，页面弹出true，否则弹出 false

<body>
    <script>
        //1.用户输入
        let num = +prompt('请输入一个数字:')
        //2.弹出结果
        alert(num % 4 === 0 && num % 100 !== 0)
    </script>
</body>

运算符优先级

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

语句

表达式和语句

表达式是可以被求值的代码，JavaScript引擎会将其计算出一个结果。

例如：

语句是一段可以执行的代码。【比如: prompt()可以弹出一个输入框，还有 if语句 for 循环语句等】

区别:
表达式:因为表达式可被求值，所以它可以写在赋值语句的右侧。

【表达式：num=3+4】

语句:而语句不一定有值，所以比如 alert()、for和break 等语句就不能被用于赋值。
【语句：alert()弹出对话框console.log()控制台打印输出】

某些情况，也可以把表达式理解为表达式语句，因为它是在计算结果，但不是必须的成分(例如continue语句)

分支语句

程序三大流程控制语句

以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构
有的时候要根据条件选择执行代码，这种就叫分支结构
某段代码被重复执行，就叫循环结构

分支语句

分支语句可以让我们有选择性的执行想要的代码

lf分支语句

if语句有三种使用:单分支、双分支、多分支

单分支语句

语法：

if(条件)
{
    满足条件要执行的代码
}

括号内的条件为true时，进入大括号里执行代码
小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做~

双分支语句

语法：

if(条件){
    满足条件要执行的代码
} else {
    不满足条件执行的代码
}

案例：

输入用户名和密码

<body>
    <script>
    //1.用户输入
    let uname = prompt('请输入用户名:')
    let pwd = prompt('请输入密码:')
    //2.判断输出
    if(uname === 'pink'&& pwd ==='123456'){
        alert('恭喜登录成功')
    }else {
        alert('用户名或者密码错误')
    }
    </script>
</body>

多分枝语句

使用场景: 适合于有多个结果的时候，比如学习成绩可以分为:优良中差

语法：

if(条件1){
代码1
}else if(条件2){
代码2
}else if(条件3){
代码3} else {
代码n

释义:

先判断条件1，若满足条件1就执行代码1，其他不执行
若不满足则向下判断条件2，满足条件2执行代码2，其他不执行
若依然不满足继续往下判断，依次类推
若以上条件都不满足，执行else里的代码n
注:可以写N个条件，但这里演示只写2个

案例：

根据不同成绩返回不同的评价

<body>
    <script>
        //1.用户输入
        let score = +prompt('请输入成绩:')
        //2.判断输出if(score >= 90){
            alert('成绩优秀，宝贝，你是我的骄傲')
        }else if(score >= 70){
            alert('成绩良好，宝贝，你要加油哦~~')
        }else if(score >=60){
            alert('成绩及格，宝贝，你很危险~')
        else {
            alert('成绩不及格，宝贝，我不想和你说话，我只想用鞭子和你说话~')
    </script>
</body>

三元运算符

使用场景: 其实是比if双分支更简单的写法，可以使用三元表达式
符号:?与:配合使用
语法:

条件 ? 满足条件执行的代码 : 不满足条件执行的代码

一般用来取值

案例：

需求:用户输入2个数，控制台输出最大的值

数字补0案例
需求:用户输入1个数，如果数字小于10，则前面进行补0，比如 09 03 等

为后期页面显示时间做铺垫
利用三元运算符补 0计算

switch 语句

switch(数据){
    case 值1:
        代码1
        break
    case 值2:
        代码2
        break
    default:
        代码n
        break
}

释义:

找到跟小括号里数据全等的case值，并执行里面对应的代码
若没有全等 ===的则执行default里的代码
例:数据若跟值2全等，则执行代码2

switch case语句一般用于等值判断,不适合于区间判断
switch case一般需要配合break关键字使用没有break会造成case穿透

案例：

简单计算器
需求:用户输入2个数字，然后输入+ - * / 任何一个，可以计算结果

循环语句

断点调试

学习时可以帮助更好的理解代码运行，工作时可以更快找到bug

JS基础Day2-29-断点调试_哔哩哔哩_bilibili

浏览器打开调试界面
1.按F12打开开发者工具
2.点到sources一栏
3.选择代码文件

断点:在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

循环:重复执行一些操作
while :在..期间，所以 while循环就是在满足条件期间，重复执行某些代码。

while(循环条件){
    要重复执行的代码(循环体)
}

释义:

跟if语句很像，都要满足小括号里的条件为true才会进入循环体 执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

while 循环三要素:
循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。所以，while循环需要具备三要素:

变量起始值
终止条件(没有终止条件，循环会一直执行，造成死循环)
变量变化量(用自增或者自减)

循环退出

循环结束:

break:退出循环
continue:结束本次循环，继续下次循环

区别

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候，可以使用continue
break退出整个循环，一般用于结果已经得到,后续的循环不需要的时候可以使用

综合案例

简易ATM取款机案例
需求:用户可以选择存钱、取钱、查看余额和退出功能

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

<body>
  <script>
    // 1. 开始循环 输入框写到 循环里面
    // 3. 准备一个总的金额
    let money = 100
    while (true) {
      let re = +prompt(`
        请您选择操作：
        1.存钱
        2.取钱
        3.查看余额
        4.退出
        `)
      // 2. 如果用户输入的 4 则退出循环， break  写到if 里面，没有写到switch里面， 因为4需要break退出循环
      if (re === 4) {
        break
      }
      // 4. 根据输入做操作
      switch (re) {
        case 1:
          // 存钱
          let cun = +prompt('请输入存款金额')
          money = money + cun
          break
        case 2:
          // 取钱
          let qu = +prompt('请输入取款金额')
          money = money - qu
          break
        case 3:
          // 查钱
          alert(`您的银行卡余额是${money}`)
          break
      }
    }
  </script>
</body>

</html>