JavaScript 算数
JavaScript基础 2022-04-24 02:10:59小码哥的IT人生shichen
JavaScript 算数
处理数值的典型情景是算数。
算数运算符
典型的算术运算会操作两个数值。
这两个数可以是字面量：
示例代码：
var x = 7 + 8;
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>典型的算术运算会操作两个数（或表达式）并返回一个新的数。</p>
<p id="demo"></p>
<script>
var x = 7 + 8;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
典型的算术运算会操作两个数（或表达式）并返回一个新的数。 15
或变量：
示例代码：
var x = a + b;
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>典型的算术运算会操作两个数（或表达式）并返回一个新的数。</p>
<p id="demo"></p>
<script>
var a = 7;
var b = 8;
var x = a + b;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
典型的算术运算会操作两个数（或表达式）并返回一个新的数。 15
或表达式：
示例代码：
var x = (7 + 8) * a;完整实例：
<!DOCTYPE html>
<html>
<body>
<p>典型的算术运算会操作两个数（或表达式）并返回一个新的数。</p>
<p id="demo"></p>
<script>
var a = 2;
var x = (7 + 8) * a;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
运行结果：
典型的算术运算会操作两个数（或表达式）并返回一个新的数。 30
运算符和操作数
在算术运算中，数被称为操作数。
（两个操作数之间执行的）运算由运算符定义。
| 操作数 | 运算符 | 操作数 |
|---|---|---|
| 7 | + | 8 |
加法
加法运算符（+）加数：
var x = 7;
var y = 8;
var z = x + y; 完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>+ 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
var y = 8;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
运行结果：
+ 运算符 15
减法
减法运算符（-）减数。
var x = 7;
var y = 8;
var z = x - y; 完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>- 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
var y = 8;
var z = x - y;
document.getElementById("demo").innerHTML = z
</script>
</body>
</html>
运行结果：
- 运算符 -1
乘法
乘法运算符（*）乘数。
var x = 7;
var y = 8;
var z = x * y; 完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>* 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
var y = 8;
var z = x * y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
运行结果：
* 运算符 56
除法
除法运算符（/）除数。
var x = 7;
var y = 2;
var z = x / y; 完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>/ 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
var y = 2;
var z = x / y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
运行结果：
/ 运算符 3.5
系数
系数运算符（%）返回除法的余数。
var x = 7;
var y = 2;
var z = x % y;
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>% 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
var y = 2;
var z = x % y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
运行结果：
% 运算符 1
注释：在算术中，两个整数的除法产生商和余数。
注释：在数学中，模运算的结果是算术除法的余数。
递增
递增运算符（++）对数值进行递增。
var x = 7;
x++;
var z = x;完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>++ 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
x++;
var z = x;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
运行结果：
++ 运算符 8
递减
递减运算符（--）对数值进行递减。
var x = 7;
x--;
var z = x; 完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>-- 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
x--;
var z = x;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
运行结果：
-- 运算符 6
幂
取幂运算符（**）将第一个操作数提升到第二个操作数的幂。
示例代码：
var x = 5;
var z = x ** 2; // 结果是 25
完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>** 运算符</h1>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = x ** 2;
</script>
</body>
</html>
运行结果：
** 运算符 25
x ** y 产生的结果与 Math.pow(x,y) 相同:
示例代码：
var x = 5;
var z = Math.pow(x,2); // 结果是 25完整实例：
<!DOCTYPE html>
<html>
<body>
<h1>Math.pow()</h1>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = Math.pow(x,2);
</script>
</body>
</html>
运行结果：
Math.pow() 25
运算符优先级
运算符优先级（Operator precedence）描述了在算术表达式中所执行操作的顺序。
示例代码：
var x = 200 + 50 * 2;
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>乘法的优先级高于加法。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 200 + 50 * 2;
</script>
</body>
</html>
上例的结果是 250 * 2 还是 200 + 100 呢？
是加法还是乘法优先呢？
在传统的学校数学中，乘法是优先的。
乘法（*）和除法（%）比加法（+）和减法（-）拥有更高的优先级。
同时，（就像在学校的数学中那样）能够通过使用括号来改变优先级：
运行结果：
乘法的优先级高于加法。 300
示例代码：
var x = (200 + 50) * 2;
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>乘法的优先级高于加法。</p>
<p>但是括号的优先于乘法。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (200 + 50) * 2;
</script>
</body>
</html>
运行结果：
乘法的优先级高于加法。 但是括号的优先于乘法。 500
当使用括号时，括号中的运算符会首先被计算。
当多个运算拥有相同的优先级时（比如加法和减法），对它们的计算是从左向右的：
示例代码：
var x = 200 + 50 - 2;完整实例：
<!DOCTYPE html>
<html>
<body>
<p>如果多个运算符优先级相同，则从左向右计算。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 200 + 50 - 2;
</script>
</body>
</html>
运行结果：
如果多个运算符优先级相同，则从左向右计算。 248
JavaScript 运算符优先级值
| 值 | 运算符 | 描述 | 实例 |
|---|---|---|---|
| 20 | ( ) | 表达式分组 | (3 + 4) |
| 19 | . | 成员 | person.name |
| 19 | [] | 成员 | person["name"] |
| 19 | () | 函数调用 | myFunction() |
| 19 | new | 创建 | new Date() |
| 17 | ++ | 后缀递增 | i++ |
| 17 | -- | 后缀递减 | i-- |
| 16 | ++ | 前缀递增 | ++i |
| 16 | -- | 前缀递减 | --i |
| 16 | ! | 逻辑否 | !(x==y) |
| 16 | typeof | 类型 | typeof x |
| 15 | ** | 求幂 (ES7) | 10 ** 2 |
| 14 | * | 乘 | 10 * 5 |
| 14 | / | 除 | 10 / 5 |
| 14 | % | 模数除法 | 10 % 5 |
| 13 | + | 加 | 10 + 5 |
| 13 | - | 减 | 10 - 5 |
| 12 | << | 左位移 | x << 2 |
| 12 | >> | 右位移 | x >> 2 |
| 12 | >>> | 右位移（无符号） | x >>> 2 |
| 11 | < | 小于 | x < y |
| 11 | <= | 小于或等于 | x <= y |
| 11 | > | 大于 | x > y |
| 11 | >= | 大于或等于 | x >= y |
| 11 | in | 对象中的属性 | "PI" in Math |
| 11 | instanceof | 对象的实例 | instanceof Array |
| 10 | == | 相等 | x == y |
| 10 | === | 严格相等 | x === y |
| 10 | != | 不相等 | x != y |
| 10 | !== | 严格不相等 | x !== y |
| 9 | & | 按位与 | x & y |
| 8 | ^ | 按位 XOR | x ^ y |
| 7 | | | 按位或 | x | y |
| 6 | && | 逻辑与 | x && y |
| 5 | || | 逻辑否 | x || y |
| 4 | ? : | 条件 | ? "Yes" : "No" |
| 3 | = | 赋值 | x = y |
| 3 | += | 赋值 | x += y |
| 3 | -= | 赋值 | x -= y |
| 3 | *= | 赋值 | x *= y |
| 3 | %= | 赋值 | x %= y |
| 3 | <<= | 赋值 | x <<= y |
| 3 | >>= | 赋值 | x >>= y |
| 3 | >>>= | 赋值 | x >>>= y |
| 3 | &= | 赋值 | x &= y |
| 3 | ^= | 赋值 | x ^= y |
| 3 | |= | 赋值 | x |= y |
| 2 | yield | 暂停函数 | yield x |
| 1 | , | 逗号 | 7 , 8 |
注意：淡红色指示实验性或建议性的技术（ECMASScript 2016 或 ES7）
提示：括号中的表达式会在值在表达式的其余部分中被使用之前进行完全计算。
