JavaScript基础02

1 - 运算符(操作符)

1.1 运算符的分类

  • 运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有:
  • 算数运算符

  • 递增和递减运算符

  • 比较运算符

  • 逻辑运算符

  • 赋值运算符

1.2 算数运算符

  • 算术运算符概述

    概念:算术运算使用的符号,用于执行两个变量或值的算术运算。

    image-20230219202647006

  • 浮点数的精度问题

    浮点数值的最高精度是 17 位小数,但在进行算术计算时其精确度远远不如整数。

  • var result = 0.1 + 0.2;    // 结果不是 0.3,而是:0.30000000000000004

 

所以:不要直接判断两个浮点数是否相等 !

  • 表达式和返回值

    表达式:是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合

    简单理解:是由数字、运算符、变量等组成的式子

    表达式最终都会有一个结果,返回给开发者,称为返回值

1.3 递增和递减运算符(一元运算符,只有一个数的操作符)

  • 递增和递减运算符概述

    如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减( -- )运算符来完成。 在 JavaScript 中,递增(++)和递减( -- )既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。 注意:递增和递减运算符必须和变量配合使用。

  • 递增运算符

    • 前置递增运算符

      ++num 前置递增,就是自加1,类似于 num = num + 1,但是 ++num 写起来更简单。 使用口诀:先自加,后返回值

    • var num = 10;
      alert(++num + 10);
    • 后置递增运算符

      num++ 后置递增,就是自加1,类似于 num = num + 1 ,但是 num++ 写起来更简单。

      使用口诀:先返回原值,后自加

    • var num = 10;
      alert(10 + num++); 
      alert(num)

1.4 比较运算符(关系运算符)

  • 比较运算符概述

    概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false)作为比较运算的结果。

    image-20230219202803318

  • 等号比较

    image-20230219202912612

console.log(18 == '18');
console.log(18 === '18'); 

1.5 逻辑运算符(布尔运算符)

  • 逻辑运算符概述

    概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断

  • 逻辑与&&

    两边都是 true才返回 true,否则返回 false

  • 逻辑或 ||

    两边有一边是true返回 true,否则返回 false

  • 逻辑非 !

    逻辑非(!)也叫作取反符,用来取一个布尔值相反的值,如 true 的相反值是 false

  • var isOk = !true;
    console.log(isOk);  
    逻辑运算练习题:var num = 7;var str = "我爱你~中国~";console.log(num > 5 && str.length >= num); console.log(num < 5 && str.length >= num); console.log(!(num < 10)); console.log(!(num < 10 || str.length == num));
  • 短路运算(逻辑中断)

  • 有一种情况:123 && 456 是值 或者是 表达式 参与逻辑运算?

  • 短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

    • 逻辑与

      语法: 表达式1 && 表达式2

- 如果第一个表达式的值为真,则返回表达式2
  
- 如果第一个表达式的值为假,则返回表达式1 

 console.log( 123 && 456 );     
console.log( 0 && 456 );          
console.log( 123 && 456&& 789 ); 

逻辑或

语法: 表达式1 || 表达式2

- 如果第一个表达式的值为真,则返回表达式1
  
- 如果第一个表达式的值为假,则返回表达式2

console.log( 123 || 456 );        console.log( 0 ||  456 );        console.log( 123 || 456 || 789 );  

 1.6 赋值运算符

概念:用来把数据赋值给变量的运算符

var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

1.7 运算符优先级

image-20230219202237935

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

  • 逻辑与比逻辑或优先级高

  • 	console.log(4 >= 6 || ('人' != '阿凡达' && !(12 * 2 == 144) && true));var num = 10;console.log(5 == num / 2 && (2 + 2 * num).toString() === '22');var a = 3 > 5 && 2 < 7 && 3 == 4;console.log(a);var b = 3 <= 4 || 3 > 1 || 3 != 2;console.log(b);var c = 2 === '2';console.log(c);var d = !c || (b && a);console.log(d);

    2 - 流程控制

    2.1 流程控制概念

  • 在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

    简单理解:流程控制就是来控制代码按照一定结构顺序来执行

    流程控制主要有三种结构,分别是**顺序结构**、**分支结构**和**循环结构**,代表三种代码执行的顺序。

  • image-20230219204038517

2.2 顺序流程控制

  • 顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的。 ​

2.3 分支流程控制

分支结构

由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果

  • JS 语言提供了两种分支结构语句:if 语句、switch 语句

if 语句

  • 语法结构

// 条件成立执行代码,否则什么也不做
if (条件表达式) {// 条件成立执行的代码语句
}

 语句可以理解为一个行为,循环语句和分支语句就是典型的语句。一个程序由很多个语句组成,一般情况下,会分割成一个一个的语句。

if else语句(双分支语句)

if else if 语句(多分支语句)

  • 语法结构

  • // 条件成立  执行 if 里面代码,否则执行else 里面的代码
    if (条件表达式) {// [如果] 条件成立执行的代码
    } else {// [否则] 执行的代码
    }
    
  • 执行流程

  • 语法结构

  • // 适合于检查多重条件。
    if (条件表达式1) {语句1;
    } else if (条件表达式2)  {语句2;
    } else if (条件表达式3)  {语句3;....
    } else {// 上述条件都不成立执行此处代码
    }
    

2.4 三元表达式

  • 语法结构

  • 表达式1 ? 表达式2 : 表达式3;

  • 执行思路

  • 如果表达式1为 true ,则返回表达式2的值,如果表达式1为 false,则返回表达式3的值

  • 简单理解: 就类似于 if else (双分支) 的简写

  • 3>5?alert("数学真好呀"):alert("回炉吧!")var a=16,b=15,c=24;
    (a>b?a:b)>c?alert(a>b?a:b):alert(c)

2.5 switch分支流程控制

  • 语法结构

    switch 语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用 switch。

  • switch( 表达式 ){ case value1:// 表达式 等于 value1 时要执行的代码break;case value2:// 表达式 等于 value2 时要执行的代码break;default:// 表达式 不等于任何一个 value 时要执行的代码
    }
    switch (8) {case 1:console.log('这是1');break;case 2:console.log('这是2');break;case 3:console.log('这是3');break;default:console.log('没有匹配结果');}
    • switch :开关 转换 , case :小例子 选项

    • 关键字 switch 后面括号内可以是表达式或值, 通常是一个变量

    • 关键字 case , 后跟一个选项的表达式或值,后面跟一个冒号

    • switch 表达式的值会与结构中的 case 的值做比较

    • 如果存在匹配全等(===) ,则与该 case 关联的代码块会被执行,并在遇到 break 时停止,整个 switch 语句代码执行结束

    • 如果所有的 case 的值都和表达式的值不匹配,则执行 default 里的代码

      注意: 执行case 里面的语句时,如果没有break,则继续执行下一个case里面的语句。案例21注意事项

  • switch 语句和 if else if 语句的区别

    • 一般情况下,它们两个语句可以相互替换

    • switch...case 语句通常处理 case为比较确定值的情况, 而 if…else…语句更加灵活,常用于范围判断(大于、等于某个范围)

    • switch 语句进行条件判断后直接执行到程序的条件语句,效率更高。而if…else 语句有几种条件,就得判断多少次。

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity组件开发--短连接HTTP

1.网络请求管理器 using LitJson; using Cysharp.Threading.Tasks; using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.Networking; using UnityEngine.Events;using System.Web; using System.Text; using Sy…

安防视频云平台/可视化监控云平台ARM版EasyCVR无法下载录像文件,如何解决?

视频集中存储/云存储/视频监控管理平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;实现视频资源的鉴权管理、按需调阅、全网分发、智能分析等。GB28181视频监控/AI智能大数据视频分析EasyCVR平台已经广泛应用在工地…

Google I/O大会:Android 13

3个体验升级的方向 以智能手机为场景核心、 扩大智能终端的应用边界以及实现多设备间更好地协同。具体到系统体验层&#xff0c;安卓13将支持图标颜色随主题更换、为不同应用设定使用的语言、新的媒体中心界面等等&#xff0c;同时谷歌也推出了自家的钱包应用&#xff08;Goog…

065:vue中将一维对象数组转换为二维对象数组

第065个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

如何将ArcGIS工程文件迁移到ArcGIS Pro内

当你刚接触ArcGIS Pro的时候&#xff0c;尝试新建一个工程文件会发现工程文件的后缀已经改变&#xff0c;那么以前在ArcGIS内辛苦制作的工程文件是否就不能在ArcGIS Pro内使用了&#xff0c;答案是否定的&#xff0c;对此Esri也给出了解决方案&#xff0c;这里为大家介绍一下迁…

yolov8 瑞芯微 RKNN 的 C++部署,部署工程难度小、模型推理速度快

之前写过两次yolov8目标检测部署&#xff0c;后续继续思考&#xff0c;针对部署还有优化空间&#xff0c;本示例的部署方式优化了部署难度&#xff0c;加快了模型推理速度&#xff08;略微增加了后处理的时耗&#xff09;。 特别说明&#xff1a;如有侵权告知删除&#xff0c;…

【数据库系统概论】期末复习3

系列文章 期末复习1 期末复习2 系列文章试述 SQL 语言的特点。什么是基本表&#xff1f;什么是视图&#xff1f;两者的区别和联系是什么&#xff1f;试述视图的优点。哪类视图是可以更新的&#xff1f;哪类视图是不可更新的&#xff1f;各举一例说明。连接查询嵌套查询数据更新…

WPF 布局

了解 WPF中所有布局如下&#xff0c;我们一一尝试实现&#xff0c;本文档主要以图形化的形式展示每个布局的功能。 布局&#xff1a; Border、 BulletDecorator、 Canvas、 DockPanel、 Expander、 Grid、 GridView、 GridSplitter、 GroupBox、 Panel、 ResizeGrip、 Separat…

Google的Ndk-Sample学习笔记之一(hello-jniCallback)

前言: 近段时间因为项目的需求,需要使用JNI,所以下载了Google的Ndk-Sample学习下,准备记录 下来,留给后期自己查看 问题点一:JNI_OnLoad方法必须返回JNI的版本 JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *reserved) {JNIEnv *env;memset(&g_ctx, 0, sizeof(g_…

Elasticsearch 索引文档时create、index、update的区别【学习记录】

本文基于elasticsearch7.3.0版本。 一、思维导图 elasticsearch中create、index、update都可以实现插入功能&#xff0c;但是实现原理并不相同。 二、验证index和create 由上面思维导图可以清晰的看出create、index的大致区别&#xff0c;下面我们来验证下思维导图中的场景&…

FineBI实战项目一(17):热门商品Top10分析开发

点击新建组件&#xff0c;创建热门商品Top10组件。 选择柱状图&#xff0c;拖拽cnt&#xff08;总数&#xff09;到横轴&#xff0c;拖拽goodName到纵轴。 选择排序规则。 修改横轴和纵轴的标签名称 切换到仪表板&#xff0c;拖拽组件到仪表板 效果如下&#xff1a;

【动态规划】 【字典树】C++算法:472 连接词

作者推荐 【动态规划】458:可怜的小猪 涉及知识点 动态规划 字典树 LeetCode472 连接词 给你一个 不含重复 单词的字符串数组 words &#xff0c;请你找出并返回 words 中的所有 连接词 。 连接词 定义为&#xff1a;一个完全由给定数组中的至少两个较短单词&#xff08;不…