iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
3
Modern Web

🍐放學後的網頁開發系列 第 7

[Day7] 柚子放學後的網頁生活 - ES6 #3

昨天介紹完
3. Arrow Function
4. Destructure assignment

今天再撐一下,剩下兩個小主題
5. Spread operator
6. Inheritance

Spread operator 展開運算子

把一個 陣列展開 ( expand )個別數值 的快速寫法

那功能有什麼呢 ?

  1. 用於將 Array 做組合
    ( 過去如果想要組合成新Array => 使用concat )

    var array1 = [1,2,3,4,5];
    var array2 = [6,7,8];
    var array3 = array1.concat(array2);
    
    console.log(array3);
    output ==> [1,2,3,4,5,6,7,8]
    

    使用Spread operator可以省去很多時間
    用法:在要嵌入的array前加上 ...表示整個array

    var array4 = [...array2,9,10,...array1];
    
    console.log(array4);
    output ==> [6,7,8,9,10,1,2,3,4,5]
    

    優點很明顯 - 順序調整比 concat 方便太多

  2. 將陣列內容獨立成參數

    先說說原本怎麼做:

    var array = [3,4,5];
    
    function sumarr(a,b,c){
        console.log(a+b+c);
    }
    sumarr(array[0],array[1],array[2]);
    
    output ==> 12
    

    再來,一樣用 spread operator 感受一下

    var array = [3,4,5];
    
    function sumarr(a,b,c){
        console.log(a+b+c);
    }
    sumarr(...array);
    
    output ==> 12
    

    會得到一樣的結果!
    或許這邊感覺不夠明顯,那就把資料變複雜比較看看吧 ~

Inheritance

想在JS中寫的跟物件語言 (Ex : C++) 一樣,沒問題
那我們先建立要用的class

  • class 叫 Vehicle,constructor 傳 name 並有一個方法印出他在移動
  • 用 Car extend,加上 sound 的 function 印出會發出 bababa 聲
​class Vehicle{
     constructor(name){
        this.name = name;
     }
     showaction(){
        console.log(`$(this.name) is moving`);
     }
}

class Car extend Vehicle{
     sound(){
        console.log(`$(this.name) bababa `};
}

Class成功寫好後,那就一樣來New他,建立物件!

const DY = new Car();
console.log(DY.name);
output==>DY

DY.showaction();
output==>DY is moving

DY.sound();
output==>DY bababa 

一個很簡短的範例,一樣的玩法下課後好好發揮囉 !
那我們的ES6幾個重要的功能就介紹到這邊
明天會是全新的內容哦 ~ 敬請期待 !

最後檢視今天學了什麼

  • 使用 Spread constructor 展開
  • 使用 JS 簡單玩繼承

下課囉 ~ 請鎖定 柚子放學後的網頁生活


上一篇
[Day6] 柚子放學後的網頁生活 - ES6 #2
下一篇
[Day8] 柚子放學後的網頁生活 - Vue.js
系列文
🍐放學後的網頁開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言