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));
#Vue #js #javascript







Related Posts

Day02 : 串列、Tuple

Day02 : 串列、Tuple

Laravel 5 component & slot

Laravel 5 component & slot

如何使用 Google Cartographer SLAM 演算法來建地圖

如何使用 Google Cartographer SLAM 演算法來建地圖






Comments