JavaScript是一種非常有用的語(yǔ)言。它允許您從一個(gè)對(duì)象中提取值，并在一條語(yǔ)句中將它們分配給一個(gè)新變量。如果你以前沒(méi)有遇到過(guò)解構(gòu)，一個(gè)相當(dāng)基本的情況是這樣的:

const person = {
  name: 'Mike Bifulco',
  height: 556,
  fears: ['heights', 'fire'],
};
const { name } = person;
console.log(name); // this will print 'Mike Bifulco'

這里發(fā)生的事情很簡(jiǎn)單。我們將創(chuàng)建一個(gè)名為name的const，并使用person.name中找到的值填充它。這是通過(guò)使用=左邊的括號(hào)結(jié)構(gòu)完成的。

(如果你以前沒(méi)有見(jiàn)過(guò)或使用過(guò)這個(gè)，它肯定會(huì)讓你感到困惑。不要為此責(zé)怪自己——這很快就會(huì)成為你的第二天性。)

通過(guò)解構(gòu)還可以做很多其他有用的事情。對(duì)我來(lái)說(shuō)，其中最常見(jiàn)的是:

重命名

如果你想從對(duì)象中取出一個(gè)值，但也需要重命名它(可能是為了代碼的可讀性)，你可以在一行中完成:

const person = {
  name: 'Mike Bifulco',
  height: 556,
  fears: ['heights', 'fire'],
};


const { height: currentHeight } = person;

console.log(currentHeight); // 556
console.log(height); // undefined!

就像這樣，我們已經(jīng)將其分配person.height給currentHeight了一行。甜！

提取中

您可以從對(duì)象中提取一個(gè)值，然后使用其他所有內(nèi)容創(chuàng)建另一個(gè)變量，也可以這樣做：

const person = {
  name: 'Mike Bifulco',
  height: 556,
  fears: ['heights', 'fire'],
};

const { fears, ...fearlessPerson } = person;

console.log(fearlessPerson.fears); // undefined!
console.log(fears[0]); // heights

這是解構(gòu)語(yǔ)法和散布運(yùn)算符（...）的組合。非常便利！

困難模式：復(fù)雜的解構(gòu)

因此，通過(guò)解構(gòu)來(lái)提取和重命名事物都是相當(dāng)簡(jiǎn)單的。我已經(jīng)舒適地使用了這兩個(gè)技巧一段時(shí)間了。在過(guò)去的幾個(gè)月中，我一直在為一些不同的項(xiàng)目（包括我自己的網(wǎng)站）使用GatsbyJS，當(dāng)我開(kāi)始自定義和實(shí)現(xiàn)自己的Gatsby主題時(shí)，我開(kāi)始看到一些看起來(lái)非常復(fù)雜的解構(gòu)語(yǔ)法，從整個(gè)站點(diǎn)的GraphQL查詢中提取嵌套值。 我真的被拋出了-乍一看，發(fā)生的情況并不明顯。讓我們看一個(gè)示例，該示例是從用于在Gatsby主題中呈現(xiàn)單個(gè)頁(yè)面的React組件中提取的：

const singlePage = ({
  data,
  location,
  pageContext: { nextPagePath, previousPagePath },
}) => {
  return (
    <p>...react component markup</p>
  );
};

在singlePageReact組件的定義中發(fā)生了很多事情。讓我們看一下這種分解，并簡(jiǎn)化一下：

const {
  data,
  location,
  pageContext: {
    nextPagePath,
    previousPagePath,
  },
} = props;

花了一些時(shí)間，并花了一些力氣才能弄清楚這里正在完成什么，所以讓我們逐步進(jìn)行一下：

1. 右邊const是= props，它告訴我們所有這些值都從名為的對(duì)象中被破壞了props。

2. 前兩個(gè)值，data并且location是很有意義的-它們看起來(lái)就像上面的例子。該行將從對(duì)象中const的這兩個(gè)路徑中的每一個(gè)創(chuàng)建一個(gè)props。

3. pageContext是事情變得有趣的地方-這是另一種破壞。令人困惑的是，這里從props中提取的值是nextPagePath和previousPagePath。沒(méi)有為創(chuàng)建變量pageContext。

如果這種描述沒(méi)有幫助-我不會(huì)怪你。我確實(shí)需要一些練習(xí)才能了解發(fā)生了什么。我什至不確定我會(huì)推薦使用這種語(yǔ)法-并不是特別容易閱讀，特別是當(dāng)諸如漂亮的工具將其壓縮到更少的行上時(shí)。

話雖如此，這似乎是從Gatsby（可能還有其他地方）的GraphQL查詢中提取數(shù)據(jù)時(shí)的必經(jīng)之路。如果您要在那個(gè)世界上工作，那么熟悉一下這里發(fā)生的事情是個(gè)好主意。

我認(rèn)為，習(xí)慣這種語(yǔ)法的最佳方法就是自己動(dòng)手玩。我創(chuàng)建了一個(gè)JSBin，您可以使用它進(jìn)行一些實(shí)驗(yàn)。我很想聽(tīng)聽(tīng)你如何處理它！檢查它在這里。

您面臨的一些挑戰(zhàn)：

將變量重命名displayName為currentUserName

提取editedBy到自己的變量中

創(chuàng)建一個(gè)名為的對(duì)象meta，其中包含除方向以外的所有內(nèi)容contactNumber。

總結(jié)

我很想聽(tīng)聽(tīng)您對(duì)此的看法-我發(fā)現(xiàn)自己寫這篇文章是出于自助。通常，直到我孤立地練習(xí)一段時(shí)間后，這些事情才會(huì)具體化。您對(duì)銷毀有什么創(chuàng)意用途？我在這里做錯(cuò)什么了嗎？讓我們來(lái)談?wù)勊?/span>