鐵人賽第一天

先說說參賽原因

參加課程團隊專題，自己當豬隊友

發現對vue瞭解非常淺薄，想藉由參與30天鐵人賽

培養每日學習態度，且透過這次學習完成作品網站

但由於基礎太差，所以會從非常非常基本學起

從大學後就沒認真寫過文章，再請各位多多包涵

所提供知識點有誤，再請務必在下面留言~

一、ES6縮寫
1-1 語法糖與新增語法
傳統寫法

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

語法糖:不會影響運作，邏輯與當前JS 一致

const obj = {
    myName : '物件1',
    fn() { //將function消失的縮寫
        return this.myName;
    }
}    
console.log(obj.fn());

新增語法:如箭頭函式=>會影響運作

const obj = {
    myName : '物件1',
    fn: () =>
        return this.myName;
    }
}    
console.log(obj.fn());

1-2 物件內變數縮寫

const person = {
    name : '小明';
}
//一般帶入寫法 : 
const people = {
    person : person ;
}
//導入person物件帶入people物件時，
//屬性與vue同名，帶入寫法可縮寫成
const people = {
    person
}

1-3 展開縮寫
一般寫法:不同陣列合併

const gA = ['能幹貓今天也憂鬱', '不死少女謀殺鬧劇'];
const gB = ['html', 'css'];
const groupAll = gA.concat(gB);
console.log(groupAll);

縮寫:不同陣列合併

const gA = ['能幹貓今天也憂鬱', '不死少女謀殺鬧劇'];
const gB = ['html', 'css'];
const groupAll = [...gA, ...gB];
console.log(groupAll);

1-4 擴展縮寫
新增一個包含新方法，同時加入原方法
一般寫法:不同物件合併

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

縮寫:不同物件合併

const newMethods = {
    fn() {
        console.log(0);
    },
    ...methods
}

1-5 轉成純陣列
一般寫法下產生較少陣列使用方法
在網頁上建立li序列，顯示nodelist結果，找尋"proto"點開後可查閱那些可使用語法

const doms = document.querySeclectorAll('li');
console.log(doms);

使用縮寫方法產生較多陣列方法

const newDoms = [...doms];
console.log(newDoms);

1-6 預設值

 function sum(a, b=3) { // 請加入預設值避免錯誤
   return a + b;
 }
 console.log(sum(1));//主要以此輸入b值時會優先使用
//若未設定預設值狀況下，僅入一個數值時，會出現NAN

知識點來源:六角課程、008天絕對看不完的vue3.js、網路文章