JavaScript 函式引數解構物件

今夕何兮發表於2024-10-09
JavaScript函式物件

在 JavaScript 中，你可以使用解構賦值（destructuring assignment）來方便地提取函式引數中的物件屬性。這可以讓程式碼更加簡潔和易讀。以下是一些關於如何在函式引數中使用解構物件的示例和解釋。

基本示例

假設你有一個物件，它包含多個屬性，你希望在函式內部直接使用這些屬性，而不是透過物件訪問符來訪問它們。

const person = {  
  name: 'Alice',  
  age: 30,  
  city: 'New York'  
};  
  
// 使用解構賦值在函式引數中提取物件屬性  
function greet({ name, age, city }) {  
  console.log(`Hello, my name is ${name}. I am ${age} years old and I live in ${city}.`);  
}  
  
greet(person);  
// 輸出: Hello, my name is Alice. I am 30 years old and I live in New York.

在這個例子中，greet 函式的引數使用了物件解構，從而直接提取了 person 物件中的 name、age 和 city 屬性。

預設值

你還可以為解構的物件屬性提供預設值，這樣當某些屬性在物件中不存在時，函式會使用預設值。

const person = {  
  name: 'Alice',  
  age: 30  
};  
  
function greet({ name, age, city = 'Unknown' }) {  
  console.log(`Hello, my name is ${name}. I am ${age} years old and I live in ${city}.`);  
}  
  
greet(person);  
// 輸出: Hello, my name is Alice. I am 30 years old and I live in Unknown.

在這個例子中，如果 person 物件中沒有 city 屬性，greet 函式會使用預設值 'Unknown'。

重新命名屬性

你可以在解構賦值時重新命名物件屬性。這在屬性名不符合你的函式邏輯或變數命名習慣時特別有用。

const person = {  
  firstName: 'Alice',  
  age: 30,  
  location: 'New York'  
};  
  
function greet({ firstName: name, age, location: city }) {  
  console.log(`Hello, my name is ${name}. I am ${age} years old and I live in ${city}.`);  
}  
  
greet(person);  
// 輸出: Hello, my name is Alice. I am 30 years old and I live in New York.

在這個例子中，firstName 被重新命名為 name，location 被重新命名為 city。

巢狀解構

如果物件屬性本身也是物件，你可以使用巢狀解構來提取更深層次的屬性。

const person = {  
  name: 'Alice',  
  details: {  
    age: 30,  
    city: 'New York'  
  }  
};  
  
function greet({ name, details: { age, city } }) {  
  console.log(`Hello, my name is ${name}. I am ${age} years old and I live in ${city}.`);  
}  
  
greet(person);  
// 輸出: Hello, my name is Alice. I am 30 years old and I live in New York.

在這個例子中，details 物件被解構，從而提取了 age 和 city 屬性。

函式呼叫時傳遞物件字面量

你也可以在函式呼叫時直接傳遞一個物件字面量，而不需要事先定義一個物件。

function greet({ name, age, city = 'Unknown' }) {  
  console.log(`Hello, my name is ${name}. I am ${age} years old and I live in ${city}.`);  
}  
  
greet({ name: 'Bob', age: 25 });  
// 輸出: Hello, my name is Bob. I am 25 years old and I live in Unknown.

在這個例子中，我們直接在 greet 函式呼叫時傳遞了一個物件字面量。

使用解構賦值可以讓函式引數的處理更加直觀和簡潔，同時提高了程式碼的可讀性和可維護性。

相關文章