JavaScript 操作符
JavaScript 操作符
JavaScript 操作符/运算符
在 JavaScript 中，有一些操作符可以使代码更简洁、易读和高效。以下是一些常见的操作符：
1、可选链操作符（optional chaining operator）
?.是可选链操作符（optional chaining operator）。?. 可选链操作符用于访问可能为空或未定义的属性或方法，它允许我们安全地访问嵌套对象的属性，如果中间的属性为空或未定义，则不会抛出错误，而是返回 undefined。例如：
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）
??是空值合并操作符（nullish coalescing operator）。?? 空值合并操作符用于检查一个变量是否为 null 或 undefined，如果是，则返回一个默认值，否则返回该变量的值。与传统的逻辑运算符 || 不同，?? 只会在左侧的值为 null 或 undefined 时返回右侧的默认值，对于其他假值（如空字符串、0、false 等）并不会返回默认值，而是会返回它本身。例如：
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'
需要注意的是，?? 操作符需要在 ES11 及以上的版本才能使用。
3、箭头函数（Arrow Function）
使用箭头（=>）可以更简洁地定义函数。例如：
// const add = (a, b) => {
// return a + b;
// };
// 上述方式简写为：
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'
使用逻辑运行符&&和||简化 if-else 语句的写法。例如：
const err = undefined;
if (err) {
console.error(err);
}
// 上述语句可简写为：
err && console.error(err);
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 属性是可选的。
