本文小编为大家详细介绍“JavaScript中常用的操作符怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“JavaScript中常用的操作符怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

1、可选链操作符（optional chaining operator）

?.

?.

const obj = {
  foo: {
    bar: 123
  }
};

// 普通访问属性的方式
const x = obj.foo.bar; // x = 123

// 使用可选链操作符
const y = obj?.foo?.bar; // y = 123

// 如果对象未定义，则返回 undefined
const z = undefined?.foo?.bar; // z = undefined

2、空值合并操作符（nullish coalescing operator）

??

??

||

??

const x = undefined ?? 'default'; // x = 'default'

const y = null ?? 'default'; // y = 'default'

const z = 'value' ?? 'default'; // z = 'value'

const a = '' ?? 'default'; // a = ''

const b = '' || 'default'; // b = 'default'

需要注意的是，

??

3、箭头函数（Arrow Function）

使用箭头（=>）可以更简洁地定义函数。例如：

const add = (a, b) => a + b;
console.log(add(1, 2)); // 3

const obj = {
  x: 1,
  add(y) {
    return this.x + y;
  },
  double: () => this.x * 2,
};
console.log(obj.add(2)); // 3
console.log(obj.double()); // NaN

注意，箭头函数中的 this 指向的是定义时的上下文，而不是调用时的上下文。

4、模板字面量（Template Literals）

使用反引号（`）可以定义包含变量、表达式和换行符的字符串。例如：

const name = "Alice";
const age = 20;
console.log(`My name is ${name}, and I am ${age} years old.`);
// 'My name is Alice, and I am 20 years old.'

5、展开操作符（Spread Operator）

使用三个点（...）可以将数组或对象展开为一个列表或多个参数。例如：

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

const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { x: 1, y: 2, z: 3 }

6、短路求值（Short-circuit Evaluation）

使用逻辑运算符

&&

||

const obj = { prop: "value" };
const propValue = obj.prop || "default";
console.log(propValue); // 'value'

const arr = [];
const firstValue = arr[0] && arr[0].prop;
console.log(firstValue); // undefined

7、简写的条件语句（Conditional (Ternary) Operator）

使用问号和冒号（?:）可以简化 if-else 语句的写法。例如：

const age = 20;
const message = age >= 18 ? "You are an adult" : "You are not an adult";
console.log(message); // 'You are an adult'

8、简写的自增和自减操作符（Short-circuit Evaluation）

使用双加号（++）和双减号（--）可以简化变量的自增和自减操作。例如：

let count = 0;
count++;
console.log(count); // 1

let num = 5;
const result = --num;
console.log(result); // 4

9、简写的赋值操作符（Assignment Operator）

使用加等号（+=）、减等号（-=）、乘等号（*=）、除等号（/=）等可以简化复合赋值操作。例如：

let count = 0;
count += 1;
console.log(count); // 1

let num = 5;
num *= 2;
console.log(num); // 10

10、双重否定运算符（Double NOT Operator）

双重否定运算符（Double NOT Operator）即为两个连续的叹号（"!!"），也称为逻辑非非运算符。它可以将一个值转换为其对应的布尔值。例如：

const x = "hello";
console.log(!!x); // true

const y = 0;
console.log(!!y); // false

需要注意的是，使用

!!

11、?: 在 TypeScript 中表示可选属性

在 TypeScript 中，可以使用

?

interface Person {
  name: string;
  age?: number;
}

const person1: Person = { name: "Alice" };
const person2: Person = { name: "Bob", age: 20 };

在上面的例子中，Person 接口有一个可选属性 age，这意味着可以创建一个 Person 类型的对象，其中 age 属性是可选的。

补充

JavaScript 隐式类型转换有哪些副作用

在 JavaScript 中，隐式类型转换指的是在运行时自动将一个数据类型转换为另一个数据类型。虽然 JavaScript 中的隐式类型转换有时可以使代码更简洁，但也会带来一些副作用，包括：

1.难以预测的结果：由于 JavaScript 在隐式类型转换时会自动进行一些操作，因此在代码中进行类型转换时可能会产生意外的结果。例如：

console.log(1 + "2"); // '12'
console.log(true + true); // 2
console.log("10" - 5); // 5

在上述例子中，JavaScript 自动将数字 1 转换为字符串类型，将布尔值 true 转换为数字类型，并将字符串 '10' 转换为数字类型。

2.可读性差：隐式类型转换可能会使代码难以理解和维护，因为读者需要知道代码中所有的类型转换规则才能正确地解释代码的含义。

3.性能下降：JavaScript 在进行隐式类型转换时需要进行额外的计算，这会导致代码的性能下降。在性能要求较高的场景下，应尽量避免使用隐式类型转换。

4.安全问题：隐式类型转换可能会导致一些安全问题，例如在比较两个值时，如果类型不同，可能会产生意想不到的结果，如：

console.log("100" == 100); // true
console.log("0e1" == 0); // true
console.log("0e0" == 0); // true

在上述例子中，由于 JavaScript 进行了隐式类型转换，因此字符串 '100' 被转换为了数字类型 100，字符串 '0e1' 被转换为了数字类型 0，导致了比较结果与预期不符。

为了避免隐式类型转换带来的副作用，可以使用显式类型转换来代替。例如，使用 Number() 函数将字符串转换为数字，使用 String() 函数将其他类型的值转换为字符串等。这样可以使代码更加明确和易于理解，也可以提高代码的性能。