JS基础:8个算数运算符详解

2024-05-07 01:28

本文主要是介绍JS基础:8个算数运算符详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

你好,我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃 大专生,一枚程序媛,感谢关注。回复 “前端基础题”,可免费获得前端基础 100 题汇总,回复 “前端基础路线”,可获取完整web基础路线导图。

308篇原创内容-更多前端系列内容可以go公众.h:云桃桃

后台回复“前端基础路线”可获取前端基础学习路线

后台回复“前端基础题”可得到前端基础100题汇总,持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

在 JavaScript 中,运算符主要分为以下几种类型:

  1. 算术运算符:用于执行数学运算,如加法(+)、减法(-)、乘法(*)、除法(/)、取模(%),递增(++)和递减(--)等。

  2. 赋值运算符:用于将一个值赋给一个变量,如等于(=)、加等于(+=)、减等于(-=)、乘等于(*=)、除等于(/=)、取模等于(%=)等。

  3. 比较运算符:用于比较两个值的大小关系,如等于(==)、不等于(!=)、大于(>)、小于(<)、大于等于(>=)、小于等于(<=)等。

  4. 逻辑运算符:用于执行逻辑运算,如与(&&)、或(||)、非(!)等。

  5. 位运算符:用于对整数进行位运算,如按位与(&)、按位或(|)、按位异或(^)、左移(<<)、右移(>>)等。

  6. 其他运算符:如条件运算符(?:)、逗号运算符(,)等。

这些运算符在 JavaScript 中具有不同的语法和功能,可以通过它们实现各种复杂的运算和逻辑判断。

我们今天先聊聊算数运算符,也就是数值运算,一共有 8 个,我们一起来看看吧。

加法(+):

var num1 = 5
var num2 = 3var sum = num1 + num2
// 输出结果:8
console.log(sum)

减法(-):

var num5 = 10
var num6 = 5var difference = num5 - num6
// 输出结果:5
console.log(difference)

乘法(*):

var num9 = 4
var num10 = 2var product = num9 * num10
// 输出结果:8
console.log(product)

除法(/):

var num13 = 10
var num14 = 2var quotient = num13 / num14
// 输出结果:5
console.log(quotient)

取模(%):

它也叫取余,也就是除法的余数。

var num17 = 15
var num18 = 4var remainder = num17 % num18
// 输出结果:3
console.log(remainder)

指数运算符(**):

指数运算符(**)用于计算幂,即一个数的次方。这个运算符是在 ES6 中引入的,提供了一种更简洁的方式来进行指数运算,使用Math.pow()函数也来可以完成相同的任务。

比如,计算 2 的 3 次方。

var result = 2 ** 3 // 2 的 3 次方等于 8
console.log(result) // 输出: 8

再比如,计算 5 的 2 次方,然后与 2 相乘。

var value = 5 ** 2 * 2 // 5 的 2 次方等于 25,然后乘以 2 得到 50
console.log(value) // 输出: 50

使用指数运算符可以使得代码更加简洁和易于理解,特别是在进行幂运算时。它还支持小数指数,允许进行开方等操作。例如,Math.sqrt(value)可以简写为value ** (1/2)

递加、递减

递增(++)和递减(--)运算符用于快速增加或减少变量的值。递增操作符有两种形式:前缀(++i)和后缀(i++),递减操作符同样也有前缀(--i)和后缀(i--)形式。

我们来一起看一下吧。

递增运算符(++

前缀递增:在变量值增加之后,返回增加后的值。

var a = 2
var b = ++a // a 先增加 1,然后 b 得到 a 的值,即 b = 3
console.log(a) // 输出: 3
console.log(b) // 输出: 3

后缀递增:返回变量当前的值,然后变量值再增加。

var c = 5
var d = c++ // c 先提供其值给 d,然后 c 增加 1
console.log(c) // 输出: 6
console.log(d) // 输出: 5

递减运算符(--

前缀递减:在变量值减少之后,返回减少后的值。

var e = 10
var f = --e // e 先减少 1,然后 f 得到 e 的值,即 f = 9
console.log(e) // 输出: 9
console.log(f) // 输出: 9

后缀递减:返回变量当前的值,然后变量值再减少。

var g = 15
var h = g-- // g 先提供其值给 h,然后 g 减少 1
console.log(g) // 输出: 14
console.log(h) // 输出: 15

我们在使用递增和递减运算符时,要注意它们是前缀还是后缀,因为这会影响运算符的返回值。前缀形式通常用于确保变量的值在表达式中立即更新,而后缀形式则用于在表达式求值之后进行更新。

算数运算符的优先级

那你可能会有这样的疑惑:如果一个语句涉及多个运算符,应该是什么样的顺序呢?

其实,算数运算符的优先级遵循数学中的运算法则,即先乘除后加减,同级运算符从左到右执行。以下是一些常用的算数运算符及其优先级顺序:

  1. 有括号的时候,先计算括号内的。

  2. 指数(** - 表示幂运算。

  3. 乘法(*)、除法(/)、取模(% - 乘除取模运算优先于加减运算。

  4. 加法(+)、减法(- - 加减运算是运算的最低级。

举一些例子吧。

指数运算符(**

var a = 2 ** 3 // a = 8
console.log(a) // 输出: 8

乘法和除法优先于加法和减法

var b = 10 * (3 + 2) // 先计算括号内的加法,再进行乘法
console.log(b) // 输出: 50var c = 10 + 20 / 4 // 先进行除法,再进行加法
console.log(c) // 输出: 25

加法和减法

var d = 10 + 20 - 5 // 加法和减法从左到右计算
console.log(d) // 输出: 25

需要注意的是,

当表达式包含多个同级别的运算符时,它们会按照从左到右的顺序进行计算。

那,为了确保算数运算按照预期的顺序执行,建议使用括号明确指定优先级,尤其是当涉及到多个不同优先级的运算符时。

var e = (10 + 20) * 4 // 先计算括号内的加法,再进行乘法
console.log(e) // 输出: 120var f = 10 - (3 + 2) / 4 // 先计算括号内的加法和除法,再进行减法
console.log(f) // 输出: 9

通过使用括号,你可以控制表达式的计算顺序,确保得到正确的结果。这是一种良好的编程实践,可以提高代码的可读性和准确性。

OK,本文完。

这篇关于JS基础:8个算数运算符详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/965944

相关文章

C++使用栈实现括号匹配的代码详解

《C++使用栈实现括号匹配的代码详解》在编程中,括号匹配是一个常见问题,尤其是在处理数学表达式、编译器解析等任务时,栈是一种非常适合处理此类问题的数据结构,能够精确地管理括号的匹配问题,本文将通过C+... 目录引言问题描述代码讲解代码解析栈的状态表示测试总结引言在编程中,括号匹配是一个常见问题,尤其是在

Debezium 与 Apache Kafka 的集成方式步骤详解

《Debezium与ApacheKafka的集成方式步骤详解》本文详细介绍了如何将Debezium与ApacheKafka集成,包括集成概述、步骤、注意事项等,通过KafkaConnect,D... 目录一、集成概述二、集成步骤1. 准备 Kafka 环境2. 配置 Kafka Connect3. 安装 D

Java中ArrayList和LinkedList有什么区别举例详解

《Java中ArrayList和LinkedList有什么区别举例详解》:本文主要介绍Java中ArrayList和LinkedList区别的相关资料,包括数据结构特性、核心操作性能、内存与GC影... 目录一、底层数据结构二、核心操作性能对比三、内存与 GC 影响四、扩容机制五、线程安全与并发方案六、工程

Spring Cloud LoadBalancer 负载均衡详解

《SpringCloudLoadBalancer负载均衡详解》本文介绍了如何在SpringCloud中使用SpringCloudLoadBalancer实现客户端负载均衡,并详细讲解了轮询策略和... 目录1. 在 idea 上运行多个服务2. 问题引入3. 负载均衡4. Spring Cloud Load

Springboot中分析SQL性能的两种方式详解

《Springboot中分析SQL性能的两种方式详解》文章介绍了SQL性能分析的两种方式:MyBatis-Plus性能分析插件和p6spy框架,MyBatis-Plus插件配置简单,适用于开发和测试环... 目录SQL性能分析的两种方式:功能介绍实现方式:实现步骤:SQL性能分析的两种方式:功能介绍记录

在 Spring Boot 中使用 @Autowired和 @Bean注解的示例详解

《在SpringBoot中使用@Autowired和@Bean注解的示例详解》本文通过一个示例演示了如何在SpringBoot中使用@Autowired和@Bean注解进行依赖注入和Bean... 目录在 Spring Boot 中使用 @Autowired 和 @Bean 注解示例背景1. 定义 Stud

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解

《如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解》:本文主要介绍如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别的相关资料,描述了如何使用海康威视设备网络SD... 目录前言开发流程问题和解决方案dll库加载不到的问题老旧版本sdk不兼容的问题关键实现流程总结前言作为

0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

《0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeekR1模型的操作流程》DeepSeekR1模型凭借其强大的自然语言处理能力,在未来具有广阔的应用前景,有望在多个领域发... 目录0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型,3步搞定一个应

SQL 中多表查询的常见连接方式详解

《SQL中多表查询的常见连接方式详解》本文介绍SQL中多表查询的常见连接方式,包括内连接(INNERJOIN)、左连接(LEFTJOIN)、右连接(RIGHTJOIN)、全外连接(FULLOUTER... 目录一、连接类型图表(ASCII 形式)二、前置代码(创建示例表)三、连接方式代码示例1. 内连接(I