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

相关文章

一文深入详解Python的secrets模块

《一文深入详解Python的secrets模块》在构建涉及用户身份认证、权限管理、加密通信等系统时,开发者最不能忽视的一个问题就是“安全性”,Python在3.6版本中引入了专门面向安全用途的secr... 目录引言一、背景与动机:为什么需要 secrets 模块?二、secrets 模块的核心功能1. 基

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2

一文详解如何在idea中快速搭建一个Spring Boot项目

《一文详解如何在idea中快速搭建一个SpringBoot项目》IntelliJIDEA作为Java开发者的‌首选IDE‌,深度集成SpringBoot支持,可一键生成项目骨架、智能配置依赖,这篇文... 目录前言1、创建项目名称2、勾选需要的依赖3、在setting中检查maven4、编写数据源5、开启热

Python常用命令提示符使用方法详解

《Python常用命令提示符使用方法详解》在学习python的过程中,我们需要用到命令提示符(CMD)进行环境的配置,:本文主要介绍Python常用命令提示符使用方法的相关资料,文中通过代码介绍的... 目录一、python环境基础命令【Windows】1、检查Python是否安装2、 查看Python的安

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,:本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点:二、安装uv1. 通过pip安装2. 通过脚本安装验证安装:配置镜像源(可

C++ 函数 strftime 和时间格式示例详解

《C++函数strftime和时间格式示例详解》strftime是C/C++标准库中用于格式化日期和时间的函数,定义在ctime头文件中,它将tm结构体中的时间信息转换为指定格式的字符串,是处理... 目录C++ 函数 strftipythonme 详解一、函数原型二、功能描述三、格式字符串说明四、返回值五

LiteFlow轻量级工作流引擎使用示例详解

《LiteFlow轻量级工作流引擎使用示例详解》:本文主要介绍LiteFlow是一个灵活、简洁且轻量的工作流引擎,适合用于中小型项目和微服务架构中的流程编排,本文给大家介绍LiteFlow轻量级工... 目录1. LiteFlow 主要特点2. 工作流定义方式3. LiteFlow 流程示例4. LiteF

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

MySQL存储过程之循环遍历查询的结果集详解

《MySQL存储过程之循环遍历查询的结果集详解》:本文主要介绍MySQL存储过程之循环遍历查询的结果集,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录前言1. 表结构2. 存储过程3. 关于存储过程的SQL补充总结前言近来碰到这样一个问题:在生产上导入的数据发现