JAVASCRIPT初學筆記39 複習ES6實用語法-物件解構(deconstruct)與物件縮寫(shorthand)

前兩周的課程壓力比較大，文章更新的速度銳減，因為都在試圖搞懂用express做登入系統，真的是搞得一個頭兩個大~!在接觸Node的時候總是會用到ES6的一些觀念，這邊再次將解構這個概念做一次統整。

什麼是物件解構(deconstruct)?

簡單來說就是只取出物件中我們想要的部分來使用，一個例子勝過千言萬語，我們看一下以下的範例。 假設今天你有個物件，你打算取出其中的值並存為變數讓你在程式中可以反覆利用

const student = {
  name: 'Danny',
  id: '9831032',
  school: 'NTHU'
}

最簡單的作法就是分別取出，並存為不同的變數。

const name = student.name
const id = student.id
console.log('name', name);
console.log('id', id); 
//輸出結果
name Danny
id 9831032const 

這沒有什麼不好，也沒什麼特別的，但想像一下今天你要取出的變數有一~大~堆，這樣一行一行寫很明顯違反了我們懶惰的天性，於是解構這個東西出現了~!同樣的事情，我們可以直接用解構來完成。

const { name, id } = student
console.log('name', name);
console.log('id', id); 

上面這段程式碼可以簡單翻譯為建立name&id兩個變數，並在student這個物件中，尋找物件內name & id的key，並將其value存進name & id這兩個變數，做的事情其實跟我們一開始的寫法一模一樣，只是更為精簡!

那假設我今天取出的變數不想命名為name(可能你程式的其它地方已經有用到這個變數名稱)，你該怎麼辦? 解構同樣也能做到這樣的事情! 下面的範例中，我將取出的name值存進student_name這個變數中!

const { name:student_name, id } = student
console.log('name', student_name);
console.log('id', id);
console.log(student);
//輸出結果
 name Danny
 id 9831032
 { name: 'Danny', id: '9831032', school: 'NTHU' } //原物件沒有受到任何影響

什麼是物件縮寫(shorthand)?

縮寫就是懶人的寫法，其實我們在之前的建構子的時候就已經講過這個東西，這邊再做一次複習!依樣我們看一下以下的例子。

const name = 'Danny'
const id = '9831032'
const school = 'NTHU'

const student = {
  name: name,
  id: id,
  school: school
} 

若你常使用物件建構子，這樣的函式你應該看得很習慣了，麻煩死了對吧?還好在es6已經解決了這個問題，當你今天的key&value有相同的名稱時，同樣的程式碼可以改寫為

const name = 'Danny'
const id = '9831032'
const school = 'NTHU'

const student = {
  name,
  id,
  school
} 

兩者的效果完全一模一樣，沒有任何差別，這玩意在node中尤其實用。舉個例子來說，node中我們經常要輸出或引入外部的函數，在輸出時就很常用到這樣的寫法。

const add = (a, b) => {
  return a + b
}
//原始寫法
module.exports = { add:add }
//shorthand
module.exports = { add } 

今天當你有一堆函式跟變數要輸出時，shorthand真的是個非常好的幫手!
ES6的這兩個東西都非常的實用~強烈建議盡早熟練使用他們!