JavaScript学习02

JavaScript学习02

运算符

  1. 赋值运算符: 对变量进行赋值

= ; += ; -= ; *= ; /= ; %= ;

  1. 一元运算符

正负号;自增运算符++; 自减运算符-- ;

  let i = 1
  console.log(i++) // 1 后置自增,先执行语句再加法
  console.log(++i) // 3 前置自增,先执行加法后执行语句,两次加法后为3
  let ii = 1
  console.log(ii++ + 1) // 2 后置自增,最后加法
  // ++i i++ 单独使用没有区别 常用i++

复杂运算

  let i = 1 
  console.log(i++ + ++i + i) // 7 = 1+3+3 第一次加法时左边是1,但i已经变成2
  console.log(i) // 3
  1. 比较运算符

在这里插入图片描述

  console.log(3 > 5) //false
  console.log(3 >= 3) // true
  console.log(2 == 2) //true
  // == 会发生隐式转换
  console.log(2 == '2') // true  ‘2’变成了2 双等号只能判断值
  console.log(undefined == null) // true
  console.log(undefined === null) // false
  console.log(2 === '2') // false 全等判断值和数据类型
  // NaN的比较始终为false
  console.log(NaN == NaN) // false
  console.log(NaN === NaN) //false

字符串的比较是ASCII码的比较,且是逐位比较

  console.log('a' < 'b') // true
  console.log('a' < 'A') // false
  console.log('aa' < 'ab') // true
  console.log('aa' < 'abc') // true
  1. 逻辑运算符

在这里插入图片描述

  1. 运算符优先级

在这里插入图片描述

语句

  • 表达式:可以被求值的代码,可以写在赋值语句的右侧
  • 语句: 可以执行的一段代码

某些情况,表达式可以理解为表达式语句(例如continue)

程序三大控制语句

  • 顺序结构 :从上往下顺序执行
  • 分支结构 :根据条件选择执行代码
  • 循环结构 :反复执行某段代码

分支语句

if 分支语句

单分支

if (条件) {

​ 条件满足执行的代码

}

if{}中只有一条语句时,可以省略“{}”,但是并不推荐省略

  // 单分支语句
  // 除了数字0 其他数字都是true
  if (0) {
    console.log('执行1')
  }
  if (2) {
    console.log('执行2')
  }
  // 除了空字符串 其他字符串
  if ('') {
    console.log('执行3')
  }
  if ('abc') {
    console.log('执行4')
  }

页面输出

在这里插入图片描述

双分支

if (条件) {

​ 条件满足执行的代码块

} else {

​ 不满足条件执行的代码块

}

判断闰年案例

  // 1. 用户输入年份
  // 2. 判断输入
  let year = +prompt('请输入年份:')
  if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
    alert('您输入的年份是闰年!')
    console.log(`${year}是闰年`)
  } else {
    alert('您输入的年份是平年!')
    console.log(`${year}是平年`)
  }

多分支

if (条件1) {

​ 代码块1

} else if (条件2) {

​ 代码块2

} else if (条件3) {

​ 代码块3

} else {

​ 代码块4

}

释义

先判断条件1,若满足条件1就执行代码1,其他不执行

若不满足则向下判断条件2,满足条件2执行代码2,其他不执行

若依然不满足继续往下判断,依次类推

若以上条件都不满足,执行else里的代码块

输入成绩案例

  // 1. 用户输入
  let score = +prompt('请输入成绩')
  // 2. 判断输出
  if (score >= 90) {
    alert('成绩优秀,真棒!')
  } else if (score >= 70) {
    alert('成绩良好,继续加油!')
  } else if (score >= 60) {
    alert('成绩及格,继续努力!')
  } else {
    alert('成绩不合格!')
  }
三元运算符

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

  // 三元运算符
  // 返回两个数中的较大值
  let a = 3
  let b = 5
  let max = a > b ? a : b
  console.log(`${a}${b}中较大的是${max}`) // 3和5中较大的是5

数字补0案例

    // 需求:用户输入1个数,如果数字小于10,则前面进行补0,例如09、03
    // 1. 用户输入
    let num = prompt('请您输入一个数字:')
    num = num < 10 ? 0 + num : num
    // 2.判断输出
    console.log(num) 
    console.log(typeof num) // string
switch语句

switch (数据) {

​ case 值1:

​ 代码块1

​ break

​ case 值2:

​ 代码块2

​ break

​ case 值3:

​ 代码块3

​ break

​ default:

​ 代码4

​ // break

}

释义

找到跟小括号里数据全等的case值,并执行里面对应的代码

若没有全等 ( === ) 的则执行default里的代码

default可以不写在最后,写在最后时可以省略break

switch case语句一般用于等值判断,不适合于区间判断

switch case一般需要配合break关键字使用 没有break会造成case穿透

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

switch语句是可以使用中文的

  let name = prompt('请输入名字:')
  switch (name) {
    case '木子' :
      console.log(`您的名字是${name}`)
      break
    case '小明' :
      console.log(`您的名字是${name}`)
      break
    case '小红' :
      console.log(`您的名字是${name}`)
      break
    default:
      console.log(`查询不到信息`)
  }

if多分支语句与switch语句
  • switch…case语句通常处理case为确定值得情况,而if…else…语句更加灵活,通常用于范围判断
  • switch语句进行判断后直接执行到符合条件的代码,效率更高,而if…else…有几种判断条件,就得执行多少次
  • switch一定要注意必须是 === 全等 ,一定注意数据类型,同时注意不要忘记break

当分支比较少时,if…else语句执行效率高

当分支比较多时,switch语句执行效率更高,而且结构更清晰

循环语句

常用while循环和for循环

while循环

while (循环条件) {

​ 循环体

}

小括号里的条件为true才会进入 循环体 执行代码

while大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到小括号判断条件,直到括号内条件不满足,即跳出

while循环三要素

  1. 变量起始值
  2. 终止条件(没有终止条件,循环会一直执行,造成死循环)
  3. 变量变化量(用自增或者自减)
 // 1. 变量初始值
 let i = 1
 // 2. 终止条件
 while (i <= 3) {
   // 打印三次
   console.log('月薪过万')
   // 3. 变量的变化量
   i++
 }

页面输出

在这里插入图片描述


案例:计算1到100的偶数的和并输出

 // 1. 变量初始值
 let i = 1
 let sum = 0
 // 2. 终止条件
 while (i <= 100) {
   if (i % 2 === 0) {
     sum += i
   }
   // 3. 变量的变化量
   i++
 }
 console.log(sum) // 2550

break 和 continue 退出循环

  • break : 退出循环
  • continue : 结束本次循环,继续下一次循环

break

 // 1. 变量初始值
 let i = 1
 // 终止条件
 while (i <= 5) {
   // 打印 2句
   if (i === 3){
     break
   }
   console.log(`这是第${i}`)
   // 变量的变化量
   i++
 }

页面输出

在这里插入图片描述


continue

 // 1. 变量初始值
 let i = 1
 // 终止条件
 while (i <= 5) {
   // 打印 除第二句之外的句子

   if (i === 2){
     i++ // 如果不对i的值进行改变,则一直 i === 2 变成死循环
     continue
   }
   console.log(`这是第${i}`)
   // 变量的变化量
   i++
 }

页面输出

在这里插入图片描述


区别

continue : 退出本次循环,一般用于排除或者跳过某一个选项的时候, 可以使用continue

break : 退出整个循环,一般用于结果已经得到, 后续的循环不需要的时候可以使用

简易ATM取款机案例

  let money = 2000
  while (true) {
    let re = +prompt(`
    请您选择操作:
    1.存钱
    2.取钱
    3.查看余额
    4.退出
    `)
    // 用户输入4 退出服务
    if (re === 4) {
      break
    }
    // 根据用户输入进行操作
    switch (re) {
      // 存款
      case 1:
        let cun = +prompt('请输入存款金额:')
        // 存款金额不能少于0
        if (cun >= 0) {
          money += cun
        } else {
          alert('输入的数字不合法!')
        }
        break
      // 取款
      case 2:
        let qu = +prompt('请输入取款金额:')
        //取款金额不能少于0
        if ( qu >= 0) {
          //取款金额不能大于账号余额
          if (money >= qu) {
            money -= qu
          } else {
            alert('余额不足!')
          }
        } else {
          alert('输入的数字不合法!')
        }
        break
      // 余额打印
      case 3:
        alert(`您的余额是${money}`)
        break
      default :
        alert('error')
    }
  }

for循环

将初始值声明、循环条件、变化值写到一起,一目了然,最常用

for (变量起始值;终止条件;变量变化量) {

​ // 循环体

}

  // 打印三次
  for (let i = 0; i < 3; i++) {
    console.log('月薪过万')
  }

页面输出

在这里插入图片描述


for循环遍历数组

  // 定义一个数组
  let arr = [0,1,2,3,4,5]
  // 遍历数组
  for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
  }
  // arr[6]未赋值 输出undefined
  console.log(arr[6])

页面输出

在这里插入图片描述

for循环中也能使用 continue 和 break 和while循环同理,使用continue执行“i++”,遇到break结束for循环


for循环嵌套

在这里插入图片描述

打印n行m列星星

  let row = +prompt('请输入行数:')
  let col = +prompt('请输入列数:')
  // 外层循环打印行数
  for (let i = 0; i < row ; i++) {
    // 内层循环打印5个星星
    for (let j = 0; j < col ; j++) {
      document.write('⭐')
    }
    // 换行输出
    document.write('<br>')
  }

6行6列输出页面:

在这里插入图片描述


打印九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>九九乘法表</title>
  <style>
    span {
      display: inline-block;
      width: 100px;
      padding: 5px 10px;
      margin: 2px;
      border: 1px solid pink;
      border-radius: 5px;
    }
  </style>
</head>
<body>
<script>
  for (let i = 1; i <= 9; i++) {
    for (let j = 1; j <= i; j++) {
      document.write(`<span>${j} * ${i} = ${j * i}</span>`)
    }
    document.write('<br>')
  }
</script>
</body>
</html>

页面输出

在这里插入图片描述


for循环与while循环比较
  • 当如果明确了循环的次数的时候推荐使用for循环
  • 当不明确循环的次数的时候推荐使用while循环

数组的使用

  1. 数组声明
  2. 数组遍历
  // 声明数组
  let arr = [1, 2, 'hello', 'world']
  let arr1 = new Array( 3, 2, 'hello', 'world')  // 用对象声明,不推荐使用
  // 数组遍历
  for (let i = 0; i < arr.length; i++) {
    document.write(arr[i])
  }
  document.write('<br>')
  for (let i = 0; i < arr1.length; i++) {
    document.write(arr1[i])
  }

页面输出

在这里插入图片描述

数组求和、求平均值

  // 定义一个数组
  let arr = [2, 6, 1, 7,4]
  // 小测试
  let s
  console.log(typeof s) // undefined
  console.log(s) // undefined
  console.log(typeof (s + 1)) // number
  console.log(s + 1) // NaN
  console.log(typeof (s + '1')) // string
  console.log(s + '1') // undefined1
  console.log('--------------------')
  // 数组求和
  // sum 必须赋值
  let sum = 0
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i]
  }
  // 打印数组的和sum
  console.log(`数组的和为${sum}`)
  // 数组求平均值
  let avg = sum / arr.length
  console.log(`数组的平均值为${avg}`)

页面输出

在这里插入图片描述


数组求最大值、最小值

  // 定义一个数组
  let arr = [2, 6, 1, 77, 52, 25, 7]
  // 不需要赋值0
  let max = arr[0]
  // 遍历数组
  for (let i = 1; i < arr.length; i++) {
    if(max < arr[i]){
      max = arr[i]
    }
  }
  console.log(`数组的最大值为:${max}`) // 77
  // 不需要赋值0
  let min = arr[0]
  // 变量数组
  for (let i = 1; i < arr.length; i++) {
    if(min > arr[i]){
      min = arr[i]
    }
  }
  console.log(`数组的最小值为:${min}`) // 1
  // 也可以用三元运算符实现

页面输出

在这里插入图片描述


数组的增删改查

在这里插入图片描述

  let arr = []
  console.log(arr) // [] 空数组
  console.log(arr[0]) // undefined
  console.log('------------------')
  let arr1 = ['pink', 'red', 'green']
  // 修改元素
  console.log(`原数组:${arr1}`)
  arr1[1] = 'blue'
  console.log(`修改后的数组:${arr1}`)

页面输出

在这里插入图片描述


函数

增加

  1. 数组.push(元素1, 元素2, …,元素n) 方法:将一个多个元素添加到数组的末尾,并返回该数组的长度

  2. 数组.unshif(元素1, 元素2, …,元素n) 方法:将一个多个元素添加到数组的开头,并返回该数组的长度

删除

  1. 数组.pop() 方法:执行一次将从末尾删除一个元素,并返回删除元素

  2. 数组.shift() 方法:执行一次将从开头删除一个元素,并返回删除元素

  3. 数组.splice(起始位置,删除的个数n):从指定位置的下表开始,删除n个元素,若未指定个数,则删除至最后,返回值为删除元素

  let arr = ['red', 'orange', 'yellow', 'green']
  let re = null
  console.log(`原数组:${arr}`)
  // arr.push()在数组末尾添加元素
  re = arr.push('blue')
  console.log(`arr.push('blue')修改后的数组:${arr}`)
  console.log(`arr.push('blue')方法的返回值:${re}`)
  console.log('--------------------')
  // arr.unshift()在数组末尾添加元素
  re = arr.unshift('black')
  console.log(`arr.unshift('black')修改后的数组:${arr}`)
  console.log(`arr.unshift('black')方法的返回值:${re}`)
  console.log('--------------------')
  // arr.pop()在数组末尾添删除一个元素
  re = arr.pop()
  console.log(`arr.pop()修改后的数组:${arr}`)
  console.log(`arr.pop()方法的返回值:${re}`)
  console.log('--------------------')
  re = arr.shift()
  console.log(`arr.shift()修改后的数组:${arr}`)
  console.log(`arr.shift()方法的返回值:${re}`)
  console.log('--------------------')
  re = arr.splice(1,1)
  console.log(`arr.splice(1,1)修改后的数组:${arr}`)
  console.log(`arr.splice(1,1)方法的返回值:${re}`)
  console.log('--------------------')
  re = arr.splice(1)
  console.log(`arr.splice(1)修改后的数组:${arr}`)
  console.log(`arr.splice(1)方法的返回值:${re}`)

页面输出

在这里插入图片描述


数组元素筛选案例

需求:将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来,放入新数组

分析:

①:声明一个新的数组用于存放新数据newArr

②:遍历原来的旧数组, 找出大于等于 10 的元素

③:依次追加给新数组 newArr

  // 需要:将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来,放入新数组中
  let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
  // 1. 声明新数组
  let newArr =[]
  // 2. 遍历旧数组
  for (let i = 0; i < arr.length; i++) {
    // 3. 将满足条件的元素增加至新数组
    if (arr[i] >= 10) {
      newArr.push(arr[i])
    }
  }
  // 打印新数组
  console.log(newArr)

页面输出

在这里插入图片描述


数组去0案例

需求:将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后,形成一个不包含 0 的新数组

分析:

①:声明一个新的数组用于存放新数据newArr

②:遍历原来的旧数组, 找出不等于0的元素

③:依次追加给新数组 newArr

  let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
  // 1. 声明新数组
  let newArr =[]
  // 2. 遍历旧数组
  for (let i = 0; i < arr.length; i++) {
    // 3. 将满足条件的元素增加至新数组
    if (arr[i] !== 0) {
      newArr.push(arr[i])
    }
  }
  // 打印新数组
  console.log(newArr)

页面输出

在这里插入图片描述



  • 22
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值