声明

该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明

链接：https://www.runoob.com/

12、JavaScript运算符

运算符 = 用于给 JavaScript 变量赋值。

算术运算符 + 用于把值加起来。

y=5;
z=2;
x=y+z;//7

12.1 JavaScript算数运算符

下表中y=5

算术运算符练习

JavaScript代码

    
    



假设 y=5。
add
sub
mul
div
mold
selfAdd++
++selfAdd
selfSub--
--selfSub
计算 x=y+2，并显示结果。

计算 x=y-2，并显示结果。

计算 x=y*2，并显示结果。

计算 x=y/2，并显示结果。

计算 x=y%2，并显示结果。

计算 x=y++，并显示结果。

计算 x=++y，并显示结果。

计算 x=y--，并显示结果。

计算 x=--y，并显示结果。

生成页面效果

12.2 JavaScript赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

赋值运算符练习

JavaScript代码

    
    



设置 x=10 和 y=5。
=
+=
-=
*=
/=
%=
1.计算 x=y, 并显示结果

2.计算 x+=y, 并显示结果

3.计算 x-=y, 并显示结果

4.计算 x*=y, 并显示结果

5.计算 x/=y, 并显示结果

6.计算 x%=y, 并显示结果

生成页面效果

12.3 JavaScript连接符

+ 运算符用于把文本值或字符串变量加起来（连接起来）。

如需把两个或多个字符串变量连接起来，使用 + 运算符。

//1.连接两个或多个字符串变量
txt1="What a";
txt2="nice day";
txt3=txt1+txt2;		//what anice day
//2.1字符串之间增加空格
txt1="What a ";
txt2="nice day";
txt3=txt1+txt2;		//What a nice day
//2.2表达式插入空格
txt1="What a";
txt2="nice day";
txt3=txt1+" "+txt2;	//What a nice day

12.4 补充知识

1、对字符串和数字进行加法运算

规则:如果把数字与字符串相加，结果将成为字符串！

x=5+5;			//10
y="5"+5;		//55	
z="Hello"+5;	//Hello5

空文本 + 数字得到的运算结果都是把数字转成字符串，无论文本有多少个空格。但是空格会计入长度。

html会压缩空格， 所以直观上显示的是字符串，没有显示空格。

var result1 = 5+5+"abc"; 		//结果将是"10abc"
var result2 = ""+5+5+"abc"; 	//结果将是"55abc"
var result1=""+5;         		// 得到的结果是"5"
var result2=" "+5;        		// 得到的结果是" 5"
var result3="       "+5;  		// 得到的结果是"       5"

2、不同类型运算转换方式

1.字符串和数字相加，数字转成字符串.

var one="This is a test";
var two=123;
var three=one+two;

// 结果 three:This is a test123

2.数字和布尔值相加，布尔值false 转成 0，true 转成 1

var one=13;
var two=true;
var three=one+two;

// 结果 three:14

3.字符串与布尔值相加，布尔值转化成字符串。

4.数字与 null(空值) 相加，null 转化为数字 0

var car=null+3+4;    // 结果为7

5.字符串与 null(空值) 相加，null 转化为字符串

var car=null+"a";    // 结果为 nulla

1、字符串一个很能强大的数据类型；在执行加 + 时,将被加的对象统一处理为字符串。

2、bool 类型在与数字类型进行相加时，视为 0 或者 1 处理。

3、null 类型与数字类型进行累加时，视为 0 处理。

4、bool 类型与 null 类型进行累加时，视为其与整数类型累加处理。

5、undefined 除了与字符串进行累加时有效（undefined 视为字符串"undefined"处理），其他情况皆返回 NaN。

3、关于取模

取模运算的结果符号只与左边值的符号有关：

var x = 7 % 3; // 结果为 1
var y = 7 % (-3); // 结果为 1
var z = (-7) % 3; // 结果为 -1

• 如果 % 左边的操作数是正数，则模除的结果为正数或零；
• 如果 % 左边的操作数是负数，则模除的结果为负数或零。

4、JavaScript == 与 === 区别

1、对于 string、number 等基础类型，== 和 === 是有区别的

• a）不同类型间比较，== 之比较 "转化成同一类型后的值" 看 "值" 是否相等，=== 如果类型不同，其结果就是不等。
• b）同类型比较，直接进行 "值" 比较，两者结果一样。

2、对于 Array,Object 等高级类型，== 和 === 是没有区别的

进行 "指针地址" 比较

3、基础类型与高级类型，== 和 === 是有区别的

• a）对于 ==，将高级转化为基础类型，进行 "值" 比较
• b）因为类型不同，=== 结果为 false

12.5 JavaScript比较，逻辑和条件运算符

比较和逻辑运算符用于测试 true 或者 false。

1、比较运算符

• 比较运算符在逻辑语句中使用，以测定变量或值是否相等

• 可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动：

  if (age<18) x="Too young";
  

2、逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

3、条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符

语法如下：

variablename = (condition) ? value1 : value2 

例如：

voteable = (age < 18) ? "年龄太小" : "年龄已达到";
//如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"。

12.6 补充知识

1、多元运算符

function test(p){
    var a=5,b=12;
    return p>1?pb:p=6:p=3; // 这一行中出现了多个问号和冒号，看起来很乱怎么办呢
}

document.write(test(9));

其实很简单，寻找到多元运算符的头 ? 和尾 : 就好办多了

就成了这样:

p>1?pb:p=6:p=3

p>1? 整体 :p=3

1、当 p>1 时返回 pb:p=6

• 1.1、当 pb
• 1.2、当 p>=b 时返回 p=6

0||3 : 3

1||3 : 1

0&&3 : 0

1&&3 : 3