javascript中的运算符有哪些及怎么用

发布时间：2022-02-22 09:09:13 作者：iii
来源：亿速云阅读：219

# JavaScript中的运算符有哪些及怎么用

JavaScript作为一门动态编程语言，其运算符系统是构建逻辑和操作数据的核心工具。本文将全面解析JavaScript中的各类运算符，包括它们的分类、用法以及实际应用场景。

## 一、运算符概述

运算符是用于执行特定操作的符号，JavaScript中的运算符可分为以下几大类：

1. 算术运算符
2. 赋值运算符
3. 比较运算符
4. 逻辑运算符
5. 位运算符
6. 其他特殊运算符

## 二、算术运算符

算术运算符用于执行基本数学运算：

### 1. 基本算术运算符

```javascript
let a = 10, b = 3;

console.log(a + b);  // 13，加法
console.log(a - b);  // 7，减法
console.log(a * b);  // 30，乘法
console.log(a / b);  // 3.333...，除法
console.log(a % b);  // 1，取模（余数）
console.log(a ** b); // 1000，指数运算（ES6新增）

2. 递增/递减运算符

let x = 5;

console.log(x++); // 5（先返回后增加）
console.log(++x); // 7（先增加后返回）
console.log(x--); // 7（先返回后减少）
console.log(--x); // 5（先减少后返回）

三、赋值运算符

用于给变量赋值：

1. 基本赋值运算符

let y = 10; // 简单赋值

2. 复合赋值运算符

let z = 5;

z += 3;  // 等同于 z = z + 3
z -= 2;  // 等同于 z = z - 2
z *= 4;  // 等同于 z = z * 4
z /= 2;  // 等同于 z = z / 2
z %= 3;  // 等同于 z = z % 3
z **= 2; // 等同于 z = z ** 2

四、比较运算符

用于比较两个值，返回布尔值：

1. 基本比较

console.log(5 == '5');   // true，值相等（自动类型转换）
console.log(5 === '5');  // false，严格相等（值和类型）
console.log(5 != '5');   // false
console.log(5 !== '5');  // true

2. 大小比较

console.log(5 > 3);   // true
console.log(5 < 3);   // false
console.log(5 >= 5);  // true
console.log(5 <= 4);  // false

五、逻辑运算符

用于组合或操作布尔值：

1. 基本逻辑运算

console.log(true && false); // false，逻辑与
console.log(true || false); // true，逻辑或
console.log(!true);        // false，逻辑非

2. 短路求值特性

// && 遇到假值立即返回
false && console.log("不会执行");

// || 遇到真值立即返回
true || console.log("不会执行");

3. 空值合并运算符（ES2020）

let value = null ?? 'default'; // 'default'

六、位运算符

直接操作二进制位：

let a = 5; // 0101
let b = 3; // 0011

console.log(a & b);  // 1 (0001)，按位与
console.log(a | b);  // 7 (0111)，按位或
console.log(a ^ b);  // 6 (0110)，按位异或
console.log(~a);     // -6，按位非
console.log(a << 1); // 10 (1010)，左移
console.log(a >> 1); // 2 (0010)，右移
console.log(a >>> 1);// 2 (0010)，无符号右移

七、其他特殊运算符

1. 三元运算符

let age = 20;
let status = age >= 18 ? '成人' : '未成年';

2. typeof运算符

console.log(typeof 42);        // "number"
console.log(typeof 'text');    // "string"
console.log(typeof true);      // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object"（历史遗留问题）

3. instanceof运算符

class Car {}
let myCar = new Car();
console.log(myCar instanceof Car); // true

4. 可选链运算符（ES2020）

const user = {
  profile: {
    name: 'Alice'
  }
};

console.log(user?.profile?.name); // "Alice"
console.log(user?.address?.city); // undefined（不会报错）

5. 展开运算符（ES6）

// 数组展开
let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

// 对象展开
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 }; // { a:1, b:2, c:3 }

八、运算符优先级

JavaScript运算符按以下优先级执行（从高到低）：

() 分组
++ -- 后置递增/减
! ~ + - ++ -- 前置操作
** 指数
* / %
+ -
<< >> >>>
< <= > >= in instanceof
== != === !==
& ^ | && || ??
赋值运算符

九、实际应用示例

1. 表单验证

function validateForm(username, password) {
  return username.length >= 6 && password.length >= 8;
}

2. 条件渲染

const isLoggedIn = true;
const message = isLoggedIn ? '欢迎回来' : '请先登录';

3. 默认值设置

function greet(name) {
  name = name || '访客';
  console.log(`你好，${name}`);
}

十、总结

JavaScript的运算符系统提供了丰富的操作能力：

算术运算符处理数学计算
赋值运算符简化变量操作
比较运算符实现条件判断
逻辑运算符构建复杂条件
特殊运算符满足特定场景需求

掌握这些运算符的用法和优先级，是编写高效JavaScript代码的基础。在实际开发中，应根据场景选择合适的运算符，并注意运算符优先级可能带来的意外结果，必要时使用括号明确运算顺序。

通过本文的系统学习，相信你已经对JavaScript运算符有了全面的认识。接下来可以通过实际编码练习来巩固这些知识，逐步提升编码能力。 “`

这篇文章共计约1900字，采用Markdown格式编写，全面涵盖了JavaScript中的各类运算符及其使用方法，包含代码示例和实际应用场景，适合作为学习参考资料。