全面解析：JavaScript中的各种运算符（算术、赋值、比较、逻辑、类型和位运算符以及一元运算符）
最编程
2024-08-05 11:17:45
...
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>运算符</title>
8 </head>
9 <body>
10 <script>
11 /*
12 1.JavaScript 算数运算符
13 1.1 (+) 加法
14 1.2 (-) 减法
15 1.3 (*) 乘法
16 1.4 (/) 除法
17 1.5 (%) 取模（余数）
18 1.6 (++)&(--) 递加&递减
19 2.JavaScript 赋值运算符
20 2.1 (=) 赋值运算符
21 2.2 (+=) 加法赋值运算符
22 2.3 (-=) 减法赋值运算符
23 2.4 (*=) 乘法赋值运算符
24 2.5 (/=) 除法赋值运算符
25 2.6 (%=) 取模赋值运算符
26 3.JavaScript 比较运算符
27 3.1 (==) 等于
28 3.2 (===) 等值等型
29 3.3 (!=) 不相等
30 3.4 (!==) 不等值或不等型
31 3.5 (>) 大于
32 3.6 (<) 小于
33 3.7 (>=) 大于或等于
34 3.8 (<=) 小于或等于
35 3.9 (?) 三元运算符
36 4.JavaScript 逻辑运算符
37 4.1 (&&) 逻辑与
38 4.2 (||) 逻辑或
39 4.3 (!) 逻辑非
40 5.JavaScript 类型运算符
41 5.1 (typeof) 返回变量的类型。
42 5.2 (instanceof) 返回 true，如果对象是对象类型的实例。
43 6.JavaScript 位运算符
44 6.1 ( &) 与
45 6.2 (|) 或
46 6.3 (~) 非
47 6.4 (^) 异或
48 6.5 (<<) 零填充左位移
49 6.6 (>>) 有符号右位移
50 6.7 (>>>) 零填充右位移
51 7. 一元运算符
52 7.1(delete)
53 7.2(void)
54 1.6 (++)&(--) 递加&递减
55 */
56
57
58 //1.JavaScript 算数运算符
59 //1.1 (+) 加法
60 /*
61 某个运算数是 NaN，那么结果为 NaN。
62 -Infinity(负无穷大) 加 -Infinity，结果为 -Infinity。
63 Infinity 加 -Infinity，结果为 NaN。
64 +0 加 +0，结果为 +0。
65 -0 加 +0，结果为 +0。
66 -0 加 -0，结果为 -0。
67 如果某个运算数是字符串，那么采用下列规则：
68 如果两个运算数都是字符串，把第二个字符串连接到第一个上。
69 如果只有一个运算数是字符串，把另一个运算数转换成字符串，结果是两个字符串连接成的字符串。
70 */
71 var a = 1 + 2;
72 var b ='1' + 2;
73 var c ='1' + '2';
74 var d ='aaa' + '2';
75 var e ='aaa' + 'bbb';
76 console.log('加法+++++++++++++++')
77 console.log('a='+a)//a=3
78 console.log('b='+b)//b=12
79 console.log('c='+c)//c=12
80 console.log('d='+d)//d=aaa2
81 console.log('e='+e)//e=aaabbb
82 console.log('-Infinity+(-Infinity)='+(-Infinity+(-Infinity)))//-Infinity+(-Infinity)=-Infinity
83 console.log('Infinity+(-Infinity)='+(Infinity+(-Infinity)))//Infinity+(-Infinity)=NaN
84 //1.2 (-) 减法
85 /*
86 某个运算数是 NaN，那么结果为 NaN。
87 Infinity 减 Infinity，结果为 NaN。
88 -Infinity 减 -Infinity，结果为 NaN。
89 Infinity 减 -Infinity，结果为 Infinity。
90 -Infinity 减 Infinity，结果为 -Infinity。
91 +0 减 +0，结果为 +0。
92 -0 减 -0，结果为 -0。
93 +0 减 -0，结果为 +0。
94 某个运算符不是数字，那么结果为 NaN；但是如果字符里面为纯的数字（'1'）则会转换为数字（1）进行运算，结果为number。
95 注释：如果运算数都是数字，那么执行常规的减法运算，并返回结果。
96 */
97 var a = 2 - 1;
98 var b ='1' - 2;
99 var c ='1' - '2';
100 var d ='aaa' - '2';
101 var e ='aaa' - 'bbb';
102 console.log('减法-----------------')
103 console.log('2 - 1= '+a)//a=1
104 console.log("'1' - 2= "+b)//b=-1
105 console.log("'1' - '2'= "+c)//c=-1
106 console.log("'aaa' - '2'= "+d)//d=NaN
107 console.log("'aaa' - 'bbb'= "+e)//e=NaN
108 //1.3 (*) 乘法
109 /*
110 如果结果太大或太小，那么生成的结果是 Infinity 或 -Infinity。
111 如果某个运算数是 NaN，结果为 NaN;但是如果字符里面为纯的数字（'1'）则会转换为数字（1）进行运算，结果为number。
112 Infinity 乘以 0，结果为 NaN。
113 Infinity 乘以 0 以外的任何数字，结果为 Infinity 或 -Infinity。
114 Infinity 乘以 Infinity，结果为 Infinity。
115 注释：如果运算数是数字，那么执行常规的乘法运算，即两个正数或两个负数为正数，两个运算数符号不同，结果为负数。
116 */
117 var a = 2 * 3;
118 var b ='2' * 3;
119 var c ='2' * '3';
120 var d ='aaa' * '2';
121 var e ='aaa' * 'bbb';
122 var f = NaN * 2;
123 var g = 0 * Infinity;
124 console.log('乘法***********************')
125 console.log('2 * 3 = '+a)//a=6
126 console.log("'2' * 3 = "+b)//b=6
127 console.log("'2' * '3'= "+c)//c=6
128 console.log("'aaa' * '2'= "+d)//d=NaN
129 console.log("'aaa' * 'bbb'= "+e)//e=NaN
130 console.log("NaN*2= "+f)//f=NaN
131 console.log("0 * Infinity= "+g)//g=NaN
132 //1.4 (/) 除法
133 /*
134 如果结果太大或太小，那么生成的结果是 Infinity 或 -Infinity。
135 如果某个运算数是 NaN，结果为 NaN;但是如果字符里面为纯的数字（'1'）则会转换为数字（1）进行运算，结果为number。
136 Infinity 被 Infinity 除，结果为 NaN。
137 Infinity 被任何数字除，结果为 Infinity。
138 Infinity 被 0 以外的任何数字除，结果为 Infinity 或 -Infinity。
139 注释：如果运算数是数字，那么执行常规的除法运算，即两个正数或两个负数为正数，两个运算数符号不同，结果为负数。
140 */
141 var a = 4 / 2;
142 var b ='4' / 2;
143 var c ='4' / '2';
144 var d ='aaa' / '2';
145 var e ='aaa' / 'bbb';
146 var f = NaN / 2;
147 var g = 0 / Infinity;
148 var h = 2 / 0;
149 console.log('除法///////////////////////')
150 console.log('4 / 2 = '+a)//a=2
151 console.log("'4' / 2 = "+b)//b=2
152 console.log("'4' / '2'= "+c)//c=2
153 console.log("'aaa' / '2'= "+d)//d=NaN
154 console.log("'aaa' / 'bbb'= "+e)//e=NaN
155 console.log("NaN / 2= "+f)//f=NaN
156 console.log("0 / Infinity= "+g)//g=0
157 console.log("2 / 0= "+h)//h=0
158 console.log("Infinity / 0 = "+Infinity/0)//Infinity
159 console.log("0 / 2 = "+0/2)//0
160 console.log("Infinity / 2 = "+Infinity/2)//Infinity
161 console.log("0 / 0 = "+0/0)//NaN
162 //1.5 (%) 取模（余数）
163 /*
164 如果被除数是 Infinity，或除数是 0，结果为 NaN。
165 Infinity 被 Infinity 除，结果为 NaN;但是如果字符里面为纯的数字（'1'）则会转换为数字（1）进行运算，结果为number。
166 如果除数是无穷大的数，结果为被除数。
167 如果被除数为 0，结果为 0。
168 注释：如果运算数是数字，那么执行常规的算术除法运算，返回除法运算得到的余数。
169 */
170 var a = 4 % 3;
171 var b ='4' % 3;
172 var c ='4' % '3';
173 var d ='aaa' % '3';
174 var e ='aaa' % 'bbb';
175 var f = NaN % 2;
176 var g = 0 % Infinity;
177 var h = 2 % 0;
178 console.log('取模%%%%%%%%%%%%%%%%%%%%%%%')
179 console.log('4 % 3 = '+a)//a=1
180 console.log("'4' % 3 = "+b)//b=1
181 console.log("'4' % '3'= "+c)//c=1
182 console.log("'aaa' % '3'= "+d)//d=NaN
183 console.log("'aaa' % 'bbb'= "+e)//e=NaN
184 console.log("NaN % 3= "+f)//f=NaN
185 console.log("0 % Infinity= "+g)//g=0
186 console.log("3 % 0= "+h)//h=NaN
187 console.log("Infinity % 0 = "+Infinity%0)//NaN
188 console.log("0 % 3 = "+0%3)//0
189 console.log("Infinity % 3 = "+Infinity%3)//NaN
190 console.log("0 % 0 = "+0%0)//NaN
191 //1.6 (++)&(--) 递加&递减
192 /*
193 a、前增量/前减量运算符
194 直接从 C（和 Java）借用的两个运算符是前增量运算符和前减量运算符。
195 在使用前缀式运算符时，注意增量和减量运算符都发生在计算表达式之前。
196 所谓前增量(前减量)运算符，就是数值上加(减) 1，形式是在变量前放两个加号（减号）‘++’（--）：
197 */
198 var iNum = 10;
199 --iNum;
200 console.log(iNum); //输出 "9"
201 console.log(--iNum); //输出 "8"
202 console.log(iNum); //输出 "8"
203 /*
204 第二行代码把 iNum 减少到了 9，它实质上等价于：
205 var iNum = 10;
206 iNum = iNum - 1;
207 */
208
209 /*
210 b、后增量/后减量运算符
211 还有两个直接从 C（和 Java）借用的运算符，即后增量运算符和后减量运算符。
212 与前缀式运算符不同的是，后缀式运算符是在计算过包含它们的表达式后才进行增量或减量运算的。
213 后增量运算符也是给数值上加（减） 1，形式是在变量后放两个加号（减号）‘++’（--）：
214 */
215 var iNum = 10;
216 iNum--;
217 console.log(iNum); //输出 "9"
218 console.log(iNum--); //输出 "9"
219 console.log(iNum); //输出 "8"
220
221 //2.JavaScript 赋值运算符
222 //2.1 (=) 赋值运算符
223 /*
224 把等号右边的值赋予等号左边的变量。
225 */
226 var a = 1;
227 /*
228 2.2~2.6复合赋值运算是由乘性运算符、加性运算符或位移运算符加等号（=）实现的。这些赋值运算符是下列这些常见情况的缩写形式：
229 var iNum = 10;
230 iNum = iNum + 10；
231 可以用一个复合赋值运算符改写第二行代码：
232 var iNum = 10;
233 iNum += 10；
234 */
235 //2.2 (+=) 加法赋值运算符
236 //2.3 (-=) 减法赋值运算符
237 //2.4 (*=) 乘法赋值运算符
238 //2.5 (/=) 除法赋值运算符
239 //2.6 (%=) 取模赋值运算符
240
241
242 //3.JavaScript 比较运算符
243 //3.1 (==)&(!=) 等于&不相等
244 /*
245 在 ECMAScript 中，等号由双等号（==）表示，当且仅当两个运算数相等时，它返回 true。
246 非等号由感叹号加等号（!=）表示，当且仅当两个运算数不相等时，它返回 true。
247 为确定两个运算数是否相等，这两个运算符都会进行类型转换。
248
249 执行类型转换的规则如下：
250
251 如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。
252 如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。
253 如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。
254 如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。（数字>字符串>对象）一般不转换为对象
255 在比较时，该运算符还遵守下列规则：
256
257 值 null 和 undefined 相等。
258 在检查相等性时，不能把 null 和 undefined 转换成其他值。
259 如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。
260 如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。
261 重要提示：即使两个数都是 NaN，等号仍然返回 false，因为根据规则，NaN 不等于 NaN。
262
263 下表列出了一些特殊情况，以及它们的结果：
264
265 表达式 值
266 null == undefined true
267 "NaN" == NaN false
268 5 == NaN false
269 NaN == NaN false
270 NaN != NaN true
271 false == 0 true
272 true == 1 true
273 true == 2 false
274 undefined == 0 false
275 null == 0 false
276 "5" == 5 true
277 */
278 //3.2 (===)&(!==) 等值等型&不等值或不等型
279 /*
280 全等号和非全等号
281 等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同，只是它们在检查相等性前，不执行类型转换。
282
283 全等号由三个等号表示（===），只有在无需类型转换运算数就相等的情况下，才返回 true。
284 非全等号由感叹号加两个等号（!==）表示，只有在无需类型转换运算数不相等的情况下，才返回 true。
285 */
286 var sNum = "66";
287 var iNum = 66;
288 console.log(sNum == iNum); //输出 "true"
289 console.log(sNum === iNum); //输出 "false"
290 console.log(sNum != iNum); //输出 "false"
291 console.log(sNum !== iNum); //输出 "true"
292 /*
293 3.5~3.8关系运算符小于、大于、小于等于和大于等于执行的是两个数的比较运算，比较方式与算术比较运算相同。
294 每个关系运算符都返回一个布尔值
295 */
296 //3.5 (>) 大于
297 //3.6 (<) 小于
298 //3.7 (>=) 大于或等于
299 //3.8 (<=) 小于或等于
300 //a、常规比较
301 var bResult1 = 2 > 1 //true
302 var bResult2 = 2 < 1 //false
303 /*
304 对两个字符串应用关系运算符，它们的行为则不同。
305 对于字符串，第一个字符串中每个字符的代码都与会第二个字符串中对应位置的字符的代码进行数值比较。
306 完成这种比较操作后，返回一个 Boolean 值。
307 并且区分大小写，问题在于大写字母的代码都小于小写字母的代码。
308 菜鸟网HTML ASCII 参考手册:https://www.runoob.com/tags/html-ascii.html
309 A~Z:65~90
310 a~z:97~122
311 */
312 var bResult = "Blue" < "alpha";
313 console.log(bResult); //输出 true
314 var bResult = "Blue".toLowerCase() < "alpha".toLowerCase();//换成小写
315 console.log(bResult); //输出 false
316 //b、比较数字和字符串
317 var bResult = "25" < "3";
318 console.log(bResult); //输出 "true"
319 /*
320 上面这段代码比较的是字符串 "25" 和 "3"。
321 两个运算数都是字符串，所以比较的是它们的字符代码（"2" 的字符代码是 50，"3" 的字符代码是 51）。
322 */
323 //c、比较数字和字符串2
324 /*
325 无论何时比较一个数字和一个字符串，ECMAScript 都会把字符串转换成数字，然后按照数字顺序比较它们。
326 */
327 var bResult = "25" < 3;
328 console.log(bResult); //输出 "false"
329 /*
330 字母 "a" 不能转换成有意义的数字。
331 不过，如果对它调用 parseInt() 方法，返回的是 NaN。
332 根据规则，任何包含 NaN 的关系运算符都要返回 false，因此这段代码也输出 false
333 */
334 var bResult = "a" < 3;
335 console.log(bResult);//输出 false
336 //3.9 (?) 三元运算符
337 /*
338 条件运算符(三元运算符)是 ECMAScript 中功能最多的运算符，它的形式与 Java 中的相同。
339 var iable = boolean_expression ? true_value : false_value;
340 该表达式主要是根据 boolean_expression 的计算结果有条件地为变量赋值。如果 Boolean_expression 为 true，
341 就把 true_value 赋给变量；如果它是 false，就把 false_value 赋给变量。
342 */
343 var a=1==1?1:2
344 console.log('1==1 ? 1 : 2 = '+a)//1==1 ? 1 : 2 = 1
345
346
347 //4.JavaScript 逻辑运算符(Boolean 运算符)
348 /*
349 在学习各种逻辑运算符之前，让我们先了解一下 ECMAScript-262 v5 规范中描述的 ToBoolean 操作。
350
351 抽象操作 ToBoolean 将其参数按照下表中的规则转换为逻辑值：
352
353 参数类型 结果
354 Undefined false
355 Null false
356 Boolean 结果等于输入的参数（不转换）
357 Number 如果参数为 +0, -0 或 NaN，则结果为 false；否则为 true。
358 String 如果参数为空字符串，则结果为 false；否则为 true。
359 Object true
360 */
361 //4.1 (&&) 逻辑与
362 /*
363 在 ECMAScript 中，逻辑 AND 运算符用双和号（&&）表示：
364 例如：
365 var bTrue = true;
366 var bFalse = false;
367 var bResult = bTrue && bFalse;
368 下面的真值表描述了逻辑 AND 运算符的行为：
369
370 运算数 1 运算数 2 结果
371 true true true
372 true false false
373 false true false
374 false false false
375 逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。
376
377 如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：
378
379 如果一个运算数是对象，另一个是 Boolean 值，返回该对象。
380 如果两个运算数都是对象，返回第二个对象。
381 如果某个运算数是 null，返回 null。
382 如果某个运算数是 NaN，返回 NaN。
383 如果某个运算数是 undefined，发生错误。
384 与 Java 中的逻辑 AND 运算相似，ECMAScript 中的逻辑 AND 运算也是简便运算，
385 即如果第一个运算数决定了结果，就不再计算第二个运算数。
386 对于逻辑 AND 运算来说，如果第一个运算数是 false，那么无论第二个运算数的值是什么，结果都不可能等于 true。
387 */
388 // var bTrue = true;
389 // var bResult = (bTrue && bUnknown); //发生错误
390 // console.log(bResult); //这一行不会执行
391
392 var bFalse = false;
393 var bResult = (bFalse && bUnknown);
394 console.log(bResult); //输出 "false"
395 //4.2 (||) 逻辑或
396 /*
397 ECMAScript 中的逻辑 OR 运算符与 Java 中的相同，都由双竖线（||）表示：
398
399 var bTrue = true;
400 var bFalse = false;
401 var bResult = bTrue || bFalse;
402 下面的真值表描述了逻辑 OR 运算符的行为：
403
404 运算数 1 运算数 2 结果
405 true true true
406 true false true
407 false true true
408 false false false
409 与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值：
410
411 如果一个运算数是对象，并且该对象左边的运算数值均为 false，则返回该对象。
412 如果两个运算数都是对象，返回第一个对象。
413 如果最后一个运算数是 null，并且其他运算数值均为 false，则返回 null。
414 如果最后一个运算数是 NaN，并且其他运算数值均为 false，则返回 NaN。
415 如果某个运算数是 undefined，发生