前端学习笔记-JS篇-02

news2024/11/28 21:51:21

运算符

赋值运算符

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

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

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

原始写法和简化写法【其实就是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 
  1. switch case语句一般用于等值判断,不适合于区间判断
  2. 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2034616.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

免费【2024】springboot 个人健康管理网站的设计与实现

博主介绍&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HTML、Jsp、PHP、Nodejs、Python、爬虫、数据可视化…

php 企业员工考勤系统—计算机毕业设计源码17108

摘要 由于数据库和数据仓库技术的快速发展&#xff0c;企业员工考勤系统建设越来越向模块化、智能化、自我服务和管理科学化的方向发展。员工管理系统对处理对象和服务对象&#xff0c;自身的系统结构&#xff0c;处理能力&#xff0c;都将适应技术发展的要求发生重大的变化。 …

Linux系统安全及应用(二):PAM安全认证

文章目录 4Linux中的PAM安全认证介绍su命令的安全隐患PAM认证原理和构成PAM安全认证流程PAM 配置文件结构说明PAM 控制标记的补充说明PAM 实例 4Linux中的PAM安全认证 介绍 PAM&#xff08;Pluggable Authentication Modules&#xff09;&#xff0c;可插拔式认证模块是一种高…

高翔【自动驾驶与机器人中的SLAM技术】学习笔记(七)卡尔曼滤波器三:卡尔曼滤波器公式推导【转载】

卡尔曼滤波器三&#xff1a;卡尔曼公式推导 转载来源&#xff1a;卡尔曼滤波&#xff1a;从入门到精通 简述 考虑一个SLAM 问题&#xff0c;它由一个运动方程&#xff1a; x t f ( x t − 1 , u t ) ω t (1) \mathbf{x}_{t}f(\mathbf{x}_{t-1},\mathbf{u}_{t}) \omega_…

尚品汇-ES(三十一)

目录&#xff1a; &#xff08;1&#xff09;封装搜索相关实体对象 &#xff08;2&#xff09;搜索接口封装 &#xff08;3&#xff09;在service-list-client模块添加远程接口 &#xff08;1&#xff09;封装搜索相关实体对象 搜索参数实体&#xff1a;SearchParam 搜索参…

haproxy高级功能配置

介绍HAProxy高级配置及实用案例 一.基于cookie会话保持 cookie value:为当前server指定cookie值&#xff0c;实现基于cookie的会话黏性&#xff0c;相对于基于 source 地址hash 调度算法对客户端的粒度更精准&#xff0c;但同时也加大了haproxy负载&#xff0c;目前此模式使用…

Service服务在Android中的使用

目录 一&#xff0c;Service简介 二&#xff0c;Service的两种启动方式 1&#xff0c;非绑定式启动Service 2&#xff0c;绑定式启动Service 三&#xff0c;Service的生命周期 1&#xff0c;非绑定式Service的生命周期 2&#xff0c;绑定式Service的生命周期 四&#xf…

BCArchive加密工具实测分享:为何我觉得它很实用?

前言 你是不是经常有这样的烦恼&#xff1a;重要的文件、私密的照片、敏感的资料&#xff0c;总是担心会不小心泄露出去&#xff1f;哎呀&#xff0c;别担心&#xff0c;别担心&#xff0c;我今天要介绍的这款软件&#xff0c;简直就是守护你数据安全的超级英雄&#xff01; 在…

CVE-2012-2122 mysql/mariaDB身份认证漏洞

简介&#xff1a; 当连接MariaDB/MySQL时&#xff0c;输入的密码会与期望的正确密码比较&#xff0c;不断的尝试登录连接&#xff0c;回导致MySQL认为两个密码是相同的。也就是说只要知道用户名&#xff0c;不断尝试就能够直接登入SQL数据库。 影响范围#所有的Mariadb和mysql版…

【吊打面试官系列-Elasticsearch面试题】Elasticsearch 在部署时,对 Linux 的设置有哪些优化方法?

大家好&#xff0c;我是锋哥。今天分享关于 【Elasticsearch 在部署时&#xff0c;对 Linux 的设置有哪些优化方法&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; Elasticsearch 在部署时&#xff0c;对 Linux 的设置有哪些优化方法&#xff1f; 1、64 GB 内存…

【STM32】CubeMX + CLion + FreeRTOS移植过程问题记录

文章目录 一、portable 文件选择二、自定义文件添加三、ST-Link v2 烧录问题四、STM32F407工程中程序无法启动调度器 前言   本文依照稚晖君分享的配置CLion用于STM32开发【优雅の嵌入式开发】&#xff0c;尝试配置STM32CubeMX CLion开发环境&#xff0c;并在此基础上移植Fre…

利用Emgucv绘制条形码边框16(C#)

EmguCV环境配置&#xff1a; ​​​​​​Emgu CV4图像处理之环境搭建1(C#)_emgucv 4.7-CSDN博客 本文测试环境&#xff1a; win10 64位 vistual studio 2019 Emgu CV 4.6.0 环境配置准备&#xff1a; 1 新增控制台项目&#xff0c;.net framework为4.7.2 2 把win-x…

minikube 实践练习

前言 我这里就简单跟着官方教程做了下练习 参考文档&#xff1a;https://v1-27.docs.kubernetes.io/zh-cn/docs/tutorials/hello-minikube/ 这里最重要的是&#xff0c;你需要提前配置好你的网络。 这个我教不了&#xff0c;之前发了篇帖子vmware实现科学上网审核不通过&…

ElasticSearch 全文检索相关性 算分

文章目录 相关性相关性Relevance相关性算法TF-IDFBM25 通过Explain查看TF-IDFboosting query 多字段查询 相关性dis_max query最佳字段查询multi_match querybest_fields最佳匹配字段most_fields 多数字段搜索cross_fields跨字段搜索 相关性 相关性Relevance 搜索的相关性算分…

Ubuntu 通过 docker 安装 Nginx 镜像 + 创建并运行 nginx01 容器

一、安装 nginx:精简版镜像 1. 查找有什么类型的 nginx 镜像 yammiemy-pc >/home/yammie $ docker search nginx 2. 下载精简版 nginx 镜像 yammiemy-pc >/opt $ docker pull nginx:alpine alpine: Pulling from library/nginx 46b060cc2620: Already exists 21af147…

【深度学习|目标跟踪】快速入门卡尔曼滤波!

卡尔曼滤波详解 申明一、什么是卡尔曼滤波1.1 卡尔曼滤波的使用场景1.2 卡尔曼滤波的定义 二、卡尔曼滤波公式详解&#xff08;无推导&#xff09;三、卡尔曼滤波的简单应用 申明 本博客参考了b站up主“华南小虎队”的卡尔曼滤波教学视频以及Lauszus Kristian Sloth Lauszus的卡…

联想Thinkpad驱动安装下载(官网的驱动下载)

联想Thinkpad驱动安装官网下载地址&#xff1a; 联想驱动管理_ThinkPad服务网站-联想服务 联想驱动管理 帮助您更快速准确的定位驱动 自动下载安装,安装驱动不求人 软件版本&#xff1a;V2.9.0719.1104 | 大小&#xff1a;5.7M最后更新&#xff1a;2021-07-21支持系统&#…

41.【C语言之外】聊聊Cheat Engine官方教程步骤6的思考

0.看前须知 有一定指针概念的基础 推荐阅读前几篇博文&#xff1a; 19.【C语言】指针&#xff08;重难点&#xff09;&#xff08;A&#xff09; 37.【C语言】指针&#xff08;重难点&#xff09;&#xff08;B&#xff09; 38.【C语言】指针&#xff08;重难点&#xff09…

oracle的exp.exe、imp.exe在哪下载?

需要oracle账号 地址&#xff1a; Instant Client for Microsoft Windows (x64) 64-bit 下载这个工具包

开发一个能打造虚拟带货直播间的工具!

在当今数字化时代&#xff0c;直播带货已成为电商领域的一股强劲力量&#xff0c;其直观、互动性强的特点极大地提升了消费者的购物体验。 然而&#xff0c;随着技术的不断进步&#xff0c;传统直播带货模式正逐步向更加智能化、虚拟化的方向演进&#xff0c;本文将深入探讨如…