本篇主要分享js中常见的运算符以及使用技巧
文章目录
算数运算符
| 运算符 | 名称及含义 | 使用形式 | 说明 |
|---|---|---|---|
+ | 加 | 操作数 + 操作数 | 单 / 双目运算符 |
- | 减 | 操作数 - 操作数 | 单 / 双目运算符 |
* | 乘 | 操作数 * 操作数 | 双目运算符 |
/ | 除 | 操作数 / 操作数 | 双目运算符 |
% | 取余 | 操作数 % 操作数 | 双目运算符 |
** | 幂运算 | 操作数 **幂 | 单目运算符 |
++ | 幂运算 | ++操作数 / 操作数++ | 单目运算符 |
-- | 幂运算 | --操作数 / 操作数-- | 单目运算符 |
+ 规则：
双目运算符
Infinity + Infinity = Infinity(-Infinity) + (-Infinity) = -Infinity(-Infinity) + Infinity = NaNInfinity + null = Infinity-Infinity + null = -Infinity0 + 0 = 0(-0) + (-0) = -0(-0) + 0 = 00 + (-0) = 0
- 如果是两个字符串，则将字符串进行拼接
- 如果是一个字符串，则将非字符串【隐式转换成字符串在进行拼接】
- 如果两个都不是字符串类型，则将进行数值类型的相加【不是数值类型的要隐式转换成数值类型】
代码如下（示例）：
var a = '123' + '456'; // '123456'
var b = 123 + '456'; // '123456'
var c = 123 + 456; // 579
var d = 123 + {}; // '123[object Object]'
var e = 123 + []; // '123'
var f = 123 + NaN; // NaN
var g = 123 + true; // 124
var h = 123 + undefined; // NaN
var i = 123 + null; // 123
var j = 123 + false; // 123
单目运算符
- 与
Number()方法相同，将其他类型的对象转换为数值类型。
代码如下（示例）：
var a = '1';
var b = '2';
console.log(a + b); // '12'
console.log(+a + +b); // '3'
先将字符串转换为数值类型之后再相加，因为单目运算符的优先级比双目运算符的优先级更高。
- 规则：
双目运算符
Infinity - Infinity = NaN(-Infinity) - (-Infinity) = NaNInfinity - (-Infinity) = InfinityInfinity - null = Infinity-Infinity - null = -Infinity0 - 0 = 0(-0) - (-0) = 00 - (-0) = 0-0 - 0 = -0
- 与 NaN 相关的减法运算结果都为 NaN
- 如果是一个对象类型，则先对对象进行隐式转换，在根据前面的规则进行减法运算
- 如果是一个非数值类型，则先在后台调用
Number()方法，将其转换为数值类型，再根据前面的规则进行减法运算
代码如下（示例）：
var a = '1' - '2'; // -1
var b = 1 - '2'; // -1
var c = 1 - 2; // -1
var d = 1 - {}; // NaN
var e = 1 - []; // 1
var f = 1 - NaN; // NaN
var g = 1 - true; // 0
var h = 1 - undefined; // NaN
var i = 1 - null; // 1
var j = 1 - false; // 1
单目运算符
- 负号运算符
- 与
Number()方法相同，将其他类型的对象转换为数值类型。
代码如下（示例）：
var a = '1';
var b = '2';
console.log(a - b); // -1
console.log(-a - -b); // 1
先将字符串转换为负数数值类型之后再相减，因为单目运算符的优先级比双目运算符的优先级更高。
* 规则：
双目运算符
Infinity * 0 = NaNInfinity * null = NaNInfinity * undefined = NaNInfinity * Infinityll = Infinity(-Infinity) * (-Infinity) = Infinity(-Infinity) * Infinity = -Infinity
- 如果操作的数值超过数值的表示范围，结果为
Infinity或-Infinity- 如果操作数中有一个是
NaN，那么结果一定是NaN- 如果操作数中有一个是
undefined，那么结果一定是NaN- 如果是一个对象数据类型，则先将对象进行隐式转换，在根据前面的规则进行乘法运算
- 如果是一个非数值类型，则先在后台调用
Number()方法，将其转换为数值类型，再根据前面的规则进行乘法运算
代码如下（示例）：
var a = '1' * '2'; // 2
var b = 1 * '2'; // 2
var c = 1 * 2; // 2
var d = 1 * {}; // NaN
var e = 1 * []; // 0
var f = 1 * NaN; // NaN
var g = 1 * true; // 1
var h = 1 * undefined; // NaN
var i = 1 * null; // 0
var j = 1 * false; // 0
/ 规则：
双目运算符
Infinity / 0 = InfinityInfinity / null = InfinityInfinity / undefined = NaNInfinity / Infinity = NaN
- 如果操作的数值超过数值的表示范围，结果为
Infinity或-Infinity0不可以作为除数，但是可以作为被除数；0作为除数结果一定是Infinity- 如果操作数中有一个是
NaN，那么结果一定是NaN- 如果操作数中有一个是
undefined，那么结果一定是NaN- 如果是一个对象数据类型，则先将对象进行隐式转换，在根据前面的规则进行除法运算
- 如果是一个非数值类型，则先在后台调用
Number()方法，将其转换为数值类型，再根据前面的规则进行除法运算
代码如下（示例）：
var a = '1' / '2'; // 0.5
var b = 1 / '2'; // 0.5
var c = 1 / 2; // 0.5
var d = 1 / {}; // NaN
var e = 1 / []; // Infinity
var f = 1 / NaN; // NaN
var g = 1 / true; // 1
var h = 1 / undefined; // NaN
var i = 1 / null; // Infinity
var j = 1 / false; // Infinity
// 可以用 js 计算出小数，但是不建议使用小数去直接计算【因为不精确】
% 规则：
双目运算符
- 如果操作数都是数值，执行常规的除法计算，返回余数
Infinity % 任何值 = NaN任何值 % 0 的结果都是 NaN【包括隐式转换后结果是 0 的数据类型】NaN 无论是做被除数还是除数结果都是 NaN【包括隐式转换后结果是 NaN 的数据类型】有限大的数 % Infinity = 有限大的数0 %除0、NaN之外的任何值结果都是0【包括隐式转换后结果是 0、NaN的数据类型】- 如果是一个对象数据类型，则先将对象进行隐式转换，在根据前面的规则进行取余运算
- 如果是一个非数值类型，则先在后台调用
Number()方法，将其转换为数值类型，再根据前面的规则进行取余运算- 取余运算结果的正负号取决于被模数（被除数 | %左边的数）的符号。
代码如下（示例）：
var a = Infinity % 10; // NaN
var b = Infinity % '10'; // NaN
var c = Infinity % 'true; // NaN
// --------------------
var a = 10 % 0; // NaN
var b = 10 % ''; // NaN
var c = 10 % false; // NaN
var d = 10 % null; // NaN
var e = 10 % []; // NaN
// --------------------
var a = NaN % 10; // NaN
var a = 10 % NaN; // NaN
var b = undefined % 10; // NaN
var b = 10 % undefined; // NaN
var c = {} % 10; // NaN
var c = 10 % {}; // NaN
// ----------------------
var a = 0 % Infinity; // 0
var b = '' % Infinity; // 0
var c = false % Infinity; // 0
var d = null % Infinity; // 0
var e = [] % Infinity; // 0
// -----------------------
var a = 0 % 1; // 0
var b = '' % '1'; // 0
var c = false % true; // 0
var d = null % ['111']; // 0
var e = [] % ['111']; // 0
扩展: 取模去比自己本身大的数，结果就是自己本身。
- 例：
var a = 2 % 4;结果就是 2
var a = 3 % 6;结果就是 3
var a = 10 % 20;结果就是 10
var a = 100 % 101;结果就是 101
扩展: 取模去比自己本身小的数，并且结果不能被整除。
- 例: 一个数
12345
取余 10, 结果就是 5
取余 100, 结果就是 45
取余 1000, 结果就是 345
…
依次类推
扩展：如果
a, b除以c的余数相同，那么a与b的差能被c整除。
也就是说：如果两个数除以一个相同的数，且余数相同，那么这两个数的差能被相同的数整除
- 例如
17 % 3 = 2
11 % 3 = 2
17 - 11 = 6
6 % 3 = 0
** 规则：
单目运算符
作用：进行幂运算
语法：操作数 **幂
- 如果操作数都是数值，执行常规的幂计算，返回幂运算的结果
Infinity **Infinity = Infinity任何数 **0 的结果都是 1【计算机领域】NaN **非0的任何数的结果都是 NaN- 如果是一个对象数据类型，则先将对象进行隐式转换，在根据前面的规则进行幂运算
- 如果是一个非数值类型，则先在后台调用
Number()方法，将其转换为数值类型，再根据前面的规则进行幂运算
代码如下（示例）：
console.log(2 **3); // 8
console.log(2 **4); // 16
console.log(8 **(1/3)); // 2
console.log(16 **(1/4)); // 2
console.log(Infinity **10); // Infinity
console.log(Infinity **Infinity); // Infinity
console.log(Infinity **0); // 1
console.log(10 **0); // 1
console.log(0 **0); // 1
console.log(NaN **0); // 1
console.log(NaN **10); // NaN
++ 规则
单目运算符
作用：进行+1 运算
语法：++操作数、操作数++
- 应用于非数值类型的时候，先将其转换为数值类型，在执行
++操作- 应用于对象、先将对象进行隐式转换，在根据前面的规则进行
++运算区别：参与运算的时候
++操作数：先把变量本身的值进行改变+1，然后用改变的值参与运算操作数++：先把变量本身的值拿来参与运算，然后再把变量的值改变+1
代码如下（示例）：
console.log(a=1, a++); // 1, 1
console.log(a=1, ++a); // 1, 2
var x = 1;
var y = 2;
y += 2 + ++x + x * 2 + ++x + x * 3;
// 2 + 2 + 4 + 3 + 9 + 2 = 22
console.log(x, y); // 3, 22
y += 2 + x++ + x * 2 + x++ + x * 3;
// 2 + 1 + 4 + 2 + 9 + 2 = 20
console.log(x, y); // 3, 20
-- 规则
单目运算符
作用：进行-1 运算
语法：--操作数、操作数--
- 应用于非数值类型的时候，先将其转换为数值类型，在执行
--操作- 应用于对象、先将对象进行隐式转换，在根据前面的规则进行
--运算区别：参与运算的时候
--操作数：先把变量本身的值进行改变-1，然后用改变的值参与运算操作数--：先把变量本身的值拿来参与运算，然后再把变量的值改变-1
代码如下（示例）：
console.log(a=1, a--); // 1, 1
console.log(a=1, --a); // 1, 0
var x = 1;
var y = 2;
y += 2 + --x + x * 2 + --x + x * 3;
// 2 + 0 + 0 + -1 + (-3) + 2 = 0
console.log(x, y); // -1, 0
y += 2 + x-- + x * 2 + x-- + x * 3;
// 2 + 1 + 0 + 0 + (-3) + 2 = 2
console.log(x, y); // -1, 2
赋值运算符
| 运算符 | 名称及含义 | 使用形式 | 说明 |
|---|---|---|---|
= | 赋值 | 操作数 = 操作数 | 双目运算符 |
+= | 加等赋值 | 操作数 += 操作数 | 双目运算符 |
-+ | 减等赋值 | 操作数 -= 操作数 | 双目运算符 |
*= | 乘等赋值 | 操作数 *= 操作数 | 双目运算符 |
/= | 除等赋值 | 操作数 /= 操作数 | 双目运算符 |
%= | 模等赋值 | 操作数 %= 操作数 | 双目运算符 |
代码如下（示例）：
var a, b;
a = 1; // 1
b = a; // 1
a += b; // 2
a -= b; // 1
a *= b; // 1
a /= b; // 1
a %= b; // 0
比较运算符
| 运算符 | 名称及含义 | 使用形式 | 说明 |
|---|---|---|---|
== | 等于 | 操作数 == 操作数 | 双目运算符 |
=== | 完全等于 | 操作数 === 操作数 | 双目运算符 |
!= | 不等于 | 操作数 != 操作数 | 双目运算符 |
!== | 完全不等于 | 操作数 !== 操作数 | 双目运算符 |
> | 大于 | 操作数 > 操作数 | 双目运算符 |
< | 小于 | 操作数 < 操作数 | 双目运算符 |
>= | 大于等于 | 操作数 >= 操作数 | 双目运算符 |
<= | 小于等于 | 操作数 <= 操作数 | 双目运算符 |
比较规则
- 如果两端的类型不同时，会隐式转换为对应的
字符或者数值或者布尔类型。NaN与任何数比较时都是false- 如果比较两端类型相同时，不会隐式转换，而是直接比较。
- 两端都是字符串，转换为 Unicode编码进行比较。
A < ... < Z < a < ... < z。- 复杂数据类型， 比较的是内存地址
==会隐式转换为相同的类型后比较，也可以理解成是值的比较，忽略数据类型。===不会转换为相同的类型进行比较，也可以理解成是 值的比较，数据类型的比较。- 特殊：
null == undefined表示比较的都是空值。注意：所有比较运算符的最终结果一定是 布尔值
代码如下（示例）：
console.log(10 == '10'); // true
console.log(10 == [10]); // true
console.log(1 == true); // true
console.log(0 == false); // true
console.log(10 === '10'); // false
console.log(10 === [10]); // false
console.log(1 === true); // false
console.log(0 === false); // false
console.log('aa' < 'ab'); // true
console.log({} == {}); // false
console.log(null == undefined); // true
console.log(null === undefined);// false
逻辑运算符
| 运算符 | 名称及含义 | 使用形式 | 说明 |
|---|---|---|---|
&& | 与 | 操作数 && 操作数 | 双目运算符 |
|| | 或 | 操作数 || 操作数 | 双目运算符 |
! | 非 | 操作数 ! 操作数 | 双目运算符 |
&&规则
- 只有符号两边的内容全部为
true的时候，最终结果才是true。- 只要有任何一边的结果是
false，那么最终结果就是false。- 当符号左边的结果为
true的时候，会执行符号右边的代码。- 当符号左边的结果为
false的时候，会执行符号左边的代码。
代码如下（示例）：
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
||规则
- 只要符号任意一边内容为
true的时候，那么最终结果就是true。- 只有两边都是
false的时候，那么最终结果才是false。- 当符号左边的结果为
false的时候，会执行符号右边的代码。- 当符号左边的结果为
true的时候，会执行符号左边的代码。
代码如下（示例）：
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false
!规则
- 如果本身是
true，那么结果就是false。- 如果本身是
false，那么结果就是true。!!双取反可以实现转布尔。
代码如下（示例）：
console.log(!true); // false
console.log(!false); // true
console.log(!!0); // false
console.log(!!1); // true
条件运算符
语法：
判断条件 ? 条件为真时的操作 : 条件为假时的操作
代码如下（示例）：
let num = 2;
num > 1 ? console.log("对") : console.log("错"); // "对"
119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
