JavaScript 运算符

JavaScript 中的运算符可分为以下几类：

1. 算术运算符：

• 加法（+）
• 减法（-）
• 乘法（*）
• 除法（/）
• 求余（%）
• 递增（++）
• 递减（–）

1. 赋值运算符：

• 赋值（=）
• 加法赋值（+=）
• 减法赋值（-=）
• 乘法赋值（*=）
• 除法赋值（/=）
• 求余赋值（%=）

1. 比较运算符：

• 相等（==）
• 全等（===）
• 不等（!=）
• 不全等（!==）
• 大于（>）
• 小于（<）
• 大于等于（>=）
• 小于等于（<=）

1. 逻辑运算符：

• 与（&&）
• 或（||）
• 非（!）

1. 条件（三元）运算符：

• 条件 ? 结果1 : 结果2

1. 位运算符：

• 按位与（&）
• 按位或（|)
• 按位异或（^）
• 按位非（~）
• 左移（<<）
• 右移（>>）
• 无符号右移（>>>）

1. 字符串运算符：

• 字符串连接（+）

1. 类型运算符：

• typeof
• instanceof

1. 其它运算符：

• 成员访问运算符（.）
• 数组元素访问运算符（[]）
• 逗号运算符（,）

这些运算符允许在 JavaScript 中执行各种操作，包括算术运算、赋值、比较、逻辑运算等等。

JavaScript算术运算符

JavaScript 中的算术运算符用于执行基本的数学运算。以下是 JavaScript 中常用的算术运算符：

1. 加法运算符 (+)：
   用于执行加法运算，也可以用于连接字符串。

   var sum = 5 + 3; // 结果为 8
   var concat = "Hello " + "World"; // 结果为 "Hello World"

2. 减法运算符 (-)：
   用于执行减法运算。

   var difference = 10 - 3; // 结果为 7

3. 乘法运算符 (*)：
   用于执行乘法运算。

   var product = 4 * 5; // 结果为 20

4. 除法运算符 (/)：
   用于执行除法运算。

   var quotient = 15 / 3; // 结果为 5

5. 求余运算符 (%)：
   用于获取除法运算的余数。

   var remainder = 10 % 3; // 结果为 1 (10 除以 3 的余数)

6. 递增运算符 (++)：
   用于将操作数增加 1。

   var x = 5;
   x++; // 等同于 x = x + 1;，现在 x 的值为 6

7. 递减运算符 (–)：
   用于将操作数减少 1。

   var y = 10;
   y--; // 等同于 y = y - 1;，现在 y 的值为 9

这些算术运算符可以用于执行基本的数学运算，并且还有一些其他的用法，比如加法运算符也可以用于字符串的连接。

JavaScript赋值运算符

JavaScript 中的赋值运算符用于给变量赋值。以下是 JavaScript 中常用的赋值运算符：

1. 赋值运算符 (=)：
   将右侧的值赋给左侧的变量。

   var x = 10; // 将 10 赋给变量 x

2. 加法赋值运算符 (+=)：
   将左侧变量的值与右侧的值相加，并将结果赋给左侧的变量。

   var y = 5;
   y += 3; // 等同于 y = y + 3;，现在 y 的值为 8

3. 减法赋值运算符 (-=)：
   将左侧变量的值减去右侧的值，并将结果赋给左侧的变量。

   var z = 7;
   z -= 2; // 等同于 z = z - 2;，现在 z 的值为 5

4. 乘法赋值运算符 (*=)：
   将左侧变量的值乘以右侧的值，并将结果赋给左侧的变量。

   var a = 4;
   a *= 3; // 等同于 a = a * 3;，现在 a 的值为 12

5. 除法赋值运算符 (/=)：
   将左侧变量的值除以右侧的值，并将结果赋给左侧的变量。

   var b = 20;
   b /= 4; // 等同于 b = b / 4;，现在 b 的值为 5

6. 求余赋值运算符 (%=)：
   将左侧变量的值求余右侧的值，并将结果赋给左侧的变量。

   var c = 15;
   c %= 4; // 等同于 c = c % 4;，现在 c 的值为 3

这些赋值运算符可以简化对变量进行操作并赋值的过程。

JavaScript比较运算符

JavaScript 中的比较运算符用于比较两个值，并返回一个布尔值（true 或 false）。以下是 JavaScript 中常用的比较运算符：

1. 相等运算符（==）：

• 检查两个操作数是否相等。在比较之前，会先进行类型转换。

   var x = 5;
   var y = "5";
   console.log(x == y); // 输出 true，因为值相等（在类型转换后）

2. 全等运算符（===）：

• 检查两个操作数是否全等，即值和类型都相同。

   var x = 5;
   var y = "5";
   console.log(x === y); // 输出 false，因为类型不同

3. 不等运算符（!=）：

• 检查两个操作数是否不相等。在比较之前，会先进行类型转换。

   var x = 5;
   var y = 3;
   console.log(x != y); // 输出 true，因为值不相等

4. 不全等运算符（!==）：

• 检查两个操作数是否不全等，即值或类型至少有一个不同。

   var x = 5;
   var y = "5";
   console.log(x !== y); // 输出 true，因为类型不同

5. 大于运算符（>）：

• 检查左操作数是否大于右操作数。

   var x = 5;
   var y = 3;
   console.log(x > y); // 输出 true，因为 5 大于 3

6. 小于运算符（<）：

• 检查左操作数是否小于右操作数。

   var x = 5;
   var y = 3;
   console.log(x < y); // 输出 false，因为 5 不小于 3

7. 大于等于运算符（>=）：

• 检查左操作数是否大于或等于右操作数。

   var x = 5;
   var y = 5;
   console.log(x >= y); // 输出 true，因为 5 大于或等于 5

8. 小于等于运算符（<=）：

• 检查左操作数是否小于或等于右操作数。

   var x = 5;
   var y = 5;
   console.log(x <= y); // 输出 true，因为 5 小于或等于 5

这些比较运算符可用于在条件语句中进行条件判断和流程控制。

JavaScript 按位运算符

JavaScript 中的按位运算符用于执行二进制位级操作。这些运算符将操作数视为二进制数字，并对其进行操作。以下是 JavaScript 中常用的按位运算符：

1. 按位与（&）：
   对两个操作数的每个对应位执行逻辑与操作，结果中的每个位都是对应位上两个操作数中都是 1 的情况才为 1。

   var result = 5 & 3; // 结果为 1 (二进制 0101 & 0011 = 0001)

2. 按位或（|）：
   对两个操作数的每个对应位执行逻辑或操作，结果中的每个位都是对应位上两个操作数中至少有一个是 1 的情况才为 1。

   var result = 5 | 3; // 结果为 7 (二进制 0101 | 0011 = 0111)

3. 按位异或（^）：
   对两个操作数的每个对应位执行逻辑异或操作，结果中的每个位都是对应位上两个操作数中只有一个是 1 的情况才为 1。

   var result = 5 ^ 3; // 结果为 6 (二进制 0101 ^ 0011 = 0110)

4. 按位非（~）：
   对操作数的每个位执行逻辑非操作，结果中的每个位都是操作数中对应位的补码。

   var result = ~5; // 结果为 -6 (二进制 ~0101 = 1010，补码表示 -6)

5. 左移运算符（<<）：
   将操作数的所有位向左移动指定的位数，右侧空出的位用零填充。

   var result = 5 << 1; // 结果为 10 (二进制 0101 << 1 = 1010)

6. 带符号右移运算符（>>）：
   将操作数的所有位向右移动指定的位数，左侧空出的位用符号位（正数用 0，负数用 1）填充。

   var result = 5 >> 1; // 结果为 2 (二进制 0101 >> 1 = 0010)

7. 无符号右移运算符（>>>）：
   将操作数的所有位向右移动指定的位数，左侧空出的位用零填充。

   var result = 5 >>> 1; // 结果为 2 (二进制 0101 >>> 1 = 0010)

这些按位运算符在处理二进制数据或需要对二进制位进行操作时非常有用。

JavaScript逻辑运算符

JavaScript 中的逻辑运算符用于在逻辑表达式中组合多个条件，并返回布尔值结果。以下是 JavaScript 中常用的逻辑运算符：

1. 逻辑与运算符（&&）：

• 当且仅当两个操作数都为真（true）时，逻辑与运算符返回真，否则返回假。

   var x = 5;
   var y = 10;
   var result = (x < 10) && (y > 5); // 结果为 true

2. 逻辑或运算符（||）：

• 当至少有一个操作数为真（true）时，逻辑或运算符返回真，否则返回假。

   var x = 5;
   var y = 3;
   var result = (x === 5) || (y === 5); // 结果为 true

3. 逻辑非运算符（!）：

• 逻辑非运算符用于对操作数取反，如果操作数为真（true），则返回假（false），如果操作数为假（false），则返回真（true）。

   var x = 5;
   var result = !(x === 5); // 结果为 false

逻辑运算符常用于条件语句和循环中，用于控制程序的流程和逻辑。逻辑运算符的操作数可以是任何能转换为布尔值的表达式。

JavaScript字符串运算符

JavaScript 中的字符串运算符主要用于处理字符串，包括字符串连接和字符串长度等操作。以下是 JavaScript 中常用的字符串运算符：

1. 字符串连接运算符（+）：

• 将两个字符串连接成一个新的字符串。

   var str1 = "Hello";
   var str2 = "World";
   var result = str1 + " " + str2; // 结果为 "Hello World"

2. 字符串长度运算符（.length）：

• 返回字符串的长度，即字符串中字符的个数。

   var str = "JavaScript";
   var length = str.length; // 结果为 10

3. 字符串索引运算符（[]）：

• 用于访问字符串中的特定字符，通过指定字符的索引位置（索引从 0 开始）。

   var str = "JavaScript";
   var char = str[4]; // 获取索引为 4 的字符，结果为 "S"

4. 字符串截取运算符（slice、substring、substr）：

• 用于截取字符串的一部分，并返回新的子字符串。

   var str = "JavaScript";
   var sub1 = str.slice(4);      // 从索引为 4 的位置开始截取，结果为 "Script"
   var sub2 = str.substring(0, 4); // 从索引为 0 到索引为 4（不包括索引为 4）的位置截取，结果为 "Java"
   var sub3 = str.substr(4, 6);   // 从索引为 4 的位置开始，截取 6 个字符，结果为 "Script"

这些字符串运算符可用于处理和操作字符串，对于字符串的拼接、截取和长度获取等操作非常实用。

JavaScript条件（三元）运算符

JavaScript 中的条件运算符，也称为三元运算符，是一种简洁的条件语句，用于根据条件的真假来返回不同的值。其语法如下：

condition ? expression1 : expression2

解释如下：

• 如果 condition 为真（true），则返回 expression1 的值；
• 如果 condition 为假（false），则返回 expression2 的值。

示例：

var age = 20;
var message = (age >= 18) ? "成年人" : "未成年人";
console.log(message); // 如果 age 大于等于 18，则输出 "成年人"，否则输出 "未成年人"

在这个示例中，如果变量 age 大于等于 18，则 message 被赋值为 “成年人”，否则被赋值为 “未成年人”。这种条件运算符非常适合简单的条件判断，可以在一行代码中完成。

JavaScript一元运算符

JavaScript 中的一元运算符用于对单个操作数进行操作。以下是 JavaScript 中常见的一元运算符：

1. 递增运算符（++）：

• 增加操作数的值，并返回增加后的值。
• 如果放在操作数的前面（前缀形式），先增加操作数的值，再返回增加后的值。
• 如果放在操作数的后面（后缀形式），先返回操作数的值，再增加操作数的值。

   var x = 5;
   var y = ++x; // y 等于 6，x 等于 6
   var z = x++; // z 等于 6，x 等于 7

2. 递减运算符（–）：

• 减少操作数的值，并返回减少后的值。
• 前缀形式和后缀形式的行为与递增运算符相似。

   var x = 5;
   var y = --x; // y 等于 4，x 等于 4
   var z = x--; // z 等于 4，x 等于 3

3. 逻辑非运算符（!）：

• 对操作数进行逻辑非运算，即取反。
• 如果操作数为真（true），返回假（false）；如果操作数为假（false），返回真（true）。

   var x = true;
   var y = !x; // y 等于 false

4. 按位非运算符（~）：

• 对操作数进行按位非运算，即对操作数的每个二进制位取反。
• 返回操作数的按位非结果。

   var x = 5; // 二进制表示为 00000000000000000000000000000101
   var y = ~x; // y 等于 -6，二进制表示为 11111111111111111111111111111010

这些一元运算符在对单个操作数进行操作时非常有用，可用于增减值、取反等操作。

delete运算符

在 JavaScript 中，delete 运算符用于删除对象的属性或数组的元素。它的语法如下：

delete object.property;
delete object[index];

其中，object 可以是一个对象或数组，property 是对象的属性名，index 是数组的索引。当 delete 运算符成功删除属性或元素时，它返回 true，否则返回 false。需要注意的是，delete 运算符只能删除可配置（configurable）的属性。

示例 1：删除对象的属性

var person = {name: 'John', age: 30};
delete person.age; // 删除 person 对象的 age 属性
console.log(person); // 输出 {name: 'John'}

示例 2：删除数组的元素

var numbers = [1, 2, 3, 4, 5];
delete numbers[2]; // 删除数组 numbers 的索引为 2 的元素
console.log(numbers); // 输出 [1, 2, undefined, 4, 5]
console.log(numbers.length); // 输出 5，数组长度仍然保持不变

需要注意的是，使用 delete 删除数组的元素后，虽然对应索引的值变为 undefined，但是数组的长度不会改变，删除元素后数组仍然保持稀疏（sparse）状态。

另外，delete 运算符不适用于变量（只适用于对象属性和数组元素），也不会删除变量或函数声明。

typeof运算符

在 JavaScript 中，typeof 运算符用于返回操作数的数据类型。它的语法如下：

typeof operand

其中 operand 是要检查其类型的操作数。typeof 返回一个字符串，表示 operand 的数据类型。以下是 typeof 可能返回的值：

• "undefined": 如果操作数是未定义的。
• "boolean": 如果操作数是布尔值。
• "number": 如果操作数是数值。
• "string": 如果操作数是字符串。
• "object": 如果操作数是对象或 null。
• "function": 如果操作数是函数。

示例：

console.log(typeof undefined); // 输出 "undefined"
console.log(typeof true); // 输出 "boolean"
console.log(typeof 42); // 输出 "number"
console.log(typeof "Hello"); // 输出 "string"
console.log(typeof {}); // 输出 "object"
console.log(typeof null); // 输出 "object"
console.log(typeof function() {}); // 输出 "function"

需要注意的是，typeof null 返回 "object"，这是 JavaScript 的一个已知问题，因为在 JavaScript 的早期版本中，null 被错误地认为是对象。

void运算符

在 JavaScript 中，void 运算符是一个用于对给定表达式求值并返回 undefined 的一元运算符。它的语法如下：

void expression

其中 expression 是任何有效的 JavaScript 表达式。

void 运算符的作用是忽略表达式的返回值并始终返回 undefined。它通常用于以下情况：

1. 在链接中使用 javascript:：
   当使用 javascript: 连接字符串时，浏览器会执行其中的 JavaScript 代码，并将最后一个表达式的值作为链接的返回值。为了避免这种情况，可以使用 void 运算符。

   <a href="javascript:void(0);" onclick="doSomething()">Click Me</a>

2. 在事件处理函数中使用：
   在 JavaScript 中，事件处理函数通常返回 undefined。使用 void 运算符可以确保事件处理函数不会返回任何值。

   function handleClick() {
       // 执行一些操作
       return void doSomething();
   }

3. 在书写自执行函数时使用：
   在书写自执行函数时，为了确保函数的返回值始终是 undefined，可以在函数体的起始位置使用 void 运算符。

   void function() {
       // 执行一些操作
   }();

总的来说，void 运算符用于确保表达式的返回值始终为 undefined，在某些场景下可以起到一定的作用。

JavaScript关系运算符

JavaScript 中的关系运算符用于比较两个值，并返回一个布尔值（true 或 false），表示它们之间的关系。以下是 JavaScript 中常见的关系运算符：

1. 相等运算符（==）：

• 检查两个操作数是否相等。在比较之前，会进行类型转换。
• 如果两个操作数的值相等，则返回 true；否则返回 false。

   console.log(5 == 5); // 输出 true
   console.log(5 == '5'); // 输出 true，因为进行了类型转换

2. 全等运算符（===）：

• 检查两个操作数的值和类型是否完全相等。
• 如果两个操作数的值和类型都相等，则返回 true；否则返回 false。

   console.log(5 === 5); // 输出 true
   console.log(5 === '5'); // 输出 false，因为类型不同

3. 不等运算符（!=）：

• 检查两个操作数是否不相等。在比较之前，会进行类型转换。
• 如果两个操作数的值不相等，则返回 true；否则返回 false。

   console.log(5 != 3); // 输出 true
   console.log(5 != '5'); // 输出 false，因为进行了类型转换

4. 不全等运算符（!==）：

• 检查两个操作数的值和类型是否不完全相等。
• 如果两个操作数的值或类型至少有一个不相等，则返回 true；否则返回 false。

   console.log(5 !== 3); // 输出 true
   console.log(5 !== '5'); // 输出 true，因为类型不同

5. 大于运算符（>）：

• 检查左操作数是否大于右操作数。
• 如果左操作数大于右操作数，则返回 true；否则返回 false。

   console.log(5 > 3); // 输出 true
   console.log(5 > 7); // 输出 false

6. 小于运算符（<）：

• 检查左操作数是否小于右操作数。
• 如果左操作数小于右操作数，则返回 true；否则返回 false。

   console.log(5 < 7); // 输出 true
   console.log(5 < 3); // 输出 false

7. 大于等于运算符（>=）：

• 检查左操作数是否大于或等于右操作数。
• 如果左操作数大于或等于右操作数，则返回 true；否则返回 false。

   console.log(5 >= 3); // 输出 true
   console.log(5 >= 5); // 输出 true

8. 小于等于运算符（<=）：

• 检查左操作数是否小于或等于右操作数。
• 如果左操作数小于或等于右操作数，则返回 true；否则返回 false。

   console.log(5 <= 7); // 输出 true
   console.log(5 <= 3); // 输出 false

这些关系运算符可用于比较两个值的大小关系，用于在条件语句中进行条件判断和流程控制。

in运算符

在 JavaScript 中，in 运算符用于检查对象是否具有指定属性。它的语法是：

property in object

其中 property 是一个字符串，表示要检查的属性名，object 是要检查属性的对象。

如果指定对象拥有指定属性，则返回 true；如果对象没有指定属性或者该属性是从原型链继承的，则返回 false。

示例：

var person = {name: 'John', age: 30};

console.log('name' in person); // 输出 true，因为 person 对象有名为 "name" 的属性
console.log('age' in person); // 输出 true，因为 person 对象有名为 "age" 的属性
console.log('gender' in person); // 输出 false，因为 person 对象没有名为 "gender" 的属性

// 使用 in 运算符进行属性存在性的判断
if ('name' in person) {
    console.log('Person has name property.');
}

需要注意的是，in 运算符只能检查属性名是否存在，而不能检查属性的值是否为 null 或 undefined。如果想要检查属性的值是否存在，可以使用 object.hasOwnProperty(property) 方法。

instanceof运算符

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。它的语法如下：

object instanceof constructor

其中 object 是要检测的对象，constructor 是要检测的构造函数。

instanceof 运算符返回一个布尔值，表示对象是否是指定构造函数的实例。如果 object 是 constructor 构造函数创建的实例或者是其子类的实例，则返回 true；否则返回 false。

示例：

function Animal() {}
function Dog() {}

var dog = new Dog();

console.log(dog instanceof Dog); // 输出 true，因为 dog 是 Dog 构造函数的实例
console.log(dog instanceof Animal); // 输出 false，因为 Dog 的原型链上没有 Animal 的构造函数

需要注意的是，instanceof 只能检查对象和构造函数之间的关系，无法检查对象的具体类型。因此，在使用 instanceof 运算符时，需要谨慎考虑构造函数和原型链之间的关系。