04JavaScript 运算符总结:算术运算符与赋值运算符

JavaScript 运算符总结:算术运算符与赋值运算符

一、算术运算符

1. 基本算术运算符

运算符 名称 示例 结果 说明
+ 加法 5 + 3 8 数字相加或字符串连接
- 减法 5 - 3 2 数字相减
* 乘法 5 * 3 15 数字相乘
/ 除法 6 / 3 2 数字相除
% 取余(模运算) 7 % 3 1 返回除法余数
** 指数运算(ES7) 2 ** 3 8 2的3次方

2. 自增与自减运算符

运算符 名称 示例 说明
++ 自增 x++++x 值增加1
-- 自减 x----x 值减少1

前缀与后缀的区别:

let x = 5;
let y = x++;   // y = 5, x = 6(后缀:先赋值,后自增)

let a = 5;
let b = ++a;   // b = 6, a = 6(前缀:先自增,后赋值)

二、赋值运算符

1. 基本赋值运算符

运算符 名称 示例 等价于 说明
= 赋值 x = 5 将右侧值赋给左侧变量
let x = 10;
let y = x;  // y = 10

2. 复合赋值运算符

运算符 名称 示例 等价于 说明
+= 加法赋值 x += 3 x = x + 3 先加后赋值
-= 减法赋值 x -= 3 x = x - 3 先减后赋值
*= 乘法赋值 x *= 3 x = x * 3 先乘后赋值
/= 除法赋值 x /= 3 x = x / 3 先除后赋值
%= 取余赋值 x %= 3 x = x % 3 先取余后赋值
**= 指数赋值 x **= 3 x = x ** 3 先指数运算后赋值

三、运算符优先级

1. 优先级顺序(从高到低)

优先级 运算符 说明
1 () 括号
2 ++ -- 自增/自减(前缀)
3 ** 指数运算
4 * / % 乘、除、取余
5 + - 加、减
6 = += -= *= /= %= **= 赋值

2. 示例分析

let result = 2 + 3 * 4;      // 14(先乘后加)
let result2 = (2 + 3) * 4;   // 20(括号优先)

let a = 5;
let b = ++a * 2;             // 12(先自增a=6,再6*2)

let x = 10;
x += 5 * 2;                  // 20(先计算5*2=10,再x+=10)

四、特殊运算规则

1. 字符串与数字的加法

"5" + 3;        // "53"(字符串连接)
5 + "3";        // "53"(字符串连接)
"5" - 3;        // 2(数字减法)
"5" * "3";      // 15(数字乘法)

2. 浮点数精度问题

0.1 + 0.2;      // 0.30000000000000004(浮点精度问题)
0.3 - 0.2;      // 0.09999999999999998

// 解决方法:使用toFixed或乘以10的倍数
let sum = (0.1 * 10 + 0.2 * 10) / 10;  // 0.3

3. 取余运算的特殊情况

5 % 2;          // 1(正数取余)
-5 % 2;         // -1(负数取余,结果的符号与被除数相同)
5 % -2;         // 1(结果的符号与被除数相同)

// 获取正余数
function positiveMod(a, b) {
    return ((a % b) + b) % b;
}
positiveMod(-5, 3);  // 1

五、运算符使用技巧

1. 简洁的自增/自减

// 循环中的常见用法
for (let i = 0; i < 10; i++) {
    // 循环体
}

// 数组遍历
let arr = [1, 2, 3];
let index = 0;
while (index < arr.length) {
    console.log(arr[index++]);  // 先访问arr[index],然后index自增
}

2. 复合赋值简化代码

// 累加
let total = 0;
total += 5;   // total = total + 5
total += 10;  // total = total + 10

// 翻倍
let value = 10;
value *= 2;   // value = value * 2

// 减半
let price = 100;
price /= 2;   // price = price / 2

3. 交换变量值(不使用临时变量)

let a = 5, b = 10;

// 方法1:使用加减法
a = a + b;    // a = 15
b = a - b;    // b = 5
a = a - b;    // a = 10

// 方法2:ES6解构赋值(推荐)
[a, b] = [b, a];

六、类型转换与运算符

1. 一元加号运算符(类型转换)

+"5";          // 5(字符串转数字)
+true;         // 1(布尔转数字)
+false;        // 0(布尔转数字)
+"hello";      // NaN(无法转换)

// 快速转换为数字
let str = "123";
let num = +str;  // 123 (number)

2. 隐式类型转换

let x = "5";
x += 2;        // "52"(字符串连接)
x -= 2;        // 50(数字减法,x被转为数字)
x *= 2;        // 100(数字乘法)

七、最佳实践

1. 代码可读性

// 好的写法
let total = price * quantity + tax;

// 避免过于复杂的表达式
// 不好的写法:let result = a++ + ++b * c-- - --d / e;

// 分解为多个步骤
let step1 = ++b * c--;
let step2 = --d / e;
let result = a++ + step1 - step2;

2. 避免副作用

// 避免在复杂表达式中使用自增/自减
let arr = [1, 2, 3];
let i = 0;

// 不推荐
let value = arr[i++] + arr[i++];  // 结果不确定,依赖于求值顺序

// 推荐
let first = arr[i]; i++;
let second = arr[i]; i++;
let value = first + second;

3. 使用括号明确优先级

// 即使知道优先级,使用括号可以提高可读性
let result = (2 * 3) + (4 / 2);  // 比 2 * 3 + 4 / 2 更清晰

八、综合示例

// 计算商品总价
let price = 29.99;
let quantity = 3;
let taxRate = 0.08;

// 计算小计
let subtotal = price * quantity;
console.log("小计: $" + subtotal.toFixed(2));

// 计算税费
let tax = subtotal * taxRate;
console.log("税费: $" + tax.toFixed(2));

// 计算总计
let total = subtotal + tax;
console.log("总计: $" + total.toFixed(2));

// 使用复合赋值
let discount = 5;
total -= discount;  // 应用折扣
console.log("折扣后: $" + total.toFixed(2));

九、常见错误与注意事项

1. 浮点数精度问题

// 错误:比较浮点数
0.1 + 0.2 === 0.3;  // false

// 正确:设置误差范围
Math.abs(0.1 + 0.2 - 0.3) < 0.000001;  // true

2. 除零操作

5 / 0;      // Infinity
-5 / 0;     // -Infinity
0 / 0;      // NaN

// 检查除零
function safeDivide(a, b) {
    if (b === 0) {
        return a === 0 ? NaN : Infinity * Math.sign(a);
    }
    return a / b;
}

3. 大数运算

// JavaScript数字有最大安全整数
Number.MAX_SAFE_INTEGER;  // 9007199254740991

// 超过范围可能导致精度丢失
let bigNum = 9007199254740991 + 2;  // 可能不准确

// 使用BigInt处理大整数
let bigInt = 9007199254740991n + 2n;  // 准确

十、总结表

类别 运算符 示例 说明
算术 + a + b 加法或字符串连接
- a - b 减法
* a * b 乘法
/ a / b 除法
% a % b 取余
** a ** b 指数运算
++ a++ 自增
-- a-- 自减
赋值 = a = 5 赋值
+= a += 5 加法赋值
-= a -= 5 减法赋值
*= a *= 5 乘法赋值
/= a /= 5 除法赋值
%= a %= 5 取余赋值
**= a **= 5 指数赋值

使用建议:

  1. 优先使用 +=-= 等复合运算符简化代码
  2. 在复杂表达式中使用括号明确优先级
  3. 注意自增/自减的前后缀区别
  4. 处理浮点数时注意精度问题
  5. 使用 Math 对象进行复杂数学运算
shi著
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇