[[433209]]

在本文串，你將學到所有你需要知道的 JS 解構知識點。

為什么 JS 中存在解構?

這是一個普通的對象，包含4個人的名字。

const names = { 
    taylor: '小智', 
    shawn: '前端小智', 
    zayn: '大志', 
    halsey: '王大志', 
} 

 現在，如果讓你手動打印所有人名到控制臺，你會怎么做。可能會這樣做：

console.log(names.taylor) 
console.log(names.shawn) 
console.log(names.zayn) 
console.log(names.halsey) 

這種點的方式有點煩人，怎樣才能讓它變得更好?

const taylor = names.taylor 
const shawn = names.shawn 
const zayn = names.zayn 
const halsey = names.halsey 
 
console.log(taylor) 
console.log(shawn) 
console.log(zayn) 
console.log(halsey) 

好多了。但我們仍然在重復同樣的工作。如果我們可以在單個變量上聲明和分配對象屬性呢?

這樣會更好，對吧?這就是對象解構幫助我們的地方。所以我們可以這樣做：

const { taylor, shawn, zayn, halsey} = names 
 
console.log(taylor) 
console.log(shawn) 
console.log(zayn) 
console.log(halsey) 

 這比以前好多了。

它是如何工作的呢?

這很簡單。我們只是從對象中取出屬性并將它們存儲在一個變量中。默認情況下，變量名與屬性名相同。所以我們可以這樣寫：

const { taylor, shawn, zayn: zaynMalik, halsey} = names 

數組解構?

數組解構與對象的解構類似，但有一些區別。我們知道數據被存儲在一個帶有索引的數組中。它們是有順序的。因此，在進行解構時，我們必須保持順序。比如：

const albums = ['Lover', 'Evermore', 'Red', 'Fearless'] 
 
const [lover, ever] = albums 
// Lover Evermore 

 而且，數組也沒有值的屬性。所以，可以直接給出你想要的任何變量名稱。

我們繼續看看對象和數組解構的一些用例。

數組解構

交換變量

let a = 1; 
let b = 3; 
 
[a, b] = [b, a]; 
console.log(a); // 3 
console.log(b); // 1 

忽略一些返回值

function f() { 
  return [1, 2, 3]; 
} 
 
const [a, , b] = f(); 
console.log(a); // 1 
console.log(b); // 3 

默認值

let a, b; 
 
[a=5, b=7] = [1]; 
console.log(a); // 1 
console.log(b); // 7 

用 Rest 參數創建子數組

const albums = ['Lover', 'Evermore', 'Red', 'Fearless'] 
 
const [, ...albums2] = albums 
 
console.log(albums2) // ['Evermore', 'Red', 'Fearless'] 

對象解構

從作為函數參數傳遞的對象中解構字段

const anjan = { 
        name: '前端小智', age: 20 
} 
 
const statement = ({name, age}) => { 
        return `My name is ${name}. I am ${age} years old.` 
} 
 
statement(anjan) 
// My name is 前端小智. I am 20 years old. 

嵌套對象解構

const profile= {  
  name: 'Anjan',  
  age: 20, 
  professional: { 
     profession: '前端開發', 
  } 
} 
 
const {name, age, professional: {profession}} = profile 
 
console.log(professional) // 這句會報錯 
console.log(profession) // 前端開發 

默認值

const {a = 10, b = 5} = {a: 3}; 
 
console.log(a); // 3 
console.log(b); // 5 

嵌套對象和數組解構

const taylor = { 
  name: 'Taylor Swift', 
  age: 31, 
  address: { 
      city: 'New York', 
      country: 'USA', 
  }, 
  albums: ['Lover', 'Evermore', 'Red', 'Fearless'], 
} 
 
const { 
  name, 
  age, 
  address: { city }, 
  albums: [lover, ...rest], 
} = taylor 
 
console.log(name) // Taylor Swift 
console.log(age) // 31 
console.log(city) // New York 
console.log(lover) // Lover 
console.log(rest) // [ 'Evermore', 'Red', 'Fearless' ] 

這就是關于 JS 所有你需要知道的 JS 解構知識點。

作者：Ruphaa 譯者：前端小智

來源：dev 原文：https://dev.to/thatanjan/everything-you-need-to-know-about-javascript-destructuring-30e5