[TOC] >[success] # 對象解構 ~~~ 1.對象解構的語法形式是在一個賦值操作符左邊放置一個對象字面量 ~~~ >[danger] ##### 給未定定義的變量賦值 ~~~ 1.下面案例中 '{name, age}' 就是防止在左邊的對象字面量的簡寫，代碼 運行后 'personObj.name', 'personObj.age' 分別賦值給了'name','age' 屬性上 2.要注意使用解構賦值，就要注意變量初始化的時候必須賦值，下面是錯誤的 寫法： let {name, age} const {name, age} var {name, age} ~~~ * es6的解構賦值 ~~~ const personObj = { name:'wang', age:17 } let {name, age} = personObj console.log(name) // wang console.log(age) // 17 ~~~ * es5 的寫法 ~~~ const personObj = { name:'wang', age:17 } let name = personObj.name let age = personObj.age ~~~ >[danger] ##### 給已定義的變量賦值使用 -- 解構賦值 ~~~ 1.當想給對相中的字段賦值給，已經定義的變量的時候，可以通過 小括號的形式包裹，因為 'js' 將一對開發的花括號，是為一個代碼塊， 語法規定代碼塊不能出現在賦值語句的左邊 2.下面的代碼對比上面的代碼 首先上面的代碼有'變量的標識符'出現在 等號左面的最開頭，下面賦值這種是因為，上面已經定義好了，要把對象 中的內容賦值給已經定義好的項只能'大括號'開頭，因此需要小括號'包裹' ~~~ ~~~ const personObj = { name:'wang', age:17 } let name = 'yi' let age = 19; ({name,age} = personObj); console.log(name) // wang console.log(age) // 17 ~~~ >[danger] ##### 設置默認值 * 沒有規定不存在變量的默認值顯示是 undefined ~~~ const personObj = { name:'wang', age:17 } let {name,age,sex} = personObj console.log(name) // wang console.log(age) // 17 console.log(sex) // undefined ~~~ * 自定義默認值如果在對象中存在的值設置默認值是無效的，因為默認值是默認沒有觸發 * 但對象中存在的值就不走默認值，會以對象中的值為準 ~~~ const personObj = { name:'wang', age:17 } let {name,age,sex='妖'} = personObj console.log(name) // wang console.log(age) // 17 console.log(sex) // 妖 ~~~ >[danger] ##### 想使用別名獲取到對象中的值并賦值 ~~~ 1.左側就是key/value 形式，其中key是對象中的value，value 就是你新叫的別名 ~~~ ~~~ const personObj = { name:'wang', age:17 } let {name:myNmae,age:myAge} = personObj console.log(myNmae) // wang console.log(myAge) // 17 ~~~ >[danger] ##### 嵌套對象解構賦值 ~~~ 1.當對象是嵌套對象的形式，也可以通過嵌套解構賦值獲取 ~~~ ~~~ const personObj = { name:'wang', age:17, friend:{ first:{ name:'chun', age:'20' } } } let {friend:{first}} = personObj // 起別名獲取 let{friend:{first:firstFriend}} = personObj console.log(first.name) // chun console.log(first.age) // 20 // 通過別名獲取 console.log(firstFriend.name) // chun console.log(firstFriend.age) // 20 ~~~ >[danger] ##### 總結 ~~~ 1.對象的結構可以理解成對象是以key做唯一標識的，因此我們結構時候可以理解提取就是這個key 當然，也可以對取出的key重新命名 ~~~ >[danger] ##### console.log 應用場景 ~~~ 1.用時候我們可能會寫大量的console.log 代碼，但實際我們可以利用結構直接取出log 方法來打印使用 ~~~ ~~~ const { log } = console log('foo') log('bar') log('123') ~~~