iT邦幫忙

第 11 屆 iThome 鐵人賽

0
自我挑戰組

新手初探 Vue系列 第 22

鐵人賽Day23 - ES6 之解構賦值

解構賦值的概念,有點像是把一份資料複製到另外一份,在以往我們要把陣列的值取出來,要透過宣告一個變數來放置,如下:

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

但是如果用解構賦值來處理的話,先宣告一個空的陣列等於要取值的陣列:

let [] = family;

之後把變數放進去我們的空陣列:

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

這時候我們用 console 查看:

console.log(ming, jay, auntie, mom, father);

就會發現輸出,小明,杰倫,阿姨,老媽,老爸,這就是基本的解構賦值
衍伸出來的問題,就是當我的變數並沒有那麼多的時候,跟我要取值的陣列長度不對等的時候,會發生什麼事?

let family = ['小明', '杰倫', '阿姨', '老媽', '老爸'];
let [ming, jay, auntie] = family;
console.log(ming, jay, auntie);

會發現 console 會輸出,小明,杰倫,阿姨,並自動把後面的值給省略
另外一種情況是當我的變數中間有留空位的時候:

let family = ['小明', '杰倫', '阿姨', '老媽', '老爸'];
let [ming, , auntie] = family;
console.log(ming,auntie);

會發現 console 是輸出,小明,阿姨,會自動跳過杰倫,這是值得注意的情況

再來是針對兩個變數的值交換:

let Goku = '悟空';
let Ginyu = '基紐';

以往我們要把上面變數的值交換,可能需要藉由宣告第三個變數來達成,但是解構賦值也能幫我們做到這樣的事情:

[Goku, Ginyu] = [Ginyu, Goku];
console.log(Goku, Ginyu);

這時候在 console 看,會發現值已經交換了

接著是針對字元的拆解,要把下面的字串拆成一個字元一個字元:

let str = '基紐特攻隊';

這時候有點類似最一開始的方式:

let [q, a, z, w, s] = str;
console.log(q, a, z, w, s);

這時候就會單獨各別輸出一個字元了

上面都是針對陣列的部分,解構賦值也可用於物件上:

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

如果我們想取出某個屬性的值的時候就可以這樣寫:

let { Ginyu } = GinyuTeam
console.log(Ginyu);

這時候我們在 console 看就會輸出,基紐
當然我們也可以賦予一個我們自定義的變數給它:

let { Ginyu: test } = GinyuTeam
console.log(test);

這時候一樣是輸出,基紐

接著是預設值的部分,解構賦值我們可以給予預設值,當另外一邊沒有值的時候,就會採用預設值:

let [ming = '小明', jay = '杰倫'] = ['阿明'] 

右邊只有一個阿明,並沒有第二個值,這時候如果用 console 下去看:

console.log(ming, jay);

就會輸出,阿明,杰倫,第二個變數的值就會採用預設值
在物件上也是一樣有預設值:

let { family: ming = '小明' } = {}
console.log(ming);

這時候 console 就會輸出小明,因為右邊沒有任何的值


上一篇
鐵人賽Day22 - ES6 之展開與其餘
下一篇
鐵人賽Day24 - ES6 之縮寫
系列文
新手初探 Vue30

尚未有邦友留言

立即登入留言