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语言函数递归实际应用举例的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录前言一、递归的概念与思想二、递归的限制条件 三、递归的实际应用举例(一)求 n 的阶乘(二)顺序打印

Python Faker库基本用法详解

《PythonFaker库基本用法详解》Faker是一个非常强大的库,适用于生成各种类型的伪随机数据,可以帮助开发者在测试、数据生成、或其他需要随机数据的场景中提高效率,本文给大家介绍PythonF... 目录安装基本用法主要功能示例代码语言和地区生成多条假数据自定义字段小结Faker 是一个 python

Java Predicate接口定义详解

《JavaPredicate接口定义详解》Predicate是Java中的一个函数式接口,它代表一个判断逻辑,接收一个输入参数,返回一个布尔值,:本文主要介绍JavaPredicate接口的定义... 目录Java Predicate接口Java lamda表达式 Predicate<T>、BiFuncti

详解如何通过Python批量转换图片为PDF

《详解如何通过Python批量转换图片为PDF》:本文主要介绍如何基于Python+Tkinter开发的图片批量转PDF工具,可以支持批量添加图片,拖拽等操作,感兴趣的小伙伴可以参考一下... 目录1. 概述2. 功能亮点2.1 主要功能2.2 界面设计3. 使用指南3.1 运行环境3.2 使用步骤4. 核

一文详解JavaScript中的fetch方法

《一文详解JavaScript中的fetch方法》fetch函数是一个用于在JavaScript中执行HTTP请求的现代API,它提供了一种更简洁、更强大的方式来处理网络请求,:本文主要介绍Jav... 目录前言什么是 fetch 方法基本语法简单的 GET 请求示例代码解释发送 POST 请求示例代码解释

详解nginx 中location和 proxy_pass的匹配规则

《详解nginx中location和proxy_pass的匹配规则》location是Nginx中用来匹配客户端请求URI的指令,决定如何处理特定路径的请求,它定义了请求的路由规则,后续的配置(如... 目录location 的作用语法示例:location /www.chinasem.cntestproxy

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性,用于告诉浏览器某个元素在未来可能会发生哪些变化,本文给大家介绍CSSwill-change属性详解,感... will-change 是一个 css 属性,用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化

Python基础文件操作方法超详细讲解(详解版)

《Python基础文件操作方法超详细讲解(详解版)》文件就是操作系统为用户或应用程序提供的一个读写硬盘的虚拟单位,文件的核心操作就是读和写,:本文主要介绍Python基础文件操作方法超详细讲解的相... 目录一、文件操作1. 文件打开与关闭1.1 打开文件1.2 关闭文件2. 访问模式及说明二、文件读写1.

详解C++中类的大小决定因数

《详解C++中类的大小决定因数》类的大小受多个因素影响,主要包括成员变量、对齐方式、继承关系、虚函数表等,下面就来介绍一下,具有一定的参考价值,感兴趣的可以了解一下... 目录1. 非静态数据成员示例:2. 数据对齐(Padding)示例:3. 虚函数(vtable 指针)示例:4. 继承普通继承虚继承5.

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展,CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中,CSS(层叠样式表)不仅是用来控制网页的外观和布局,更是实现复杂交