JS default：讓編程更簡潔

在編寫JavaScript代碼時，我們可能會經常用到default關鍵字，它可以在變量的值為undefined時設置默認值，使代碼更加簡潔易懂。下面從多個方面對default關鍵字進行詳細闡述。

一、默認參數值

在函數定義中，我們可以使用default關鍵字設置默認參數值。

  
    function greet(name = 'John') {
      console.log(`Hello, ${name}!`);
    }
    
    greet(); // 輸出 "Hello, John!"
    greet("Tom"); // 輸出 "Hello, Tom!"
  

在上面的代碼中，如果沒有傳遞參數name，那麼它的值將被設置為”John”。這就避免了當參數缺失時產生的錯誤。

二、對象解構

在對象解構時，我們可以使用default關鍵字設置默認值。

  
    const person = {
      name: "Tom",
      age: 20,
      city: "Shanghai"
    };
    
    const { name, age, sex = "male" } = person;
    
    console.log(name);  // 輸出 "Tom"
    console.log(age);   // 輸出 "20"
    console.log(sex);   // 輸出 "male"
  

在上面的代碼中，sex屬性不存在於person對象中，所以默認值被設置為”male”。

三、switch語句

在switch語句中，我們可以使用default關鍵字設置默認情況。

  
    const color = "green";
    
    switch (color) {
      case "red":
        console.log("Color is red");
        break;
      case "blue":
        console.log("Color is blue");
        break;
      default:
        console.log("Color is not red or blue");
    }
    
    // 輸出 "Color is not red or blue"
  

在上面的代碼中，如果color變量的值既不是”red”也不是”blue”，則默認情況將被執行。

四、export語句

在模塊中，我們可以使用default關鍵字導出默認模塊。

  
    // 模塊文件：person.js
    
    export default {
      name: "John",
      age: 30
    };
    
    // 主文件：main.js
    
    import person from './person.js';
    
    console.log(person.name); // 輸出 "John"
    console.log(person.age);  // 輸出 "30"
  

在上面的代碼中，我們導出了名為”John”和30的默認模塊，並在主文件中導入並使用該模塊。

五、結合解構和函數參數設置默認值

在函數參數中，我們可以使用default關鍵字結合解構來設置默認值。

  
    function createUser({ name, age, city = "Shanghai" }) {
      console.log(`Name: ${name}, Age: ${age}, City: ${city}`);
    }
    
    createUser({ name: "Tom", age: 20 }); // 輸出 "Name: Tom, Age: 20, City: Shanghai"
    createUser({ name: "Lucy", age: 25, city: "Beijing" }); // 輸出 "Name: Lucy, Age: 25, City: Beijing"
  

在上面的代碼中，createUser函數接受一個包含name，age和city屬性的對象作為函數參數。如果city屬性不存在，則默認值為”Shanghai”。

總結

使用default關鍵字可以使JavaScript編程更簡潔、易懂。它可以在變量的值為undefined時設置默認值，也可以在對象解構、switch語句和模塊導出等情況下使用。結合解構和函數參數設置默認值可以使代碼更加簡潔。