# Vue學習 #1 ES6縮寫
###### tags: `Vue 直播班 - 2022 春季班` `Vue`
## 語法糖 (讓原本語法變簡潔)

### <font color=#831437> 物件內函式 ---- 把:function拿掉</font>

const obj = {
  myName: '物件',
  fn: function() {   
    return this.myName;
  }
}

// #2 物件字面值 Object literals
// #2-1 物件內的函式
 const obj3 = {
   myName: '物件',
   fn(){ // 請改為縮寫  把:function拿掉
     return this.myName;
   }
 }

### <font color=#831437> 物件內放入變數 --- 變數也是物件</font>

// #2-2 物件內的變數
//在一個物件中放入一個物件
 const person = {
   name: '小明'  
 };

 const human={
   person:person  //<=重點在這裡
 }
 console.log(human);
 //-----------------------
 
 const  guitarType='j-45'; 
 
 const guitar={
     guitarType  //原本寫法想把 type放進去屬性，要變成 type:guitarType ， 語法糖可以直接縮寫將變數放進去
 };
 
 console.log(guitar);
 

### <font color=#831437> 陣列合併 --- 運用[...array]</font>

const groupA = ['小明', '杰倫', '阿姨'];
const groupB = ['老媽', '老爸'];
const groupAll = groupA.concat(groupB);
let groupTwo=[...groupA]; //代表的是將 groupTwo這個陣列設定成groupA
console.log(groupTwo);
let groupThree=[...groupB]; //代表的是將groupThree這個陣列設定成groupB
console.log(groupThree);
let arrayConbine=[...groupA , ... groupB] //代表將groupA和groupB組合再一起放到arrayConbine，效果跟concat一樣
console.log(arrayConbine);

### <font color=#831437>物件擴展 --- 將物件的內容都放到另一個物件上 </font>

// #3-2 物件擴展
// 新增一個物件包含新方法，同時加入原有的方法
const methods = {
  fn1() {
    console.log(1);
  },
  fn2() {
    console.log(1);
  },
}
const newMethod={
  ...methods  //將methods的函式放到newMethod裡面
}
console.log(newMethod);

### <font color=#831437> 轉成純陣列 --- NodeList轉成array</font>

// #3-3 轉成純陣列
const doms = document.querySelectorAll('li'); //用querySelectorAll抓元素會傳來的是NodeList並不會是單純的array
console.log(doms); // 請轉為純陣列 
const array=[...doms]; //轉為純陣列
console.log(array);

### <font color=#831437>預設值 --- 將函式參數直接給一個值</font>

function sum(a=6, b=2) { // 請加入預設值避免錯誤  //將a和b預設值進去
  return a + b;
}
console.log(sum()); //()如果ab沒有放入值就會啟用預設值 ans:8
console.log(sum(2,3)); // 如果有放入值，就不會啟用預設值 ans:5

### <font color=#831437>解構</font>

const people={
    danny:{
        name:'danny123',
        like:'布丁',
        price:40
    },
    rick:{
        name:'rick456',
        like:'泡芙',
        price:60
    },
    gowork(){
        console.log('去上班');
    }
};

//想取出danny
//原本寫法:  let person=people.danny;
//解構寫法: 把想抓的值放在{} = 該物件 
let {danny}=people;

//想取出gowork這個方法
//原本寫法: let gowork123=people.gowork();
//解構寫法: 把要的方法放在{} = 該物件
let {gowork} = people;

### <font color=#831437>? --- 避免物件值不存在</font>

const people={
    danny:{
        name:'danny123',
        like:'布丁',
        price:40
    },
    rick:{
        name:'rick456',
        like:'泡芙',
        price:60
    },
};

//想要抓people裡面的jay屬性
//但是people沒有jay，所以執行下一行的時候會報錯，程式碼就不會繼續往下執行

console.log(people.jay.name);

//使用 ? 這個語法時並不會報錯，而是顯示這個值是 undefined

console.log(people?.jay?.name);