VUE3 課前章節-JS 必備觀念-ES6縮寫

1. 語法糖與新增語法
   語法糖：不會影響運作，邏輯與當前 JS 一致

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

2. 物件內變數縮寫
   當物件裡使用到其他物件且同名 可以只寫一次會直接用同名做他的名稱

   const person = {
              name: '小明'
            };
   
            const people ={
              person: person
            }
   //可以寫成
   const person = {
              name: '小明'
            };
   
            const people ={
              person
            }
   

3. 陣列展開
   可以用...的方式取代傳統.concat

   const groupA = ["小明", "杰倫", "阿姨"];
   const groupB = ["老媽", "老爸"];
   //以下結果相同
   const groupAll = groupA.concat(groupB);
   const groupall2 = [...groupA, ...groupB];
   

3-2 物件擴展
新增一個物件包含新方法，同時加入原有的方法

const methods = {
              fn1() {
                console.log(1);
              },
              fn2() {
                console.log(1);
              },
            };

const newMethods ={
              fn(){
                console.log(1)
              },
              ...newMethods //展開
            }

3-3. 轉成純陣列
使用[...要被轉的陣列名稱]來將陣列轉為純陣列

const doms = document.querySelectorAll("li");
console.log(doms); // 請轉為純陣列
const newDoms = [...doms];//轉成純陣列

1. 預設值
   在function裡面加入預設值避免錯誤

function sum(a, b) { // 請加入預設值避免錯誤
   if (!b) {b=2} //如果沒有b b等於2
   return a + b;
   }
console.log(sum(1));

//可以改寫為

function sum(a, b=2) { // 請加入預設值避免錯誤
  return a + b;
  }

console.log(sum(1));