object destructuring

學習 JavaScript 的展開運算子基礎知識 你可以使用展開運算子 ... 來擴展陣列、物件或字串。 首先從陣列的例子開始。給定 const a = [1, 2, 3] 你可以使用以下方式來建立一個新陣列 const b = [...a, 4, 5, 6] 你也可以使用以下方式來複製一個陣列 const c = [...a] 這對物件也同樣適用。你可以使用以下方式來克隆一個物件 const newObj = { ...oldObj } 使用字串時，展開運算子會將字串中的每個字元創建一個陣列 const hey = 'hey' const arrayized = [...hey] // ['h', 'e', 'y'] 這個運算子有一些非常有用的應用。其中最重要的應用之一是能夠非常簡單地將陣列作為函式參數使用 const f = (foo, bar) => {} const a = [1, 2] f(...a) 在處理陣列解構賦值時，rest 元素非常有用 const numbers = [1, 2, 3, 4, 5] const [first, second, ....

什麼是「物件解構」，解構操作的結果是什麼？ 假設你有一個包含一些屬性的物件： const person = { firstName: 'Tom', lastName: 'Cruise', actor: true, age: 57 } 你可以提取物件中的一部分屬性，並將它們放入指定的變數中： const { firstName, age } = person; 現在，我們有了兩個新的變數firstName和age，它們包含了所需的值： console.log(firstName); // 'Tom' console.log(age); // 57 變數的值分配不取決於我們列出它們的順序，而是根據屬性名稱。 你也可以自動將一個屬性分配給另一個具有不同名稱的變數： const { firstName: name, age } = person; 現在，不再有一個名為firstName的變數，而是有一個名為name的變數，它包含person.firstName的值： console.log(name); // 'Tom'

最近，我使用 TypeScript 在 Deno 中建立了一個範例專案，並且需要對一個物件進行解構。我對 TypeScript 基礎有一定的了解，但有時候還是會遇到問題。 其中之一就是物件解構。 我想要這樣寫： const { name, age } = body.value 我嘗試這樣加上 string 和 number 類型註解： const { name: string, age: number } = body.value 但這並不正確。雖然程式碼看起來好像沒有問題，但實際上這會將 name 屬性賦值給 string 變數，並將 age 屬性值賦值給 number 變數。 正確的語法應該是這樣： const { name, age }: { name: string; age: number } = body.value 處理這種情況的最佳方式是為這些資料創建一個類型或介面： interface Dog { name: string age: number } 然後你可以使用更簡潔的方式來寫上述程式碼： const dog: Dog = body.value

函數在JavaScript中只能返回一個值。那麼我們如何模擬從函數返回多個值呢？ 當我們調用JavaScript中的函數時，只能使用return語句返回一個值： const getAge = () => { return 37 } const getName = () => { return 'Flavio' } 我們如何從函數中返回多個值呢？ 一個簡單的技巧是返回一個數組： const getDetails = () => { return [37, 'Flavio'] } 這樣也是可以的，我們可以通過數組解構來獲取這些值： const [age, name] = getDetails() 現在我們擁有了包含這些值的age和name變量。 請注意，在const [age, name] = getDetails()中定義它們的順序是很重要的。 我們也可以返回一個對象並使用對象解構： const getDetails = () => { return { age: 37, name: 'Flavio' } } const { age, name } = getDetails() 在這種情況下，const { age, name } = getDetails()中的age和name的順序不再重要，因為它們是命名參數。