Document

🚀 个人主页 极客小俊
✍🏻 作者简介：程序猿、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

JavaScript 表达式

表达式是产生一个结果值的式子，JavaScript的表达式是由常量、变量和运算符等组成。
表达式可以作为参数传递给函数，或将表达式结果赋予给变量保存起来。
表达式的结果值有多种类型
例如
比如布尔型、字符串型或数值型等，因此常有逻辑表达式、数值表达式和布尔表达式之说。

JavaScript 操作数是什么

操作数是指表达式中的变量或常量，在javascript中也包含表达式的返回值（实际上就是一个常量），常提供计算用的数据。
下面是操作数在表达式中的形态

( A + B + C ) / D

其中A、B、C、D就是操作数，而“+”和“/”则是操作符，操作符将在下一节介绍。

操作数的数据类型由表达式的类型和运算符所支持的数据类型来决定的，上述代码中若表达式是数值表达式则需要A、B、C和D的类型皆为数值或可以转换为数值。

JavaScript 运算符

说到JavaScript 中的运算符，那可就多了 ， 嘿嘿!
JavaScript 中运算符是指程序设计语言中有运算意义的符号，类似于普通数学里运算符。

通常，每一门数学都定义了一个数集和在数集上可以进行的运算。

程序设计语言也一样，规定了其支持的数据类型以及数据可以进行的运算。

JavaScript的运算符包含算术运算符、逻辑运算符和一些特殊的运算符。

在JavaScript中有单目和多目之分!
单目运算符带一个操作数
多目运算符带多个操作数

举个栗子

( 1 ＋ 2 ) × 3     //数学表达式
++A				   // 左结合递增

而一般情况下表达式中的操作数要么是常量要么是变量，常量和变量都有其特定的数据类型。
构成表达式的操作数的数据类型是由变量或常量的类型来确定!

JavaScript 算术运算符

在JavaScript中算术运算符有 加(＋)、 减(－)、 乘(*) 、除(/) 、余数(% ) 商（Math.floor）
这里的加、减、乘、除、余数和数学中的运算方法一样!
例如：9/2=4.5，4*5=20，9%2=1

注意: -号除了可以表示减号还可以表示负号!

例如：x=-y

+号除了可以表示加法运算还可以用于字符串的连接

例如：“abc”+“def”=“abcdef”

加法运算符

加法运算符使用数学符号+，属于双目运算运算符，返回两个操作数的算术和。

操作数的类型要求为数值型，如果是字符串型则意义不同，主要运用在数值求和的场合

例如 操作数1 + 操作数2

举个栗子

var departmentA = 1000;				// 部门A 1000人
var departmentB = 375;				// 部分B 375人
var total = departmentA + departmentB;		// 公司总人数
document.write("公司总人数：" + total);		// 输出人数信息

减法运算符

减法运算符使用数学符号－，属于双目运算符，返回两个操作数的算术差，操作数类型要求为数值型。

含义与数学上的减法计算完全一样 : 操作数1 – 操作数2

举个栗子

var totalGas = "20升";					// 汽油总量
var used = "7.5升";					// 开出100公里后消耗
var overplus = parseFloat(totalGas) - parseFloat(used);		// 剩余
document.write("车子已经开了100公里，还剩汽油" + overplus + "升");	// 100公里时输出提示

乘法运算符

乘法运算符使用符号*，属于双目运算符，返回两个操作数的算术积。

运算意义上完全等同于数学上的乘法计算，使用语法如:操作数* 操作数2

举个栗子

var employee = 300;			// 雇员总数
var prize = 370;				// 每人奖金数额
var total = employee * prize;		// 预算总额
document.write("预算：" + total + "元");		// 输出总额

除法运算符

除法运算符使用符号/，也是属于双目运算符，操作数类型要求为数值型。

其返回两个操作数之商，JavaScript返回的商是实数集内的数据，也就是浮点型数据。

意义上等同于数学中的除法运算，因此可用在求商的场合，使用语法如:操作数1 / 操作数2

举个栗子

var total = 1000; 				// 1000元
var thieves = 3;				// 3个贼
document.write("每人瓜分所得：" + total / thieves + "元");// 输出3人瓜分后所得数额

模运算符

对于取模而言，可能有些新手朋友听上去有点新奇了!
其实取模运算符使用符号%，其作用是求一个数除以另一个数的余数。

操作数的类型要求为数值型或能转换为数值型的类型，属于双目运算符。
事实上模可以这样理解，如手表上的小时刻度，每到12点以后就是1点，此钟表的模为12。

通常取模运算可以取求某个数的倍数

举个栗子

for (i = 1; i < 1000; i++)               		// 找出0到1000中3的公倍数
   {
       if (i % 3 == 0)                   		// 当模3为0时即是3位数
       {
           document.write(i + " ");     		// 输出
       }
   }

循环输出如下结果

正负号运算符

负号运行符使用符号-，取负也就是等于取反。

等同于数学意义的上负号，属于单目运算符
语法如下

-操作数

举个栗子

var a = -1;			// 负数
var b = -a;			// 取反
document.write(a + "取反后得：" + b);	// 输出

那么相反的正号运算符使用符号+，针对数值类型操作数，意义上等同于数学上的正号。
属于单目运算符

语法如下

+ 操作数

自增自减运算符

递增运算符使用符号++，也称为自增运算符，属于单目运算符。

可使数值类型的变量值自增1，操作数只能是变量。

使用形式分左结合与右结合两种:

自增运算符的使用规则如下:
左结合在表达式中的效果是先递增再使用, 右结果则是先使用再递增，记住这个逻辑!

语法如下

	变量名++;					// 右结合递增
	++变量名;					// 左结合递增代码的执行

递增(＋＋) 、递减(－－)的运算方式

举个栗子

假如x=2，那么x++表达式执行后的值为3，x–表达式执行后的值为1, 那么i++相当于i=i+1，i–相当于i=i-1, 所以递增和递减可以放在变量前也可以放在变量后!

递减运算符
递减运算符使用符号--，也称为自减运算符，可使变量的值自减一。

效果与递增运算符完全相反，也有左结合与右结合之分，情况与递增运算符相同，此不赘述

举个栗子

var a = 5;						// 定义一个数字变量
document.write(a);	 				// 输出a原来的值
document.write("<br>");				// 输出换行标签
a--;			 			// a自减一（右结合）
document.write(a);					// 输出变量a
document.write("<br>");				// 输出换行
--a;			 			// a自减一（左结合）
document.write(a);					// 输出变量a
document.write("<br>");				// 输出换行
if (--a == 2)				// 测试左、右结合位于表达式中的情况
{
    document.write("<li>左结合的情形");			// 输出提示信息
}
if (a-- == 2)					// 等于2时
{
    document.write("<li>右结合的情形");			// 输出提示信息
}

JavaScript 逻辑运算符

逻辑运算符主要有逻辑与、或、非运算符
逻辑与运算符用&&表示，逻辑或运算符用||表示，它们属于双目运算符，操作数被当成布尔类型，可以是变量也可以是常量。

逻辑与运算符使用语法:

操作数1 && 操作数2	

逻辑或“||”运算符语法如下：

操作数1 || 操作数2

逻辑非运算符“!”，属于单目运算符，对操作数的逻辑值取反，操作数可以是变量或常量。

逻辑运算符在我们执行判断的时候用得非常多, 主要有以下这些

例如

等于 ( == )  、
不等于(!= ) 、 
大于( > ) 、 
小于( < ) 
大于等于(>=) 、
小于等于(<=)
与 (&&)  and、或(||) or (短路)、非(!)
全等(===)、
不全等(!==)

举个例子

console.log(1 && 1);   //输出1
console.log(1 && 0);   //输出0
console.log(0 && 0);   //输出0

console.log(1 || 1);   //输出1
console.log(1 || 0);   //输出1
console.log(0 || 0);   //输出0

console.log(!0);   //输出true  也可以代表 1
console.log(!1);   //输出false 也可以代表 0

JavaScript 位运算符

位运算符是对数字的二进制位进行操作的运算符。

这些运算符直接对数字的二进制表示进行运算，而不是对它们的数值进行运算。

所以你最好先去熟悉一下什么是二进制!

位运算符中包含了位与、位或、位异或和位非运算符!

位与、位或、位异或分别使用符号“&”、“|”、“^”, 属于双目运算符。

位与:是指把两个操作数所对应的二进制位相与 , 对应两个位都为1时, 结果值中对应位也为1，否则为0。

位或: 是指对应位间如果都不为0则结果的相应位为1，否则为0。

位异或: 是当两个操作数对应位不相同时结果的相应位即为1，否则为0

位非运:实现对操作数按位取反运算，属于单目运算符。

其中操作数可以是任意JavaScript类型的常量或变量

举个栗子

左移运算符 、带符号右移运算符 和高位补0右移运算符

左移位运算符<<，实现整体向左移动低位补0的功能，属于双目运算符 。
当移动的是有符号数，左边空出的位用数的符号位填充。

向右移动超出的位将被丢弃，称为带符号右移位操作。其运算符为>>。
前面已经提及右移运算时符号位的处理问题，是针对有符号数的情况。

当数是无符号数时，右移后在左边空出的位上填充0，称为无符号右移位。对应的运算符是>>>。

如图

所以我给大家总结了一下

1. 按位与（&）：两个数字的二进制位中，只有当对应的位都是 1 时，结果的该位才为 1，否则为 0。
   例如：5 & 3，5 的二进制是 101，3 的二进制是 011，所以结果是 001，即 1。

2. 按位或（|）：两个数字的二进制位中，只要有一个对应的位是 1，结果的该位就为 1。
   例如：5 | 3，结果是 111，即 7。

3. 按位异或（^）：两个数字的二进制位中，如果对应的位不同（一个为 0，一个为 1），则结果的该位为 1；如果相同，则为 0。
   例如：5 ^ 3，结果是 100，即 4。

4. 按位非（~）：对一个数字的二进制位取反，即 0 变为 1，1 变为 0。
   例如：~5，5 的二进制是 101，取反后是 -101（注意这里会有符号扩展），但在 JavaScript 中，结果会是 -6（因为 JavaScript 使用补码表示负数）。

5. 左移（<<）：将一个数字的二进制位向左移动指定的位数，右侧用 0 填充。
   例如：5 << 1，5 的二进制是 101，左移一位后是 1010，即 10。

6. 有符号右移（>>）：将一个数字的二进制位向右移动指定的位数，左侧用该数字的符号位填充（正数用 0 填充，负数用 1 填充）。
   例如：5 >> 1，结果是 010，即 2。

小提示
关于位运算如果你没有二进制计算的基础,那么你占时可以略过, 它说难也不难 说简单但对于初学者来说并不简单!

关于位运算符这里我简单介绍一下，因为对于刚刚接触的新手朋友 ，其实位运算符的使用场景几乎为零, 要是不懂的情况下，你可以忽略，后期我会单独说明!

JavaScript 关系运算符

相等运算符

相等运算符使用符号==，判断两个操作数是否相等。如果相等返回布尔值true，否则返回false。

属于双目运算符，两个操作数的数据类型可以任意。

运行时，==操作符将两端的操作数转换为同一种数据类型后再作比较。

使用语法

操作数1 == 操作数2

完全等同运算符

前述的相等运算符==进行的是非严格意义上的相等性判断，即通过类型转为后相等的也返回true。

而等同运算符===是严格意义上的相等，两个值和它们的类型完全一致时才返回true，

使用语法

操作数1 === 操作数2

不等运算符

不相等运算符使用符号“!=”，属于双目运算符，返回一个布尔值表示两个操作数是否相等。两个操作数类型任意，同时可以是变量也可以是常量。

语法如下

操作数1 != 操作数2

完全不等同运算符

不等同运算符，使用符号!==，属于双目运算符。

效果与等同运算符正好相反，如果两个数严格不相等则返回true，

使用语法

操作数1 !== 操作数2

大于和小于运算符

小于运算符是判断第一个操作数是否小于第二个操作数的运算符，返回一个布尔值。
使用符号<表示，常用于逻辑表达式中。

使用语法

操作数1 < 操作数2

小于或等于符运算符判断第一个操作数和第二个操作数间是否是小于等于关系，使用符号“<=”。

当第一个操作数小于或等于第二个操作数时表达式返回true，否则返回false。

大于运算符与小于运算符相似，效果相反, 大于或等于运算符相似，这里就不多讲了。

instanceof运算符

instanceof运算符返回一个布尔值，表明某对象是否是某个类的实例。

得到一个对象时，有时需要得知其属于哪个类，确定对象的身份。

使用语法：

result = Obj instanceof ClassEditPlus

in运算符

in运算符检查对象中是否有某特定的属性。

可以通过in运算符取得数组索引集合，这是个非常有用的运算符。

语法如下

Result = property in Object;

JavaScript 字符串运算符

字符串是一种数据类型，同样也存在相应的计算，因此程序设计语言也为字符串定义了相应的运算符。主要包括+、>、<、>=和<=这几种，这里主要讲解运算符+

运算符“+”，称为连接运算符，它的作用是将两个字符串按顺序连接成为新的字符串。

大大简化了字符串表达式的写法 。

这个运算符在字符串处理中使用是相当的广泛, 我们在实际项目开发中再去演示!

这里简单举个例子:

var str1 = '今天星期几了？';	// 字符串变量
var str2 = '星期五';		   // 字符串变量
document.write( str1 + str2 );	// 输出连接后的字符串

JavaScript 赋值运算符

赋值运算符用=表示，用于给变量赋值。赋值运算符将值与变量绑定起来!
也就是说，值写入了变量所引用的内存单元。

通常，给变量填入数据最直接的办法就是使用赋值运算符将值赋予变量。

例如

var name = “Jet”;				

以上代码将“Jet”赋予变量name，=运算符左边的操作数称为左值，其右边的操作数称为右值。

左值必须是变量，右值可以是变量、常量或表达式。

JavaScript 其它运算符

在JavaScript 中还有一些运算符, 例如:new运算符 、void运算符 、类型检测运算符 、对象属性存取运算符 、数组存取运算符 、delete运算符、 this运算符 等等。

条件运算符 可以根据条件在两个语句间选择一个来执行。
使用符号“?:”，属于三目运算符

语法如下

条件表达式 ? 语句1：语句2

如果条件 为真，则执行语句1，否则则执行语句2。

new运算符 是创建对象的一种方式。可以直接使用new运算符创建一个类的实例对象 。
void运算符是用在表达式不需要返回值时，可以使用void运算符来避免表达式返回值 。

对象属性存取运算符 ，用符号.表示。其作用是读取对象的属性、或保存值到对象的属性、或调用对象的方法。

数组存取运算符 ，JavaScript提供[]运算符用于存取数组元素，方括号中是要存取的元素的下标。
这个运算符大大方便了数组的编程 。

delete运算符，它可以删除对象的一个属性或数组的一个元素，JavaScript对象的属性可以动态添加。对于动态添加的属性可以用delete运算符将其删除 。

this运算符 ，this严格的说是一个关键字，也可以理解为运算符。
面向对象的编程中要引用当前对象，this运算符可以返回当前对象的引用。

this通常用在对象构造函数中，用来引用函数对象本身。
this表示当前对象，它可以操作当前对象的所有属性!

关于对象我在面向对象章节详细阐述!

运算符小练习

猜猜看以下表达式返回输出什么结果?

console.log(2 == '2')                  
console.log(2 === '2')                 
console.log(4 != '4')                 
console.log(4 !== '4')                 

var a = 2;
var b = 4;

var c = a<b | --b>--a;
console.log(c);
var c = a<b || --b>--a;
console.log(c);
var c = a<b &&--b>--a;
console.log(c);
var c = a<b & --b>--a;
console.log(c);

运算符的优先级

JavaScript中的运算符优先级是一套规则。

该规则在计算表达式时控制运算符执行的顺序。

具有较高优先级的运算符先于较低优先级的运算符得到执行。

同等级的运算符按左到右的顺序进行 ，下面这个表把运算符的优先级从高到低进行了归纳

如下表

. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ — - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
* / %	乘法、除法、取模
+ - +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
|	按位或
&&	逻辑与
||	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值

"👍点赞" "✍️评论" "收藏❤️"
大家的支持就是我坚持下去的动力!

---

如果以上内容有任何错误或者不准确的地方，🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法，
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇