站長資訊網(wǎng)
解構(gòu)是一個(gè)概念，分解其中一種數(shù)據(jù)類型并將其單獨(dú)的屬性分配給變量，在文章《JavaScript 解構(gòu)賦值 5 個(gè)常見場景和實(shí)例》中介紹過，今天再來復(fù)習(xí)一下。
基礎(chǔ)解構(gòu)
const fullName = { firstName: "Quintion", lastName: "Tang", }; const { firstName, lastName } = fullName; // 解構(gòu)語法 console.log(firstName); // Quintion console.log(lastName); // Tang
登錄后復(fù)制
正如上面的代碼片段中看到的那樣，在解構(gòu)語法中，分解了 firstName 對象屬性并將其分配給表達(dá)式左側(cè)定義的變量。在上述場景中，對象的屬性名稱應(yīng)與左側(cè)表達(dá)式中定義的變量匹配。 如果定義其他變量名稱，則獲取不到想要的值，如：
const fullName = { firstName: "Quintion", lastName: "Tang", }; const { firstName, trueName } = fullName; // 解構(gòu)語法 console.log(firstName); // Quintion console.log(trueName); // undefined
登錄后復(fù)制
由于在 fullName 中沒有屬性 trueName ，所以它被初始化為 undefined。
別名解構(gòu)
如果需要把對象屬性賦值給屬性名不一致的變量名，可以如下代碼來實(shí)現(xiàn)：
const fullName = { firstName: "Quintion", lastName: "Tang", }; const { firstName: trueName, lastName } = fullName; // 解構(gòu)語法 console.log(trueName); // Quintion console.log(lastName); // Tang
登錄后復(fù)制
默認(rèn)值解構(gòu)
在上面代碼中有看到，對象中不存在特定屬性的解構(gòu)，一般會(huì)賦值為 undefined ，如果不希望是 undefined ，可以為其設(shè)置一個(gè)默認(rèn)值，如下：
const fullName = { firstName: "Quintion", lastName: "Tang", }; const { firstName: trueName, lastName, age = 18 } = fullName; // 解構(gòu)語法 console.log(trueName); // Quintion console.log(lastName); // Tang console.log(age); // 18
登錄后復(fù)制
下面來看下存在 age 屬性下的結(jié)果：
const fullName = { firstName: "Quintion", lastName: "Tang", age: 30, }; const { firstName: trueName, lastName, age = 18 } = fullName; // 解構(gòu)語法 console.log(trueName); // Quintion console.log(lastName); // Tang console.log(age); // 30
登錄后復(fù)制
REST解構(gòu)
如果想從一個(gè)對象中解構(gòu)一個(gè)屬性，剩下的屬性結(jié)構(gòu)為另一個(gè)變量，如下：
const fullName = { firstName: "Quintion", lastName: "Tang", age: 30, }; const { age, ...username } = fullName; // 解構(gòu)語法 console.log(username); // { firstName: 'Quintion', lastName: 'Tang' } console.log(age); // 30
登錄后復(fù)制
在上面的代碼片段中，將 username 屬性分配給了一個(gè)變量，并使用了 rest 運(yùn)算符 (...) 將變量的其余部屬性分配給了一個(gè)單獨(dú)的對象。
推薦學(xué)習(xí)：《JavaScript視頻教程》
