JavaScript 簡寫語法

1、簡寫的閉包自執行函式（Immediately Invoked Function Expression (IIFE)）

使用括號將函式定義包裹起來，再在末尾加上另一對括號，即可創建一個自執行函式，例如：

(() => {
  console.log("Hello, world!");
})();

2、簡寫的物件方法定義（Method Definition）

使用方法名和箭頭函式的簡寫方式，可以更簡潔地定義物件的方法，例如：

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 指向的是定義時的背景關系，而不是呼叫時的背景關系，

3、簡寫的類定義（Class Definition）

使用 class 和 constructor 的簡寫方式，可以更簡潔地定義類，例如：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(
      `Hello, my name is ${this.name}, and I am ${this.age} years old.`
    );
  }
}
const alice = new Person("Alice", 20);
alice.sayHello(); // 'Hello, my name is Alice, and I am 20 years old.'

4、簡寫的模塊匯出（Module Export）

使用 export 和 default 的簡寫方式，可以更簡潔地匯出模塊，例如：

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
export default {
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b,
};

// main.js
import { add, subtract } from "./math.js";
import math from "./math.js";
console.log(add(1, 2)); // 3
console.log(subtract(3, 2)); // 1
console.log(math.multiply(2, 3)); // 6
console.log(math.divide(6, 2)); // 3

5、解構賦值（Destructuring Assignment）

使用花括號{}或方括號[]可以將物件或陣列中的值解構（拆解）到變數中，例如：

const obj = { x: 1, y: 2 };
const { x, y } = obj;
console.log(x, y); // 1, 2

const arr = [1, 2, 3];
const [a, b] = arr;
console.log(a, b); // 1, 2

6、通過運算子簡寫語法

JavaScript 運算子

7、物件字面量簡寫

可以使用物件字面量的簡寫形式來定義物件，例如：

const name = "Alice";
const age = 30;

// 傳統寫法
const user = {
  name: name,
  age: age,
};

// 簡寫寫法
const user = { name, age };

8、模板字串簡寫

可以使用模板字串的簡寫形式來拼接字串，例如：

const name = "Alice";
const age = 30;

// 傳統寫法
const message = "My name is " + name + " and I am " + age + " years old.";

// 簡寫寫法
const message = `My name is ${name} and I am ${age} years old.`;

9、省略物件方法的 function 關鍵字

在物件中定義方法時，可以省略 function 關鍵字，例如：

const obj = {
  foo() {
    // ...
  },
  bar() {
    // ...
  },
};

10、省略引數串列的圓括號

在只有一個引數的箭頭函式中，可以省略引數串列的圓括號，例如：

const double = (x) => x * 2;

11、省略物件屬性的引號

在物件字面量中定義屬性時，可以省略屬性名稱的引號，前提是屬性名稱不包含空格和特殊字符，例如：

const obj1 = {
  prop1: "value1",
  prop2: "value2",
  prop3: "value3",
};

const obj2 = {
  prop1: "value1",
  "prop with spaces": "value2",
  ["computedProp"]: "value3",
};

12、省略布林值的比較運算子

可以直接將布林值作為條件，而不必使用比較運算子，例如：

// 傳統寫法
if (done === true) {
  // ...
}

// 簡寫寫法
if (done) {
  // ...
}

作者：飛仔FeiZai

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/550710.html

標籤：其他

上一篇：探索FSM （有限狀態機）應用

下一篇：返回列表