資訊專欄INFORMATION COLUMN
摘要：解構是新加的解構功能，可以使得我們獲取數(shù)據(jù)更方便，從而提高日常編碼效率。解構賦值的語法要求，一定要用一對小括號包裹整個解構賦值表達式。當然，也有辦法定義不同命中的變量，依然利用解構獲得對象的屬性值。下一篇，我們講解構在類型數(shù)據(jù)上的解構。
解構是ES6新加的解構功能，可以使得我們獲取數(shù)據(jù)更方便，從而提高日常編碼效率。
解構可以用于對象，也可以用于數(shù)組，這篇文章我們只講在對象類型上使用解構可以做哪些事情：
一：解構用于變量聲明
let node = {
name: "mike",
age: 25
};
let {name, age} = node;
console.log(name); // mike
console.log(age); // 25
let/const/var 后面跟上用一對{}包裹的變量列表，變量名與對象屬性名相同，則就會取對象屬性對應的值初始化變量。
二：解構用于變量賦值
let node = {
name: "mike",
age: 25
};
name = "lily";
age = 20;
console.log(name); // lily
console.log(age);//20
({name, age} = node);
console.log(name);//mike
console.log(age);//25
以上代碼的邏輯為：預先定義的變量name和age分別被初始化為"lily"和20之后，又用node對象的屬性，重新賦值給name和age變量。解構賦值的語法要求，一定要用一對小括號()包裹整個解構賦值表達式。
三：給解構的變量設置默認值
let node = {
name: "mike",
age: 25
};
let {name, age, country = "China"} = node;
console.log(name); // mike
console.log(age); // 25
console.log(country); // China
如果我們在解構聲明變量時，定義了對象中不存在的屬性，那么這個變量的值為undefined。我們可以給變量設置默認值，當對象中沒有對應的屬性時，這個變量的值就是設置的默認值。
四：解構對象屬性賦值給不同名變量
在前面的例子里，我們的變量名都是和對象的屬性名一樣的。當然，也有辦法定義不同命中的變量，依然利用解構獲得對象的屬性值。
let node = {
name: "mike",
age: 25
};
let {name: localName, age, country: localCountry = "China"} = node;
console.log(localName); //mike
console.log(age); // 25
console.log(localCountry); //China
這里需要注意的是，冒號左邊的是對象的屬性名，右邊的是我們新定義的變量名，這一點與我們的認知和習慣恰好反過來了。
我們在這種場景下也可以給變量設置默認值，就像上面的localCountry變量那樣做：:左邊是對象的屬性名，右邊是一個賦值表達式; 這個表達式=左邊是變量名，右邊是默認值。
五：嵌套對象的解構
前面我們所有的例子，被解構的對象都是單層解構，接下來我們看看多層對象(嵌套對象)的解構：
let node = {
personalInfo: {
basicInfo: {
name: "mike",
age: 25
}
},
level: 3
};
let { personalInfo: { basicInfo } } = node;
console.log(basicInfo.name);// mike
上面代碼的倒數(shù)第二行，我們初始化的變量為basicInfo，而不是personalInfo，這一點要特別注意。personalInfo只是用來指明basicInfo的父節(jié)點。
嵌套對象的解構的語法就是：從原對象的最外層變量定位，一直到需要取值的那一層，每層之間用冒號:隔開，變量在冒號的右邊。我們在上面的例子機場上，再增加一層：
let node = {
personalInfo: {
basicInfo: {
name: {
firstName: "mike",
lastName: "deep"
},
age: 25
}
},
level: 3
};
let { personalInfo: {basicInfo: {name}} } = node;
console.log(name.firstName);// mike
以上，就是解構在對象數(shù)據(jù)的使用。下一篇，我們講解構在Array類型數(shù)據(jù)上的解構。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/106221.html
摘要：另外對于已經(jīng)聲明的變量進行解構賦值時，要非常小心。因此在行首加，將其強制轉化為表達式執(zhí)行。由于和無法轉為對象，所以對它們進行解構賦值，都會報錯。 let和const let和const是es6新增的兩個變量聲明關鍵字，與var的不同點在于： （1）let和const都是塊級作用域，在{}內(nèi)有效，這點在for循環(huán)中非常有用，只在循環(huán)體內(nèi)有效。var為函數(shù)作用域。 （2）使用let和con...
摘要：前言前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值解構賦值允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據(jù)對象值進行匹配。前言該篇筆記是第二篇 變量的解構賦值。這一章原文鏈接： 變量的解構賦值解構賦值ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。解構賦值是對賦值運...
摘要：前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據(jù)對象值進行匹配。 前言該篇筆記是第二篇 變量的解構賦值。 這一章原文鏈接： 變量的解構賦值解構賦值ES6 允許按照一定模式，從數(shù)組和對象中提取值，對...
摘要：數(shù)組的解構賦值特點根據(jù)數(shù)據(jù)的下標來賦值的，有次序。模式能夠匹配起來，如長度為數(shù)值和布爾值的解構賦值解構賦值的規(guī)則是只要等號右邊的值不是對象或數(shù)組，就先將其轉為對象。布爾值解構賦值為字符串的一種。在很多獨立細小的方面，解構賦值都非常有用。 1、解構賦值簡介 官方解釋：按照一定的模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。 舉個例子，想獲取數(shù)組中...
摘要：解構，一種黑魔法解構是從對象中提取出更小元素的過程。賦值是對解構出來的元素進行重新賦值?？偨Y本章講解了對象解構賦值和數(shù)組解構賦值，以及對象和數(shù)組混合情況下的解構賦值操作，最后一個知識點是解構函數(shù)的參數(shù)。 解構，一種黑魔法 解構是從對象中提取出更小元素的過程。賦值是對解構出來的元素進行重新賦值。 下面的代碼你可能無法在瀏覽器上實時測試，推薦在babel官網(wǎng)在線測試代碼：在線測試ES6代碼...
閱讀 2531·2021-09-24 10:29
閱讀 3813·2021-09-22 15:46
閱讀 2581·2021-09-04 16:41
閱讀 2986·2019-08-30 15:53
閱讀 1267·2019-08-30 14:24
閱讀 3061·2019-08-30 13:19
閱讀 2177·2019-08-29 14:17
閱讀 3527·2019-08-29 12:55
