專案中關於解構的常用用法

前端小智發表於2022-06-17
作者：Ruphaa
譯者：前端小智
來源：dev

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

在本文串，你將學到所有你需要知道的 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 解構知識點。

編輯中可能存在的bug沒法實時知道，事後為了解決這些bug,花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://dev.to/thatanjan/ever...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章