Java Web——JavaScript运算符与流程语句

news2025/1/17 17:55:38

1. 运算符

1.1. 算数运算符

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

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

运算符

作用

+

求和

-

求差

*

求积

/

求商

%

取模(取余数)

加法(+):

let a = 5;
let b = 3;
let sum = a + b;
console.log(sum); // 输出:8

减法(-):

let a = 5;
let b = 3;
let difference = a - b;
console.log(difference); // 输出:2

乘法(*):

let a = 5;
let b = 3;
let product = a * b;
console.log(product); // 输出:15

除法(/):

let a = 10;
let b = 2;
let quotient = a / b;
console.log(quotient); // 输出:5

取余(%):

let a = 10;
let b = 3;
let remainder = a % b;
console.log(remainder); // 输出:1,因为10除以3余数为1。

1.2. 赋值运算符

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

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

运算符

作用

+=

加法赋值

-+

减法赋值

*=

乘法赋值

/=

除法赋值

%=

取余赋值

let a = 10;  
let b = 5;  
  
// 加法赋值运算符 +=   
a += b; // 这行代码等同于 a = a + b; ,所以 a 的值会变成 15  
console.log(a); // 输出:15  
  
// 减法赋值运算符 -=   
a -= b; // 这行代码等同于 a = a - b; ,所以 a 的值会变回 10  
console.log(a); // 输出:10  
  
// 乘法赋值运算符 *=   
a *= b; // 这行代码等同于 a = a * b; ,所以 a 的值会变成 50  
console.log(a); // 输出:50  
  
// 除法赋值运算符 /=   
a /= b; // 这行代码等同于 a = a / b; ,所以 a 的值会变成 10  
console.log(a); // 输出:10  
  
// 取余赋值运算符 %=  
a %= b; // 这行代码等同于 a = a % b; ,所以 a 的值会变成 0  
console.log(a); // 输出:0

1.3. 自增/自减运算符

在JavaScript中,自增和自减是特殊的运算符,用于增加或减少变量的值。

  1. 自增运算符 (++)
    这个运算符会将变量值增加1。它有两种使用方式:前缀和后缀。
  • 前缀形式:++variable,首先增加变量的值,然后返回增加后的值。
  • 后缀形式:variable++,首先返回变量的原始值,然后增加变量的值。

例如:

let count = 5;
console.log(++count);  // 输出:6,先自增,然后打印
console.log(count);    // 输出:6,打印当前的值

let count2 = 5;
console.log(count2++); // 输出:5,先打印,然后自增
console.log(count2);  // 输出:6,打印自增后的值

  1. 自减运算符 (--)
    这个运算符会将变量值减少1。它也有两种使用方式:前缀和后缀。
  • 前缀形式:--variable,首先减少变量的值,然后返回减少后的值。
  • 后缀形式:variable--,首先返回变量的原始值,然后减少变量的值。

例如:

let count = 5;
console.log(--count);  // 输出:4,先自减,然后打印
console.log(count);    // 输出:4,打印当前的值

let count2 = 5;
console.log(count2--); // 输出:5,先打印,然后自减
console.log(count2);  // 输出:4,打印自减后的值

1.4. 比较运算符

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

1.4.1. 常见比较运算符

运算符

作用

>

左边是否大于右边

<

左边是否小于右边

>=

左边是否大于或等于右边

<=

左边是否小于或等于右边

==

左右两边值是否相等

!=

左右值不相等

  1. 大于(>)运算符:
let result = 10 > 5; // 检查10是否大于5
console.log(result); // 输出:true

  1. 小于(<)运算符:
let result = 5 < 10; // 检查5是否小于10
console.log(result); // 输出:true

  1. 大于或等于(>=)运算符:
let result = 10 >= 10; // 检查10是否大于或等于10
console.log(result); // 输出:true

  1. 小于或等于(<=)运算符:
let result = 5 <= 10; // 检查5是否小于或等于10
console.log(result); // 输出:true

  1. 等于(==)运算符:
let result = '5' == 5; // 检查字符串'5'是否等于数字5,这里会发生类型转换
console.log(result); // 输出:true

  1. 不等于(!=)运算符:
let result = '5' != 5; // 检查字符串'5'是否不等于数字5
console.log(result); // 输出:false,因为在==运算符中,字符串和数字可以进行类型转换,所以这里字符串'5'和数字5是相等的,因此不等于运算结果为false。

1.4.2. 比较重要的两个比较运算符

!==

左右两边是否不全等

===

左右两边是否类型和值都相等(重点)

  1. !== 运算符

!== 是一个“不全等”运算符。当使用 !== 进行比较时,如果两个值的类型不同,或者两个值的类型相同但内容不同,那么结果为 true。也就是说,只有当两个值的类型和内容都完全相同时,结果才为 false

例如:

console.log(5 !== '5');  // 输出:true,因为数字5和字符串'5'类型不同
console.log(10 !== 10); // 输出:false,因为数字10和数字10类型和值都相同

  1. === 运算符

!== 相对应,=== 是一个“全等”运算符。当使用 === 进行比较时,它会同时检查两个值的类型和内容是否都相同。只有当两个值的类型和内容都完全相同时,结果才为 true。否则,结果为 false

例如:

console.log(5 === '5');  // 输出:false,因为数字5和字符串'5'类型不同
console.log(10 === 10); // 输出:true,因为数字10和数字10类型和值都相同

  1. 为什么使用 ===!== ?

使用 ===!== 的好处是它们可以防止JavaScript的自动类型转换,这在某些情况下可能会导致一些意想不到的问题。特别是在比较涉及到字符串和数字的情况时,使用 == 可能会导致错误的结果,因为它会尝试将字符串转换为数字进行比较。而 ===!== 不会进行这样的类型转换,因此它们提供了更准确、更可预测的比较结果。

所以,为了确保比较的准确性和避免可能出现的错误,通常推荐在JavaScript中使用 ===!== 运算符。


1.5. 逻辑运算符

在JavaScript中,可以使用这些逻辑运算符来操作布尔值,他们分别是&&(逻辑与)、||(逻辑或)和!(逻辑非)。

  1. &&(逻辑与):当且仅当两个操作数都为 true 时,结果才为 true。如果其中一个操作数为 false,结果就为 false。这就是“一假则假”的原则。
console.log(true && true);  // 输出:true
console.log(true && false); // 输出:false
console.log(false && true); // 输出:false
console.log(false && false); // 输出:false

  1. ||(逻辑或):只要两个操作数中有一个为 true,结果就为 true。只有当两个操作数都为 false 时,结果才为 false。这就是“一真则真”的原则。
console.log(true || true);  // 输出:true
console.log(true || false); // 输出:true
console.log(false || true); // 输出:true
console.log(false || false); // 输出:false

  1. !(逻辑非):逻辑非运算符用于翻转操作数的逻辑状态。如果操作数为 true,结果就为 false。如果操作数为 false,结果就为 true。这就是“真变假,假变真”的原则。
console.log(!true);  // 输出:false
console.log(!false); // 输出:true

2. 流程控制语句

2.1. 分支语句

分支语句。分支语句用于根据某些条件来决定执行哪些代码。简单来说,它们帮助程序在多个选项中选择执行路径。


分支语句:是程序中用于做选择的语句。想象一下,你到了一个交叉路口,你需要根据某些标志或信号来决定往哪个方向走。分支语句在程序中就起到了这样的作用。

  • if分支语句(重点):这是最常见的分支语句。它根据一个条件的真假来决定执行哪段代码。例如,如果说“如果天气好,我就出去玩”,那么“天气好”就是一个条件,根据这个条件是否为真,来决定是否执行“出去玩”这个动作。
  • 三元运算符:这是一个简短的if-else结构。它有三个部分,所以叫做三元运算符。它通常用于简单的条件判断。例如,在某些语言中,它可能是这样的:条件 ? 结果1 : 结果2。这意味着,如果条件为真,则结果为结果1,否则为结果2。
  • switch语句:用于多个选项的选择。当你有一个变量,并希望根据这个变量的不同值来执行不同的代码块时,可以使用switch语句。例如,一个星期有7天,根据星期的值(1到7)来决定做什么活动。

2.1.1. if分支语句

if语句用于根据条件执行代码块。它有两种常见形式:if语句和if...else语句。

if语句

let number = 10;

if (number > 5) {
  console.log("数字大于5");
}

上述代码中,如果number大于5,将输出"数字大于5"。

if...else语句

let number = 10;

if (number > 5) {
  console.log("数字大于5");
} else {
  console.log("数字小于等于5");
}

上述代码中,如果number大于5,将输出"数字大于5",否则输出"数字小于等于5"。

if...else if...else语句

这是一种更灵活的if语句形式,允许在多个条件之间进行判断,执行第一个满足条件的代码块。如果没有条件满足,也可以使用else语句来执行默认的代码块。

let number = 3;  
  
if (number === 1) {  
  console.log("数字是1");  
} else if (number === 2) {  
  console.log("数字是2");  
} else if (number === 3) {  
  console.log("数字是3");  
} else {  
  console.log("数字不是1、2或3");  
}

在上述代码中,根据number的值,逐个判断条件,执行第一个满足条件的代码块。如果number等于1,则输出"数字是1";如果number等于2,则输出"数字是2";如果number等于3,则输出"数字是3"。如果number的值没有匹配任何条件,将执行最后的else语句,输出"数字不是1、2或3"。

2.1.2. 三元运算符

三元运算符是一种简洁的if...else语句,它在一行代码中完成条件判断和操作。

示例代码:

let number = 10;
let message = (number > 5) ? "数字大于5" : "数字小于等于5";
console.log(message);

上述代码中,根据number是否大于5,将相应的消息赋值给message变量,并输出该消息。

2.1.3. switch语句

switch语句用于根据表达式的值执行不同的代码块。它可以替代多个if...else语句,使代码更清晰和易读。

示例代码:

let dayOfWeek = 2;

switch (dayOfWeek) {
  case 1:
    console.log("星期一");
    break;
  case 2:
    console.log("星期二");
    break;
  default:
    console.log("其他星期");
}

上述代码中,根据dayOfWeek的值,执行相应的case代码块,并输出对应的星期。如果dayOfWeek的值没有匹配的case,将执行default代码块。


2.2. 循环语句

2.2.1. while循环

while循环是一种前测试循环,这意味着在执行循环体内的代码块之前,先检查循环条件。如果条件为真,则执行循环体,然后再次检查条件。这个过程会一直重复,直到条件为假时停止循环

let count = 0; // 初始化计数器

while (count < 5) { // 在每次迭代前检查条件
    console.log(count); // 打印当前计数器的值
    count++; // 计数器递增
}
// 输出: 0, 1, 2, 3, 4

2.2.2. do...while循环

与while循环相比,do...while循环是一种后测试循环。这意味着它会先执行一次循环体内的代码块,然后再检查循环条件。如果条件为真,则再次执行循环体,并重复此过程。如果条件为假,则停止循环。

let count = 0; // 初始化计数器

do {
    console.log(count); // 打印当前计数器的值
    count++; // 计数器递增
} while (count < 5); // 在每次迭代后检查条件
// 输出: 0, 1, 2, 3, 4

2.2.3. for循环

for循环是一种更紧凑和常用的循环结构。它在单个语句中包含了初始化、条件和增量三个部分。

for (let count = 0; count < 5; count++) { // 初始化、条件和增量合并到一个语句中
    console.log(count); // 打印当前计数器的值
}
// 输出: 0, 1, 2, 3, 4

初始化:let count = 0

循环条件:count < 5

循环增量:count++


3. 数组

数组就好比是一个容器,可以存放多个相同类型的值,并且这些值都有一个从0开始的编号,这个编号就是索引。我们可以使用这个索引来访问、修改或操作数组中的元素。

3.1. 创建数组

使用数组字面量定义:这是最常见且最简洁的方式来定义数组。数组字面量是一个包含一系列元素的列表,每个元素之间由逗号分隔,并包围在方括号([ ])中。

	// 1. 语法,使用 [] 来定义一个空数组
  // 定义一个空数组,然后赋值给变量 classes
  let classes = [];

  // 2. 定义非空数组
  let classes = ['小明', '小刚', '小红', '小丽', '小米']

通过 [] 定义数组,数据中可以存放真正的数据,如小明、小刚、小红等这些都是数组中的数据,我们这些数据称为数组单元,数组单元之间使用英文逗号分隔。


3.2. 访问数组和数组索引

使用数组存放数据并不是最终目的,真正的目的是能够随时访问数组中的数据。这意味着数组不仅仅是一个存储数据的结构,更重要的是它能够让我们在需要的时候快速获取到数据。

为了达到这个目的,JavaScript为数组中的每一个数据单元都编了号。这些编号被称为索引值或下标。通过索引值,我们可以轻松地访问到数组中的数据单元。

例如,如果我们有一个数组arr,它包含三个元素,那么我们可以通过索引值来访问这些元素:arr[0]、arr[1]和arr[2]。这里的0、1和2就是索引值。


let fruits = ['苹果', '香蕉', '橙子', '葡萄', '西瓜']  
  
// 1. 访问数组  
document.write(fruits[0]) // 结果为:苹果  
document.write(fruits[2]) // 结果为:橙子  
document.write(fruits[4]) // 结果为:西瓜  
  
// 2. 通过索引值重新为数组赋值  
document.write(fruits[1]) // 结果为:香蕉  
// 重新为索引值为 1 的元素赋值  
fruits[1] = '黄香蕉'  
document.write(fruits[1]) // 结果为:黄香蕉

3.3. 数组长度

  1. 数组长度的获取
    每个JavaScript数组都有一个length属性,这个属性返回数组的最大索引加一。这意味着它通常返回数组中元素的数量。例如:
var arr = [1, 2, 3, 4, 5];  
console.log(arr.length);  // 输出:5

  1. 数组长度的设置
    length属性不仅是只读的,还可以设置。如果你设置数组的length为一个新的值,数组的长度就会改变。如果新的长度比原来的长度小,那么超出新长度的元素将会被删除。如果新的长度比原来的长度大,那么新的元素将会被添加到数组的末尾,这些新元素的值为undefined。例如:
var arr = [1, 2, 3, 4, 5];  
arr.length = 3;  
console.log(arr);  // 输出:[1, 2, 3]  
  
arr.length = 5;  
console.log(arr);  // 输出:[1, 2, 3, undefined, undefined]

3.4. 数组操作

  1. push:动态向数组的尾部添加一个元素。
var arr = [1, 2, 3, 4];
arr.push(5);
console.log(arr);  // 输出:[1, 2, 3, 4, 5]

  1. unshift:动态向数组的头部添加一个元素。
var arr = [1, 2, 3, 4];
arr.unshift(0);
console.log(arr);  // 输出:[0, 1, 2, 3, 4]

  1. pop:删除数组的最后一个元素。
var arr = [1, 2, 3, 4];
var lastElement = arr.pop();
console.log(arr);  // 输出:[1, 2, 3]
console.log(lastElement);  // 输出:4

  1. shift:删除数组的第一个元素。
var arr = [1, 2, 3, 4];
var firstElement = arr.shift();
console.log(arr);  // 输出:[2, 3, 4]
console.log(firstElement);  // 输出:1

  1. splice:动态删除任意元素。splice方法可以在任何位置删除元素,它接受两个参数,第一个参数是要开始删除的索引,第二个参数是要删除的元素数量。
var arr = [1, 2, 3, 4];
arr.splice(2, 1);  // 从索引2开始,删除1个元素
console.log(arr);  // 输出:[1, 2, 4]

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

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

相关文章

git拉取普通idea Java项目module没有build的问题

在不断完成一个项目的时候&#xff0c;会有不断新加的module&#xff0c;我们用git拉取时会发生没有识别新module的情况。 解决方法是右键项目名称&#xff0c;然后点击Open Module Settings 接下来&#xff0c;点击Module&#xff0c;加号&#xff0c;新建Module的名字就是在g…

高效文件管理:一键批量修改文件名,并统一转换为大写扩展名

在日常生活和工作中&#xff0c;文件处理成为了一项必不可少的任务。无论是个人还是企业&#xff0c;都需要管理大量的文件&#xff0c;包括图片、文档、音频和视频等。这些文件的名字可能千奇百怪&#xff0c;格式各不相同&#xff0c;而且往往需要按照一定的规则进行修改或整…

MFC 对话框

目录 一、对话款基本认识 二、对话框项目创建 三、控件操作 四、对话框创建和显示 模态对话框 非模态对话框 五、动态创建按钮 六、访问控件 控件添加控制变量 访问对话框 操作对话框 SendMessage() 七、对话框伸缩功能实现 八、对话框小项目-逃跑按钮 九、小项…

十一、统一网关GateWay(搭建网关、过滤器、跨越解决)

目录 一、网关技术的实现 在SpringCloud中网关的实现包括两种: 作用&#xff1a; 二、搭建网关服务 1、新建模块&#xff0c;并添加依赖 2、新建Gateway包&#xff0c;并编写启动类 3、编写yml文件 4、启动服务&#xff0c;并在网页内测试 5、步骤 三、路由断言工厂 …

Vue3 shallowRef 和 shallowReactive

一、shallowRef 使用shallowRef之前需要进行引入&#xff1a; import { shallowRef } from vue; 使用方法和ref 的使用方法一致&#xff0c;以下是二者的区别&#xff1a; 1. 如果ref 和 shallowRef 都传入的是普通数据类型的数据&#xff0c;那么他们的效果是一样的&#x…

OpenGL 的学习之路-4(变换)

三大变换&#xff1a;平移、缩放、旋转&#xff08;通过这三种变换&#xff0c;可以将图像移动到任意位置&#xff09; 其实&#xff0c;这背后对应的数学在 闫令琪 图形学课程 中有过一些了解&#xff0c;所以&#xff0c;理解起来也不觉得很困难。看程序吧。 1.画三角形&am…

【C++】类和对象(6)--运算符重载

目录 一 概念 二 运算符重载的实现 三 关于时间的所有运算符重载 四 默认赋值运算符 五 const取地址操作符重载 一 概念 C为了增强代码的可读性引入了运算符重载&#xff0c;运算符重载是具有特殊函数名的函数&#xff0c;也具有其返回值类型&#xff0c;函数名字以及参数…

【使用vscode在线web搭建开发环境--code-server搭建】

官方版本下载 https://github.com/coder/code-server/releases?q4.0.0&expandedtrue使用大于版本3.8.0,因为旧版本有插件市场不能访问的情况版本太高需要更新环境依赖 拉取安装包 []# wget "https://github.com/coder/code-server/releases/download/v4.0.0/code-…

[游戏开发][Untiy]跨平台可视化Log系统

工具介绍 今天介绍的主角是LogViewer 工具运行时长这个样子&#xff0c;Unity的Log日志都会在这里显示 如何安装 在Unity商店搜索Log&#xff0c;排名第一的就是它 也可以去Github官网下载源码&#xff1a; Unity-Logs-Viewerhttps://github.com/aliessmael/Unity-Logs-Vie…

机器学习的医疗乳腺癌数据的乳腺癌疾病预测

项目视频讲解:基于机器学习的医疗乳腺癌数据的乳腺癌疾病预测 完整代码数据分享_哔哩哔哩_bilibili 效果演示: 代码: #第一步!导入我们需要的工具 import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns %matplotlib inlin…

Python的数据分析包Pandas?示例文章完成版来啦~

文章目录 前言一、Pandas简介二、Python Pandas的使用 总结 前言 pandas 是基于NumPy 的一种工具&#xff0c;该工具是为了解决数据分析任务而创建的。 Pandas 是python的一个数据分析包&#xff0c;最初由AQR Capital Management于2008年4月开发&#xff0c;并于2009年底开源…

Javaweb之Vue指令案例的详细解析

2.3.5 案例 需求&#xff1a; 如上图所示&#xff0c;我们提供好了数据模型&#xff0c;users是数组集合&#xff0c;提供了多个用户信息。然后我们需要将数据以表格的形式&#xff0c;展示到页面上&#xff0c;其中&#xff0c;性别需要转换成中文男女&#xff0c;等级需要…

Consistency Models 阅读笔记

Diffusion models需要多步迭代采样才能生成一张图片&#xff0c;这导致生成速度很慢。Consistency models的提出是为了加速生成过程。 Consistency models可以直接一步采样就生成图片&#xff0c;但是也允许进行多步采样来提高生成的质量。 Consistency models可以从预训练的扩…

制作Go程序的Docker容器

今天突然遇到需要将 Go 程序制作成 Docker 的需求&#xff0c;所以进行了一些研究。方法很简单&#xff0c;但是官方文档和教程有些需要注意的地方&#xff0c;所以写本文进行记录。 源程序 首先介绍一下示例程序&#xff0c;示例程序是一个 HTTP 服务器&#xff0c;会显示si…

Docker安装Zookeeper

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

教你轻松解决win系统ucrtbased.dll丢失的问题,亲测有效!

ucrtbased.dll是一个动态链接库文件&#xff08;DLL&#xff09;&#xff0c;它是Windows操作系统中的一部分&#xff0c;主要负责提供操作系统和应用程序所需的函数和接口。这个文件包含了操作系统和应用程序共同使用的通用代码&#xff0c;以确保不同程序之间的兼容性和稳定性…

webstorm/idea配置leetcode刷题

File -> settings -> Plugins -> 搜索leetcode 安装插件&#xff08;截图显示我已经安装过了&#xff09;&#xff0c;安装完成后点击OK操作&#xff0c;在编辑器四个边角就会出现一个leetcode的插件 File -> settings -> Tools-> Leetcode plugin 点击…

CorelDRAW2024最新版本的图形设计软件

CorelDRAW2024是Corel公司推出的最新版本的图形设计软件。CorelDRAW是一款功能强大的矢量图形编辑工具&#xff0c;被广泛用于图形设计、插图、页面布局、照片编辑和网页设计等领域。 1. 新增的设计工具&#xff1a;CorelDRAW 2024引入了一些全新的设计工具&#xff0c;使用户能…

[Kettle] 字段处理

1.增加常量 常量是指在计算机程序运行过程中其值不能改变的量 常量可以是任何的数据类型&#xff0c;例如&#xff0c;圆周率"3.141159"、中国首都"北京"等都可以是常量 增加常量是指在数据中增加一个字段&#xff0c;并给字段设置一个固定的值 数据源…

4.2 Windows驱动开发:内核中进程线程与模块

内核进程线程和模块是操作系统内核中非常重要的概念。它们是操作系统的核心部分&#xff0c;用于管理系统资源和处理系统请求。在驱动安全开发中&#xff0c;理解内核进程线程和模块的概念对于编写安全的内核驱动程序至关重要。 内核进程是在操作系统内核中运行的程序。每个进…