【Javascript保姆级教程】运算符

简介: 【Javascript保姆级教程】运算符

前言


JavaScript是一种广泛应用的编程语言,它的基础知识对于编写前端和后端应用程序都至关重要。本教程将带您深入了解JavaScript中的五个关键概念:赋值运算符,自增运算符,比较运算符,逻辑运算符和运算符优先级。这些概念是编写任何JavaScript程序的基石。


一、运算符是什么


当我们编写计算机程序时,经常需要对数据进行各种操作,就像在数学中使用加号(+)或减号(-)一样。JavaScript的运算符就是一些特殊符号或关键字,它们帮助我们对数据进行各种操作,比如加法、减法、比较、判断等等。

举个例子,想象你有两个数字,想把它们相加。在JavaScript中,你可以使用加号运算符(+)来完成这个操作,就像这样:

let num1 = 5;
let num2 = 3;
let sum = num1 + num2; // 这里的+就是运算符,它把num1和num2相加,结果存储在sum中。


fb9e2f9c51a44f66bda56d1bd61494a7.png

所以,运算符就是编程中用来执行各种数学和逻辑操作的特殊符号或关键字。它们让我们可以对数据进行处理和计算,是编程的基本工具之一。


二、赋值运算符


赋值运算符用于将一个值赋给一个变量。以下是常见的赋值运算符:

=:将右边的值赋给左边的变量。


2.1 如何使用赋值运算符

let x = 10; // 将10赋给变量x


20970a5f49ba43d4a7fe270f88783462.png


2.2 示例代码1

使用=赋值变量

let name = "Alice";
let age = 30;


5d25b88369754c34acf247b898168775.png

2.3 示例代码2

更新变量的值

let count = 5;
count = count + 1; // 将count的值增加1


9be5847b50774153a867d4cbc9f3da88.png


三、自增运算符


自增运算符用于增加变量的值。以下是常见的自增运算符:


3.1 ++运算符

作用:将变量的值增加1。

如何使用

let x = 5;
x++; // x的值现在为6


08da2cb4072941e7a52617a5b1872c84.png

3.2 示例代码1

使用自增运算符

let count = 0;
count++; // count的值增加1


b454fb06557b4fb38b6665de511eafe0.png

3.3 示例代码2

自增运算符的前缀和后缀形式

let a = 5;
let b = 5;
let x = a++; // 先赋值再增加,x=5, a=6
let y = ++b; // 先增加再赋值,y=6, b=6


516f6b334f8043a092191f6c08d34952.png


四、比较运算符


4.1 常见的运算符

比较运算符用于比较两个值并返回一个布尔值(true或false)。以下是常见的比较运算符:

==:等于
!=:不等于
>:大于
<:小于
>=:大于等于
<=:小于等于


4.2 如何使用

let a = 5;
let b = 10;
let result = a > b; // result的值为false,因为a不大于b


f7914521f815424abbca12d857d446d9.png

4.3 示例代码1

使用比较运算符

let age = 25;
if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}


0e95c21fd0aa4bec81f9d8331232fd66.png

4.4 示例代码2

比较字符串

let str1 = "apple";
let str2 = "banana";
let isEqual = str1 == str2; // isEqual的值为false


dcfd55b418304bf78e97ceaa1d7cf4e0.png


五、逻辑运算符


逻辑运算符列举

逻辑运算符用于组合多个条件,并返回一个布尔值。以下是常见的逻辑运算符:

&&:逻辑与(AND)
||:逻辑或(OR)
!:逻辑非(NOT)


当在JavaScript中使用这些符号时,它们有以下含义:


&&(逻辑与):这个符号用于连接两个条件,如果两个条件都为真(true),那么整个表达式就为真。可以将它想象成一种要求两个条件同时满足才能执行某个操作的情况。比如:


||(逻辑或):这个符号也用于连接两个条件,但只要其中一个条件为真,整个表达式就为真。可以将它想象成一种只要满足其中一个条件就能执行某个操作的情况。比如:


!(逻辑非):这个符号用于对一个条件取反,如果条件本来为真,取反后就变为假;如果条件本来为假,取反后就变为真。可以将它想象成一种否定某个条件的情况。比如:


这些逻辑运算符在编写JavaScript代码时非常有用,它们帮助我们根据条件来做出不同的决策和执行不同的操作。


六、运算符优先级


6.1 运算符优先级列举

JavaScript中的运算符有不同的优先级,这会影响表达式的求值顺序。以下是一些常见运算符的优先级:

():括号具有最高优先级,用于明确指定运算顺序。
++和--:自增和自减运算符的优先级较高。
*、/和%:乘法、除法和取余运算的优先级相等,比加法和减法高。
+和-:加法和减法的优先级相等。
>、<、>=、<=:比较运算符的优先级相等。
==和!=:等于和不等于运算符的优先级相等。
&&:逻辑与运算符的优先级高于逻辑或运算符。
||:逻辑或运算符的优先级较低。


6.2 示例代码1:运算符优先级

let result = 2 + 3 * 4; // 结果为14,因为乘法优先级高于加法


8b1970556f414a13968ea27281f2cdeb.png

6.3 示例代码2:使用括号明确指定优先级

let result = (2 + 3) * 4; // 结果为20,因为括号改变了运算顺序


d5197a830c084670b655453c2f6da66b.png


总结


本教程介绍了JavaScript中的五个重要概念:赋值运算符,自增运算符,比较运算符,逻辑运算符和运算符优先级。这些概念是编写JavaScript代码的基础,对于理解和掌握JavaScript非常重要。通过学习和实践,您将能够更加熟练地使用这些运算符来创建功能强大的JavaScript程序。不断练习并尝试不同的示例,以提高您的编程技能。

相关文章
|
27天前
|
JavaScript 前端开发 开发者
混淆赋值运算符(=)和相等比较运算符(==, ===)(js的问题)
混淆赋值运算符(=)和相等比较运算符(==, ===)(js的问题)
|
3月前
|
JavaScript 前端开发 网络协议
​Node.js 教程(一) 基本概念与基本使用
​Node.js 教程(一) 基本概念与基本使用
|
4月前
|
JavaScript Android开发
AutoJs4.1.0实战教程---js文件打包发布成APK文件
AutoJs4.1.0实战教程---js文件打包发布成APK文件
126 0
AutoJs4.1.0实战教程---js文件打包发布成APK文件
|
4月前
|
JavaScript 前端开发 Java
JavaScript基础语法(运算符)
JavaScript基础语法(运算符)
32 0
|
4月前
|
JavaScript 前端开发
手把手教你学会js的原型与原型链,猴子都能看懂的教程
手把手教你学会js的原型与原型链,猴子都能看懂的教程
|
4天前
|
JavaScript 前端开发 开发者
解密 JavaScript 中的三元运算符:简洁而强大的条件表达式
解密 JavaScript 中的三元运算符:简洁而强大的条件表达式
10 0
|
2月前
|
JavaScript
js开发:请解释什么是ES6的扩展运算符(spread operator),并给出一个示例。
ES6的扩展运算符(...)用于可迭代对象展开,如数组和对象。在数组中,它能将一个数组的元素合并到另一个数组。例如:`[1, 2, 3, 4, 5]`。在对象中,它用于复制并合并属性,如`{a: 1, b: 2, c: 3}`。
12 3
|
2月前
|
JavaScript 前端开发 网络架构
JavaScript的数组教程(最详细,更新至es6新语法)
JavaScript的数组教程(最详细,更新至es6新语法)
|
2月前
|
JavaScript 前端开发 程序员
编程笔记 html5&css&js 074 Javascript 运算符
编程笔记 html5&css&js 074 Javascript 运算符
|
3月前
|
域名解析 JavaScript 关系型数据库
使用宝塔面板安装wiki.js详细教程
使用宝塔面板安装wiki.js详细教程