項目中關(guān)于解構(gòu)的常用用法

在本文串，你將學(xué)到所有你需要知道的 JS 解構(gòu)知識點。

為什么 JS 中存在解構(gòu)？

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

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

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

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.halseyconsole.log(taylor)console.log(shawn)console.log(zayn)console.log(halsey)

好多了。但我們?nèi)匀辉谥貜?fù)同樣的工作。如果我們可以在單個變量上聲明和分配對象屬性呢？

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

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

這比以前好多了。

它是如何工作的呢?

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

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

數(shù)組解構(gòu)？

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

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

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

我們繼續(xù)看看對象和數(shù)組解構(gòu)的一些用例。

數(shù)組解構(gòu)

交換變量

let a = 1;
let b = 3;

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

忽略一些返回值

function f() {  return [1, 2, 3];
}

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

默認值

let a, b;

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

用 Rest 參數(shù)創(chuàng)建子數(shù)組

const albums = ['Lover', 'Evermore', 'Red', 'Fearless']const [, ...albums2] = albums

console.log(albums2) // ['Evermore', 'Red', 'Fearless']

對象解構(gòu)

從作為函數(shù)參數(shù)傳遞的對象中解構(gòu)字段

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.

嵌套對象解構(gòu)

const profile= { 
  name: 'Anjan', 
  age: 20,  professional: {     profession: '前端開發(fā)',
  }
}

const {name, age, professional: {profession}} = profileconsole.log(professional) // 這句會報錯console.log(profession) // 前端開發(fā)

默認值

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

嵌套對象和數(shù)組解構(gòu)

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 Swiftconsole.log(age) // 31console.log(city) // New Yorkconsole.log(lover) // Loverconsole.log(rest) // [ 'Evermore', 'Red', 'Fearless' ]

這就是關(guān)于 JS 所有你需要知道的 JS 解構(gòu)知識點。


點擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開更多互動和交流，掃描下方”二維碼“或在“公眾號后臺“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~

- END -