运算符

运算符

算术运算符

用于执行算术运算。

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

加法运算符 (+)

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

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(null == undefined);     // 输出: 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(null === undefined);    // 输出: 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(null != undefined); // 输出: 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(null !== undefined); // 输出: 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 规范中,旨在提供一种更简洁、安全的方式来访问对象的深层属性、方法,以及调用函数,特别是在链中可能存在 nullundefined的情况下。

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

可选链与对象属性

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

const street = person?.address?.street;

如果 personperson.addressundefinednullstreet 的值将会是 undefined,而不会抛出错误。

可选链与函数调用

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

const result = someObject.someMethod?.();

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

可选链与数组

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

const firstItem = arr?.[0];

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

空值合并运算符

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

使用场景

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

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

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

在这个例子中,foo 使用 ?? 运算符检查其左侧的值是否为 nullundefined。因为它是 null ,所以结果是右侧的 'default string'。对于 bar,尽管 0 是一个 falsy 值,但因为它不是 nullundefined?? 运算符使得 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)    // 输出:undefined
delete obj.name;
console.log(obj.name)   // 输出:undefined

// 尝试删除非配置属性(比如原型链上的属性或用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/26/2024, 5:41:28 PM