JavaScript 基础(2) - 笔记

简介: avaScript 是 Web 的编程语言。 所有现代的 HTML 页面都可以使用 JavaScript。 学习从初级到高级 JavaScript 知识。

JavaScript 基础(2) - 笔记

理解什么是流程控制,知道条件控制的种类并掌握其对应的语法规则,具备利用循环编写简易ATM取款机程序能力

1 运算符

1.1 算术运算符

数字是用来计算的,比如:乘法 * 、除法 / 、加法 + 、减法 - 等等,所以经常和算术运算符一起。

算术运算符:也叫数学运算符,主要包括加、减、乘、除、取余(求模)等

运算符 作用
+ 求和
- 求差
* 求积
/ 求商
% 取模(取余数),开发中经常用于作为某个数字是否被整除

注意:在计算失败时,显示的结果是 NaN (not a number)

// 算术运算符
console.log(1 + 2 * 3 / 2) //  4 
let num = 10
console.log(num + 10)  // 20
console.log(num + num)  // 20

// 1. 取模(取余数)  使用场景:  用来判断某个数是否能够被整除
console.log(4 % 2) //  0  
console.log(6 % 3) //  0
console.log(5 % 3) //  2
console.log(3 % 5) //  3

// 2. 注意事项 : 如果我们计算失败,则返回的结果是 NaN (not a number)
console.log('pink老师' - 2)
console.log('pink老师' * 2)
console.log('pink老师' + 2)   // pink老师2

1.2 赋值运算符

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

= 将等号右边的值赋予给左边,要求左边必须是一个容器

运算符 作用
+= 加法赋值
-+ 减法赋值
*= 乘法赋值
/= 除法赋值
%= 取余赋值
let num = 1
// num = num + 1
// 采取赋值运算符
// num += 1
num += 3
console.log(num)  // 4

1.3 自增/自减运算符

符号 作用 说明
++ 自增 变量自身的值加1,例如: x++
-- 自减 变量自身的值减1,例如: x--
  1. ++在前和++在后在单独使用时二者并没有差别,而且一般开发中我们都是独立使用
  2. ++在后(后缀式)我们会使用更多

注意:

  1. 只有变量能够使用自增和自减运算符
  2. ++、-- 可以在变量前面也可以在变量后面,比如: x++ 或者 ++x
<script>
    // let num = 10
    // num = num + 1
    // num += 1
    // // 1. 前置自增
    // let i = 1
    // ++i
    // console.log(i)

    // let i = 1
    // console.log(++i + 1)
    // 2. 后置自增
    // let i = 1
    // i++
    // console.log(i)
    // let i = 1
    // console.log(i++ + 1)

    // 了解 
    let i = 1
    console.log(i++ + ++i + i)
</script>

1.4 比较运算符

使用场景:比较两个数据大小、是否相等,根据比较结果返回一个布尔值(true / false)。

运算符 作用
> 左边是否大于右边
< 左边是否小于右边
>= 左边是否大于或等于右边
<= 左边是否小于或等于右边
=== 左右两边是否类型都相等(重点)
== 左右两边是否相等
!= 左右值不相等
!== 左右两边是否不全等

对比:

  • =单等是赋值
  • ==是判断
  • ===是全等
  • 开发中判断是否相等,强烈推荐使用 ===
  • 涉及到NaN 都是 false
<script>
  console.log(3 > 5)
  console.log(3 >= 3)
  console.log(2 == 2)
  // 比较运算符有隐式转换 把'2' 转换为 2  双等号 只判断值
  console.log(2 == '2')  // true
  // console.log(undefined === null)
  // === 全等 判断 值 和 数据类型都一样才行
  // 以后判断是否相等 请用 ===  
  console.log(2 === '2')
  console.log(NaN === NaN) // NaN 不等于任何人,包括他自己
  console.log(2 !== '2')  // true  
  console.log(2 != '2') // false 
  console.log('-------------------------')
  console.log('a' < 'b') // true
  console.log('aa' < 'ab') // true
  console.log('aa' < 'aac') // true
  console.log('-------------------------')
</script>

1.5 逻辑运算符

使用场景:可以把多个布尔值放到一起运算,最终返回一个布尔值。

符号 名称 日常读法 特点 口诀
&& 逻辑与 并且 符号两边有一个假的结果为假 一假则假
\ \ 逻辑或 或者 符号两边有一个真的结果为真 一真则真
! 逻辑非 取反 true变false false变true 真变假,假变真
A B A && B A \ \ B !A
false false false false true
false true false true true
true false false true false
true true true true false
<script>
    // 逻辑与 一假则假
    console.log(true && true)  // true
    console.log(false && true)  // false
    console.log(3 < 5 && 3 > 2)  // true
    console.log(3 < 5 && 3 < 2)  // false
    console.log('---------------')
    // 逻辑或 一真则真
    console.log(true || true)  // true
    console.log(false || true)  // true
    console.log(false || false)  // false
    console.log('---------------')
    // 逻辑非 取反
    console.log(!true)  // false
    console.log(!false)  // true

    console.log('---------------')

    let num = 6
    console.log(num > 5 && num < 10)
    console.log('-----------------')
  </script>

1.6 练习:判断一个数是4的倍数,且不是100的倍数

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

分析:

  1. 用户输入。
  2. 判断条件,看余数是不是0,如果是0就是能被整除,余数不是0,则不能被整除。
// 1.用户输入
let num = +prompt('请输入一个数字:')
// 2.弹出结果
alert(num % 4 === 0 && num % 100 !== 0)

1.7 运算符优先级

优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ -- !
3 算数运算符 先 * / % 后 + -
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 **先 && 后 \ \ **
7 赋值运算符 =
8 逗号运算符 ,

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

逻辑与比逻辑或优先级高

逻辑运算符优先级: !> && > ||

2 语句

2.1 表达式和语句

image.png

区别:

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

  • 表达式 num =3+4

语句:而语句不一定有值,所以比如alert()for和break等语句就不能被用于赋值。

  • 语句 alert() 弹出对话框 console.log() 控制台打印输出

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

2.2 分支语句

分支语句可以根据条件判定真假,来选择性的执行想要的代码。

分支语句包含:

  1. if分支语句(重点)
  2. 三元运算符
  3. switch语句

2.2.1 if 分支语句

语法:

if(条件表达式) {
   
   
  // 满足条件要执行的语句
}
  • 小括号内的条件结果是布尔值,为 true 时,进入大括号里执行代码;为false,则不执行大括号里面代码
  • 小括号内的结果若不是布尔类型时,会发生隐式转换转为布尔值,类似Boolean()
  • 如果大括号只有一个语句,大括号可以省略,但是,俺们不提倡这么做~
<script>
    // 单分支语句
    // if (false) {
    
    
    //   console.log('执行语句')
    // }
    // if (3 > 5) {
    
    
    //   console.log('执行语句')
    // }
    // if (2 === '2') {
    
    
    //   console.log('执行语句')
    // }
    //  1. 除了0 所有的数字都为真
    //   if (0) {
    
    
    //     console.log('执行语句')
    //   }
    // 2.除了 '' 所有的字符串都为真 true
    // if ('pink老师') {
    
    
    //   console.log('执行语句')
    // }
    // if ('') {
    
    
    //   console.log('执行语句')
    // }
    // // if ('') console.log('执行语句')

    // 1. 用户输入
    let score = +prompt('请输入您的高考成绩:')
    // 2. 进行判断输出
    if (score >= 700) {
    
    
      alert('恭喜考过700分')
    }
    console.log('-----------------')
  </script>

2.2.2 if 双分支语句

如果有两个条件的时候,可以使用 if else 双分支语句

if (条件表达式){
   
   
  // 满足条件要执行的语句
} else {
   
   
  // 不满足条件要执行的语句
}

例如:

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

练习:判断闰年案例

需求:让用户输入年份,判断这一年是闰年还是平年并弹出对应的警示框。

分析:

  1. 能被4整除但不能被100整除,或者被400整除的年份是闰年,否则都是平年。
  2. 需要逻辑运算符。
<script>
    // 1.用户输入
    let year = +prompt('请输入年份:')
    // 2.判断输出
    if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
    
    
        alert(`${
      
      year}年是闰年`)
    } else {
    
    
        alert(`${
      
      year}年是平年`)
    }
</script>

2.2.3 if 多分支语句

使用场景: 适合于有多个条件的时候。

练习:输入成绩案例

需求:根据输入不同的成绩,反馈不同的评价。

注:

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

2.2.4 三元运算符(三元表达式)

使用场景: 一些简单的双分支,可以使用 三元运算符(三元表达式),写起来比 if else双分支 更简单

符号:? 与 : 配合使用

语法:

条件 ? 表达式1 : 表达式2

案例:判断2个数的最大值

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

分析:

  1. 用户输入2个数。
  2. 利用三元运算符输出最大值。
// 1.用户输入
let num1 = +prompt('请您输入第一个数:')
let num2 = +prompt('请您输入第二个数:')
// 2.判断输出-三元运算符
// if (num1 > num2) {
   
   
//     alert(num1)
// } else {
   
   
//     alert(num2)
// }
num1 > num2 ? alert(`最大值是:${num1}`) : alert(`最大值是:${num2}`)

案例:数字补0

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

分析:

  1. 为后期页面显示时间做铺垫。
  2. 利用三元运算符 补 0 计算。
    image.png
// 三元运算符(三元表达式)
// 1. 语法格式
// 条件 ? 表达式1 : 表达式2 

// 2. 执行过程 
// 2.1 如果条件为真,则执行表达式1
// 2.2 如果条件为假,则执行表达式2

// 3. 验证
// 5 > 3 ? '真的' : '假的'
console.log(5 < 3 ? '真的' : '假的')
// let age = 18
// age = age + 1

// 1.用户输入
let num = +prompt('请您输入一个数字:')
// 2.判断输出- 小于10才补0
// num = num < 10 ? '0' + num : num
num = num >= 10 ? num : '0' + num
alert(num)

2.2.5 switch语句(了解)

使用场景: 适合于有多个条件的时候,也属于分支语句,大部分情况下和 if多分支语句 功能相同。

注意:

  1. switch case语句一般用于等值判断,if适合于区间判断。
  2. switch case一般需要配合break关键字使用 没有break会造成case穿透。
  3. if 多分支语句开发要比switch更重要,使用也更多。

例如:

// switch分支语句
// 1. 语法
// switch (表达式) {
   
   
//   case 值1:
//     代码1
//     break

//   case 值2:
//     代码2
//     break
//   ...
//   default:
//     代码n
// }

switch (1) {
   
   
    case 1:
        console.log('您选择的是1')
        break  // 退出switch
    case 2:
        console.log('您选择的是2')
        break  // 退出switch
    case 3:
        console.log('您选择的是3')
        break  // 退出switch
    default:
        console.log('没有符合条件的')
        break
}

案例:简单计算器

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

分析:

  1. 用户输入数字。
  2. 用户输入不同算术运算符,可以去执行不同的运算(switch)。
// 1.用户输入 2个数字 +  操作符号 + - * /
let num1 = +prompt('请您输入第一个数字:')
let num2 = +prompt('请您输入第二个数字:')
let sp = prompt('请您输入 + - * / 其中一个:')
// 2.判断输出
switch (sp) {
   
   
    case '+':
        alert(`两个数的加法操作是${
     
     num1 + num2}`)
        break
    case '-':
        alert(`两个数的减法操作是${
     
     num1 - num2}`)
        break
    case '*':
        alert(`两个数的乘法操作是${
     
     num1 * num2}`)
        break
    case '/':
        alert(`两个数的除法操作是${
     
     num1 / num2}`)
        break
    default:
        alert(`请输入+ - * /`)
        break
}

2.3 循环语句

2.3.1 断点调试

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

浏览器打开调试界面

  1. F12打开开发者工具
  2. 点到源代码一栏 ( sources )
  3. 选择代码文件

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

image.png

2.3.2 while循环

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

1.语法:

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

释义:

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

例如:

// while循环: 重复执行代码

// 1. 需求: 利用循环重复打印3次 '月薪过万不是梦,毕业时候见英雄'
let i = 1
while (i <= 3) {
   
   
  document.write('月薪过万不是梦,毕业时候见英雄~<br>')
  i++   // 这里千万不要忘了变量自增否则造成死循环
}

2.while 循环三要素

循环的本质就是以某个变量为起始值,然后不断产生变化量,慢慢靠近终止条件的过程。

循环三要素:

1.初始值 (经常用变量)

2.终止条件(没有终止条件,循环会一直执行,造成死循环)

3.变量的变化量(用自增或自减)

例如:

<script>
  // // 1. 变量的起始值
  // let i = 1
  // // 2. 终止条件
  // while (i <= 3) {
    
    
  //   document.write('我要循环三次 <br>')
  //   // 3. 变量的变化量
  //   i++
  // }
  // 1. 变量的起始值
  let end = +prompt('请输入次数:')
  let i = 1
  // 2. 终止条件
  while (i <= end) {
    
    
    document.write('我要循环三次 <br>')
    // 3. 变量的变化量
    i++
}
</script>

练习:while 练习

需求:使用while循环,页面中打印,可以添加换行效果。

  1. 页面输出1-100

    • 核心思路:利用 i ,因为正好和 数字对应。
    // 1.页面输出1~100
    let i = 1
    while (i <= 100) {
         
         
        document.write(`这是第${
           
           i}个数<br>`)
        i++
    }
    
  2. 计算从1加到100的总和并输出

    • 核心思路:
      • 声明累加和的变量 sum
      • 每次把 i 加到 sum 里面
    // 2.页面输出1~100  累加和
    let i = 1  // 变量的起始值
    let sum = 0  // 累加和变量
    while (i <= 100) {
         
         
        // sum = sum + i
        sum += i
        i++
    }
    console.log(sum)  // 5050
    
  3. 计算1-100之间的所有偶数和

    • 核心思路:
      • 声明累加和的变量 sum
      • 首先利用if语句把 i 里面是偶数筛选出来
      • 把 筛选的 i 加到 sum 里面
    // 3.页面输出1~100 偶数和
    let i = 1
    let sum = 0
    while (i <= 100) {
         
         
        // 筛选偶数
        if (i % 2 === 0) {
         
         
            sum = sum + i
        }
        // 每次循环都要自加
        i++
    }
    console.log(sum)  // 2550
    

2.4 循环退出

2.4.1 中止循环

break 中止整个循环,一般用于结果已经得到, 后续的循环不需要的时候可以使用(提高效率)

continue 中止本次循环,一般用于排除或者跳过某一个选项的时候

// 打印5句话
// let i = 1
// while (i <= 5) {
   
   
//     if (i === 3) {
   
   
//         break  // 退出整个循环
//     }
//     console.log(`我要吃${i}个包子`)
//     i++
// }  
let i = 1
while (i <= 5) {
   
   
    if (i === 3) {
   
   
        i++
        continue  // 结束本次循环
    }
    console.log(`我要吃${
     
     i}个包子`)
}

2.4.2 无限循环

1.while(true) 来构造“无限”循环,需要使用break退出循环。(常用)

2.for(;;) 也可以来构造“无限”循环,同样需要使用break退出循环。

案例:页面弹框

需求:页面弹出对话框,’你爱我吗‘,如果输入’爱‘,则结束,否则一直弹出对话框。

分析:

  1. 循环条件永远为真,一直弹出对话框。
  2. 循环的时候,重新让用户输入。
  3. 如果用户输入的是:爱,则退出循环(break)。
// 无限循环  
// 需求: 页面会一直弹窗询问你爱我吗?
// (1). 如果用户输入的是 '爱',则退出弹窗
// (2). 否则一直弹窗询问

// 1. while(true) 无限循环
// while (true) {
   
   
//   let love = prompt('你爱我吗?')
//   if (love === '爱') {
   
   
//     break
//   }
// }

// 2. for(;;) 无限循环
for (; ;) {
   
   
  let love = prompt('你爱我吗?')
  if (love === '爱') {
   
   
    break
  }
}

3 综合案例-ATM存取款机

需求:用户可以选择存钱、取钱、查看余额和退出功能。

image.png

分析:

①:提示输入框写到循环里面(无限循环)

②:用户输入4则退出循环 break

③:提前准备一个金额预先存储一个数额 money

④:根据输入不同的值,做不同的操作

​ (1) 取钱则是减法操作, 存钱则是加法操作,查看余额则是直接显示金额

​ (2) 可以使用 if else if 多分支 来执行不同的操作

完整代码:

// 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 += cun
            break
        case 2:
            // 取钱
            let qu = +prompt('请输入取款金额')
            money -= qu
            break
        case 3:
            // 存钱
            alert(`您的银行卡余额是${
     
     money}`)
            break
    }
}
目录
相关文章
|
7月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
|
7月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
45 0
|
1月前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
47 2
|
3月前
|
JavaScript 前端开发 Java
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
|
4月前
|
存储 缓存 自然语言处理
深入理解JS | 青训营笔记
深入理解JS | 青训营笔记
41 0
|
6月前
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
142 1
|
6月前
|
Web App开发 JavaScript iOS开发
技术笔记:js数组定义和方法(包含ES5新增数组方法)
技术笔记:js数组定义和方法(包含ES5新增数组方法)
|
6月前
|
JavaScript BI
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
技术笔记:JS获取子节点、父节点和兄弟节点的方法实例总结
94 0
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的笔记记录分享网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的笔记记录分享网站附带文章源码部署视频讲解等
34 0