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

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

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

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

通過解構(gòu)還可以做很多其他有用的事情。對我來說，其中最常見的是:

重命名

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

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了一行。甜！

提取中

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

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)語法和散布運算符（...）的組合。非常便利！

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

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

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

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

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

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

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

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

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

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

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

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

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

將變量重命名displayName為currentUserName

提取editedBy到自己的變量中

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

總結(jié)

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