iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 22
1
Modern Web

邁向 JavaScript 勇者之路系列 第 22

JavaScript ES6 解構賦值

  • 分享至 

  • xImage
  •  

解構賦值這是在 MDN 文件上的翻譯名詞,如果簡單來說他是個語法糖,讓我們在寫 物件、陣列 的時候可以使用縮寫來達到相同的效果,了解其中的規則再運用上最會很便利,且可以有效增加閱讀性 (程式碼短非常多)。

解構賦值可以想像是鏡子的概念,將右方的資料往左邊送,然後會一個位置對一個值 (但沒有像鏡子左右顛倒)。

https://ithelp.ithome.com.tw/upload/images/20171225/20083608RO8J9D8KsT.jpg

陣列

解構賦值就像是鏡子一樣,將值從右邊鏡射到左邊,所以左邊的陣列基本上就是從右方一個一個對映。因此右方的的五個值(字串)直接對應左方陣列的五個變數。

let family = ['小明', '杰倫', '阿姨', '老媽', '老爸'];
let ming = family[0];
let jay = family[1];
let auntie = family[2];
// ... 略

let [ming, jay, auntie, mom, papa] = family;

如果遇到空的變數,這些值也會跳過。

let family = ['小明', '杰倫', '阿姨', '老媽', '老爸'];
let [ming, , , mom, papa] = family;
// ming: 小明
// mom: 老媽
// papa: 老爸

如果左方多於右方,左方的變數會出現 undefined

let family = ['小明', '杰倫', '阿姨', '老媽', '老爸'];
let [, , , , , who] = family;
// who: undefined

至於傳值是否有順序性,在這個範例中直接將右邊的變數交換到左邊,可以看到是同時交換變數,所以在互換變數值時是非常方便的。

let Goku = '悟空';
let Ginyu = '基紐';
[Goku, Ginyu] = [Ginyu, Goku];
// Goku: '基紐'
// Ginyu: '悟空'

遇到字串則會將字串拆解成一個一個字元,賦予到左方的變數上。

let str = '基紐特攻隊';
[a, b, c, d, e] = str;

物件解構

物件解構也是和陣列解構有著相同的概念,只不過陣列是使用順序的索引值對應,但物件則是使用物件的屬性名稱來做對應(因此沒有順序性)。在以下範例則是快速將物件值解構在變數上。

let family = {
  ming: '小明',
  jay: '杰倫',
};

// 一般會這樣寫
let ming = family.ming
let jay = family.jay

// 縮寫版
let { ming, jay } = family
// ming: 小明
// jay: 杰倫

而物件的解構方法,還能重新賦予變數的名稱,如以下 Ginyu 在取得值後,將變數名稱改為 Goku,因此 Goku === '基紐'

let GinyuTeam = {
  Ginyu: '基紐',
  Jeice: '吉斯',
  burter: '巴特',
  // ...
}
let { Ginyu: Goku } = GinyuTeam;
// Goku: '基紐'

混合使用

相同的觀念,只要了解以上的觀念,這題也能了解到最終會產生怎樣的變數。

let { ming: Goku, family: [, mom] } = { ming: '小明', family: ['阿姨', '老媽', '老爸'] }
console.log(Goku, mom); // 請問答案是什麼?

說明:

  • ming 取得右方的 '小明' 後,將變數名稱改為 Goku
  • family 取得家庭陣列後,再將第二個值套用在 mom (第二個變數上。)

預設值

除了使用鏡射的概念外,為了避免值沒有賦予造成 undefined,可以使用預設值避免此問題。如以下左方的陣列都先賦予的預設值,當右方的陣列只有一個值時,左方的陣列剩餘內容將會採用預設值。

let [ming = '小明', jay = '杰倫'] = ['阿明'] 
// 第一個會被賦值,第二個會用預設
// ming: "阿明"
// jay: "杰倫"

物件的預設值也是相同的概念。

let { family: ming = '小明' } = {}
// ming: '小明'

函式

除了以上的方法外,解構也能使用在函式的參數,使用方式如同將傳入的物件對應到函式參數上。這樣參數一樣能夠能夠自訂變數名稱、順序、預設值等。

function callSomeone ({person = '小明', person2}) {
  console.log(`${person} 呼叫 ${person2}`)
}
callSomeone({ person: '杰倫', person2: '阿姨' }); // 杰倫 呼叫 阿姨
callSomeone('杰倫', '阿姨'); // 小明 呼叫 undefined
callSomeone({ person2: '阿姨' }); // 小明 呼叫 阿姨
callSomeone({ person2: '杰倫', person: '啊罵' }); // 啊罵 呼叫 杰倫
callSomeone({}); // 小明 呼叫 undefined

上一篇
JavaScript 展開與其餘
下一篇
ES6 陣列方法
系列文
邁向 JavaScript 勇者之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言