Vino
Series
Appearance

运算符

运算符

算术运算符

用于执行算术运算。

  • 加法：+
  • 减法：-
  • 乘法：*
  • 除法：/
  • 取余：%
  • 自增：++
  • 自减：--
  • 指数：**

加法运算符 (+)

将两个操作数相加。如果操作数是字符串，则进行字符串连接。

let a = 5;
let b = 10;
console.log(a + b); // 输出: 15

let str1 = 'Hello, ';
let str2 = 'world!';
console.log(str1 + str2); // 输出: Hello, world!

减法运算符 (-)

将右操作数从左操作数中减去。

let a = 15;
let b = 10;
console.log(a - b); // 输出: 5

乘法运算符 (*)

将两个操作数相乘。

let a = 5;
let b = 10;
console.log(a * b); // 输出: 50

除法运算符 (/)

将左操作数除以右操作数。

let a = 20;
let b = 4;
console.log(a / b); // 输出: 5

取余运算符 (%)

返回左操作数除以右操作数的余数。

let a = 17;
let b = 5;
console.log(a % b); // 输出: 2

自增运算符 (++)

将操作数加一。可以作为前缀或后缀使用。

let a = 5;
console.log(++a); // 输出: 6 (前缀自增，先加后用)
console.log(a++); // 输出: 6 (后缀自增，先用后加)
console.log(a);   // 输出: 7

自减运算符 (--)

将操作数减一。可以作为前缀或后缀使用。

let a = 5;
console.log(--a); // 输出: 4 (前缀自减，先减后用)
console.log(a--); // 输出: 4 (后缀自减，先用后减)
console.log(a);   // 输出: 3

指数运算符 (**)

将第一个操作数作为底数，第二个操作数作为指数进行幂运算。

let a = 2;
let b = 3;
console.log(a ** b); // 输出: 8

比较运算符

用于比较两个值。

  • 等于：==
  • 严格等于：===
  • 不等于：!=
  • 严格不等于：!==
  • 大于：>
  • 小于：<
  • 大于等于：>=
  • 小于等于：<=

等于 (==)

== 运算符用于比较两个值是否相等。它会进行类型转换后再比较。

console.log(5 == 5);                // 输出: true
console.log(10 == 10.0);            // 输出: true
console.log(5 == '5');              // 输出: true
console.log(0 == false);            // 输出: true
console.log('hello' == 'hello');    // 输出: true
console.log(5 == 10);               // 输出: false

严格等于 (===)

=== 运算符用于比较两个值是否严格相等。它不会进行类型转换，只有在类型和值都相同的情况下才会返回 true。

console.log(5 === 5);               // 输出: true
console.log(10 === 10.0);           // 输出: false
console.log(5 === '5');             // 输出: false
console.log(0 === false);           // 输出: false
console.log('hello' === 'hello');   // 输出: true
console.log(5 === 10);              // 输出: false

不等于 (!=)

!= 运算符用于比较两个值是否不相等。它会进行类型转换后再比较

console.log(5 != 5);          // 输出: false
console.log(5 != '5');        // 输出: false
console.log(0 != false);      // 输出: false
console.log('hello' != 'hello'); // 输出: false
console.log(5 != 10);         // 输出: true

严格不等于 (!==)

!== 运算符用于比较两个值是否严格不相等。它不会进行类型转换，只有在类型或值不相同的情况下才会返回 true。

console.log(5 !== 5);         // 输出: false
console.log(5 !== '5');       // 输出: true
console.log(0 !== false);     // 输出: true
console.log('hello' !== 'hello'); // 输出: false
console.log(5 !== 10);        // 输出: true

大于 (>)

> 运算符用于比较左操作数是否大于右操作数。

console.log(10 > 5);          // 输出: true
console.log(5 > 10);          // 输出: false
console.log(5 > 5);           // 输出: false
console.log('b' > 'a');       // 输出: true
console.log('a' > 'b');       // 输出: false

小于 (<)

< 运算符用于比较左操作数是否小于右操作数。

console.log(10 < 5);          // 输出: false
console.log(5 < 10);          // 输出: true
console.log(5 < 5);           // 输出: false
console.log('a' < 'b');       // 输出: true
console.log('b' < 'a');       // 输出: false

大于等于 (>=)

>= 运算符用于比较左操作数是否大于或等于右操作数。

console.log(10 >= 5);         // 输出: true
console.log(5 >= 10);         // 输出: false
console.log(5 >= 5);          // 输出: true
console.log('b' >= 'a');      // 输出: true
console.log('a' >= 'b');      // 输出: false

小于等于 (<=)

<= 运算符用于比较左操作数是否小于或等于右操作数

console.log(10 <= 5);         // 输出: false
console.log(5 <= 10);         // 输出: true
console.log(5 <= 5);          // 输出: true
console.log('a' <= 'b');      // 输出: true
console.log('b' <= 'a');      // 输出: false

逻辑运算符

用于组合布尔值，实现复杂条件判断。

  • 逻辑与：&&
  • 逻辑或：||
  • 逻辑非：!

逻辑与 (&&)

&& 运算符用于两个操作数之间的逻辑与操作。只有当两个操作数都为 true 时，结果才为 true。

console.log(true && true);   // 输出: true
console.log(true && false);  // 输出: false
console.log(false && true);  // 输出: false
console.log(false && false); // 输出: false

let a = 5;
let b = 10;
console.log(a > 0 && b > 0); // 输出: true (a 和 b 都大于 0)

console.log(a > 0 && b < 0); // 输出: false (b 不小于 0)

逻辑或 (||)

|| 运算符用于两个操作数之间的逻辑或操作。只要有一个操作数为 true，结果就为 true

console.log(true || true);   // 输出: true
console.log(true || false);  // 输出: true
console.log(false || true);  // 输出: true
console.log(false || false); // 输出: false

let a = 5;
let b = -10;
console.log(a > 0 || b > 0); // 输出: true (a 大于 0)

console.log(a < 0 || b < 0); // 输出: true (b 小于 0)

逻辑非 (!)

! 运算符用于对单个操作数的逻辑非操作。如果操作数为 true，结果为 false；如果操作数为 false，结果为 true。

console.log(!true);  // 输出: false
console.log(!false); // 输出: true

let a = 5;
console.log(!(a > 0)); // 输出: false (a 大于 0 为 true, 取反后为 false)

console.log(!(a < 0)); // 输出: true (a 小于 0 为 false, 取反后为 true)

位运算符

直接对二进制位操作，实现数据的底层 bitwise 计算。

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

按位与 (&)

& 运算符对两个数的每一位执行与操作。只有当两位都为 1 时，结果才为 1。

let a = 5;  // 0101
let b = 3;  // 0011
console.log(a & b); // 输出: 1 (0001)

按位或 (|)

| 运算符对两个数的每一位执行或操作。只要有一位为 1，结果就为 1

let a = 5;  // 0101
let b = 3;  // 0011
console.log(a | b); // 输出: 7 (0111)

按位异或 (^)

^ 运算符对两个数的每一位执行异或操作。当两位不同时，结果为 1

let a = 5;  // 0101
let b = 3;  // 0011
console.log(a ^ b); // 输出: 6 (0110)

按位非 (~)

~ 运算符对一个数的每一位执行非操作，将 0 变为 1，1 变为 0。结果是该数值的反码（即取反）

let a = 5;  // 0101
console.log(~a); // 输出: -6 (取反码并加 1，即 -a - 1)

左移 (<<)

<< 运算符将一个数的所有位左移指定的位数。左移操作会在右边添加 0。

let a = 5;  // 0101
console.log(a << 1); // 输出: 10 (1010)
console.log(a << 2); // 输出: 20 (10100)

右移 (>>)

>> 运算符将一个数的所有位右移指定的位数。右移操作会在左边添加符号位（正数添加 0，负数添加 1）。

let a = 5;  // 0101
console.log(a >> 1); // 输出: 2 (0010)
console.log(a >> 2); // 输出: 1 (0001)

let b = -5; // 11111111111111111111111111111011 (二进制补码表示)
console.log(b >> 1); // 输出: -3 (11111111111111111111111111111101)

无符号右移 (>>>)

>>> 运算符将一个数的所有位右移指定的位数。无符号右移操作会在左边添加 0，无论符号位是什么

let a = 5;  // 0101
console.log(a >>> 1); // 输出: 2 (0010)
console.log(a >>> 2); // 输出: 1 (0001)

let b = -5; // 11111111111111111111111111111011 (二进制补码表示)
console.log(b >>> 1); // 输出: 2147483645 (01111111111111111111111111111101)

条件（三元）运算符

条件运算符允许你在一个表达式中执行一个简单的条件判断,由三个部分组成，可以有条件地返回值。

语法

condition ? expr1 : expr2

其中：

  • condition 是一个布尔表达式。
  • expr1 是当 condition 为 true 时执行并返回的值。
  • expr2 是当 condition 为 false 时执行并返回的值。
let age = 18;
let canVote = age >= 18 ? 'Yes' : 'No';
console.log(canVote); // 输出: Yes

赋值运算符

用于将值赋给变量。

  • 简单赋值：=
  • 加赋值：+=
  • 减赋值：-=
  • 乘赋值：*=
  • 除赋值：/=
  • 取余赋值：%=
  • 左移赋值：<<=
  • 右移赋值：>>=
  • 无符号右移赋值：>>>=
  • 按位与赋值：&=
  • 按位异或赋值：^=
  • 按位或赋值：|=
  • 指数赋值：**=

可选链运算符

可选链（Optional Chaining）运算符 ?. 是 ECMAScript 2020（也称为 ES11）标准的一部分。这个特性在 2020 年被正式添加到 ECMAScript 规范中，旨在提供一种更简洁、安全的方式来访问对象的深层属性、方法，以及调用函数，特别是在链中可能存在 null的情况下。

它允许安全地访问对象深层嵌套的属性或方法，而不需要在每一层手动检查是否存在。如果在访问路径中的某处遇到了 null，表达式的评估会提前停止，并且整个表达式返回 null，从而避免了运行时错误。

可选链与对象属性

假设你有一个嵌套的对象 person，并希望访问 person.address.street。如果 person 或 person.address 是 null，直接访问person.address.street 将会抛出一个错误。使用可选链，你可以安全地进行访问：

const street = person?.address?.street;

如果 person 或 person.address 是 null，street 的值将会是 null，而不会抛出错误。

可选链与函数调用

可选链也可以用于安全地调用可能不存在的函数：

const result = someObject.someMethod?.();

如果 someMethod 存在并且是一个函数，那么它将被调用。如果 someObject 是 null 或者 someMethod 不是一个函数，那么result 将会是 null，而不会抛出错误。

可选链与数组

对于数组，可选链允许你安全地访问数组的元素：

const firstItem = arr?.[0];

这在处理可能未定义的数组时非常有用，可以避免额外的检查或捕获访问未定义数组时可能抛出的错误。

空值合并运算符

?? 是空值合并（Nullish Coalescing）运算符，它是 ECMAScript 2020（ES11）标准的一部分。空值合并运算符允许开发者为可能是 null 的表达式设置一个默认值，但它与逻辑或运算符 (||) 不同，因为 || 对任何 falsy 值（如 0、''、false、null、和NaN）都会使用其右侧的操作数，而 ?? 仅对 null 使用其右侧的操作数。

使用场景

当你需要对某个值进行检查，以确定它是否为 null，并在是的情况下提供一个默认值时，可以使用 ??。例如：

const foo = null ?? 'default string';
console.log(foo);
// 输出：'default string'

const bar = 0 ?? 42;
console.log(bar);
// 输出：0

在这个例子中，foo 使用 ?? 运算符检查其左侧的值是否为 null 。因为它是 null ，所以结果是右侧的 'default string'。对于 bar，尽管 0 是一个 falsy 值，但因为它不是 null ，?? 运算符使得 bar 的结果为 0，展示了它与 || 运算符的不同之处。

删除运算符

delete操作符用于删除对象的属性。其基本语法如下：

delete object.property;

示例

let obj = {
	name: 'zhangsan',
	age: 18,
	sex: '男',
	say: function () {
		console.log('hello');
	},
}

console.log(obj.age);   // 输出：18
delete obj.age;
console.log(obj.age)    // 输出：null
delete obj.name;
console.log(obj.name)   // 输出：null

// 尝试删除非配置属性（比如原型链上的属性或用var、let、const声明的变量）不会成功，尽管delete操作符会返回true
let num = 1;
let str = "hello";

delete num;
delete str;

console.log(num);   // 输出：1
console.log(str);   // 输出：hello

展开运算符

展开运算符使用三个点...表示。它可以用于数组和对象的展开（即打散）操作。

数组合并

展开运算符可以将一个数组展开为单独的元素，方便地进行数组合并。

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

数组拷贝

展开运算符可以用于数组的拷贝。

const arr = [1, 2, 3];
const copiedArray = [...arr];

console.log(copiedArray); // [1, 2, 3]

添加元素

展开运算符可以用于在数组中添加元素

const arr = [1, 2, 3];
const newArray = [0, ...arr, 4];

console.log(newArray); // [0, 1, 2, 3, 4]

对象合并

展开运算符可以用于对象的合并。

const obj1 = {a: 1, b: 2};
const obj2 = {c: 3, d: 4};
const mergedObject = {...obj1, ...obj2};

console.log(mergedObject); // { a: 1, b: 2, c: 3, d: 4 }

对象拷贝

展开运算符可以用于对象的拷贝。

const obj = {a: 1, b: 2};
const copiedObject = {...obj};

console.log(copiedObject); // { a: 1, b: 2 }

添加或更新属性

展开运算符可以用于添加或更新对象的属性

const obj = {a: 1, b: 2};
const newObject = {...obj, c: 3, a: 4};

console.log(newObject); // { a: 4, b: 2, c: 3 }

函数参数展开

展开运算符可以用于将数组元素作为独立的参数传递给函数。

function sum(x, y, z) {
	return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6
更新时间 9/28/2024, 8:21:49 AM
ON THIS PAGE