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) => 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 = https://www.cnblogs.com/yuzhihui/archive/2023/04/19/obj.prop ||"default";
console.log(propValue); // 'value'

const arr = [];
const firstValue = https://www.cnblogs.com/yuzhihui/archive/2023/04/19/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 屬性是可選的，

作者：飛仔FeiZai

出處：https://www.cnblogs.com/yuzhihui/p/17122071.html

宣告：歡迎任何形式的轉載，但請務必注明出處！！！

標籤：其他

上一篇：CSS—相對單位rem

下一篇：使用Vue.js實作文字跑馬燈效果