Javascript 常數 ES6 筆記

#Javascript ES6 常數筆記

const 常數名稱 let 宣告變數

// var 變數的 scope 以函式為界線，迴圈內外屬於同一個 scope
for(var i=0;i<3;i++){
	console.log("i:"+i);
}
console.log("outside i:"+i);

// 請將上方的變數 i 換用 let 宣告，比較輸出的差異。

// var 變數的 scope 以函式為界線，迴圈內外屬於同一個 scope

for(let i=0;i<3;i++){
	console.log("i:"+i);
}
console.log("outside i:"+i);

let const var 差別

var 變數的 scope 以函式為界線，迴圈內外屬於同一個 scope scope 可用範圍
let 可用範圍以程式區塊 ( 大括號 ) 為分界線 let 以變數scope for(let i=0; i<5;i++){ console.log(i); }
const 宣告常數常數資料不能變動

使用 => 建立函式

① (參數列表)=>(回傳值) ② (參數列表)=>{函式內部程式}

//傳統寫法
setTimeout(function(){
console.log("過了一秒");
},1000);

ES6 (參數列表)=>(回傳值)
setTimeout(()=>{
console.log("過了一秒");
},1000);


① (參數列表)=>(回傳值) 的使用方式

傳統寫法
let add=function( n1 , n2 ){
return n1+n2;
}

ES6 寫法
let add=( n1 , n2 )=>( n1+n2 )



② (參數列表)=>{函式內部程式} 的使用方式

傳統寫法
let add=function( n1 , n2 ){
return n1+n2;
}

ES6 寫法
let add=( n1 , n2 )=>{
return n1+n2;
}

`// 展示訊息：請改成箭頭函式
let showMessage=(message)=>{
    console.log(message);
};

// 計算 1+2+...+max：請改成箭頭函式
let sum=(max)=>{
    let n=1;
    let result=0;
    while(n<=max){
        result+=n;
        n++;
    }
    return result;
};

// 兩秒後跳出警告視窗：請改成箭頭函式
setTimeout(()=>{
    alert("過了兩秒");
}, 2000);

// 以下呼叫上方的函式，不用做任何更動
showMessage("Hello");
sum(50); // 得到回傳值 1275``

// 傳統的寫法一 function add(n1, n2){函式主體} // 傳統的寫法二 let add=function(n1, n2){函式主體} // 傳統的匿名函式 function(n1, n2){函式主體}

// 箭頭函式一 let add=(n1, n2)=>(回傳值) // 箭頭函式二 let add=(n1, n2)=>{函式主體} // 箭頭函式撰寫匿名函式 (n1, n2)=>(回傳值) (n1, n2)=>{函式主體}

函式參數預設值

(name 1=預設值1 name2 =預設值2)

let show=(message=“預設值”)＝>{alert(message);}; show(“hello”); show();

-範例1 function multiply(n1,n2=1){ return n1*n2; } multiply(3,4); multiply(5);

-範例2 function multiply(n1,n2=1)=>(n1*n2); multiply(3,4); multiply(5);

後方的參數可以使用前面參數的名稱 function combine(first=“Jedi”,last=“Wang”,name=first+""+last){ alert(name); } combine(“Helen”,“Li”); combine(“Helen”); combine();//

/ 傳統函式寫法 function t1(n1=5){} let t2=function(n1,n2=4){} // 箭頭函式寫法 let t3=(x=4,y=5)=>(); let t4=(message=“若沒有資料，就用這個資料”)=>{}

/* 以下是等差級數的加法，做 1+2+..+max 的總和若呼叫時沒給定參數資料，則輸出：不做事請修改函式內部的程式碼，以滿足呼叫時的預期結果 */ function sum(max=0){ if(max==0){ console.log(“不做事”); }else{ let result=0; let n=1; while(n<=max){ result+=n; n++; } console.log(“1+2+..+"+max+"="+result); } } // 修改後的函式，必須滿足以下的輸出結果 sum(); // 輸出：不做事 sum(100); // 輸出：1+2+…+100=5050

function add(n1=1, n2=0){ console.log(n1+n2); } // 修改後的函式，必須滿足以下的輸出結果 add(3, 4); // 輸出：7 add(5); // 輸出：5 add(); // 輸出：1

類別：設計圖

物件：根據設計圖製造出來的實體

一個「類別」設計可以用來產生無數個「物件實體」

類別: class constructor

產生物件實體關鍵字：new

定義類別：class 類別名稱{ } ex: class Car{ } 建立物件：new 類別名稱() ex: let car1 = new Car

Constructor 建構式

建構物件用的函式
建立新物件時會被呼叫的函式
JavaScript 會內建一個空白建構式(即便你沒寫建構式)

class Car {
constructor(){
   console.log("THIS IS CALLED");
    }
}

let car1 =new Car();

屬性：用來描述物件的個別差異

constructor(參數列表) {
this.屬性名稱 = 初始資料
}
let car1 =new Car();


consrtructor(參數列表){
this.屬性名稱=初始資料;
}
this代表 正要產生的新物件 obj 
屬性名稱 ex color this.color 
let car1= new Car(); 呼叫建構式 資料會拿到color 屬性


constructor(color){
this.color=color
//建立新屬性color 資料偷過參數 彈性的 在建立物件時提供的
}
//利用已經定義好的類別產生新物件
let car1 = new Car("blue");
let car2 = new Car("green");

this代表正要產生的新物件 obj

物件.屬性名稱物件.屬性名稱＝新資料

方法:與物件綁定的function

method 方法

用來描述物件可以做的事
與物件綁定的函式

呼叫物件方法：物件.方法名稱(參數資料)

在物件方法中使用 this 代表綁定物件

run(){ console.log(“Car " + this.color+“Running”); } let car1 = new Car(“blue”); car1.run(); // “Car blue Running”

class Animal{ constructor(name){ this.name=name; } // 撰寫建構式，以滿足下方的輸出要求 sleep(){ console.log(this.name+“is Sleeping”); } // 撰寫方法，以滿足下方的輸出要求 … }

let a=new Animal(“Mini”); console.log(a.name); // 印出 “Mini” a.sleep(); // 印出 “Mini is Sleeping”

// 建立物件
new 類別名稱(參數資料)
// 存取屬性
物件.屬性名稱
// 呼叫方法
物件.方法名稱(參數資料)


class SimpleAnimal{
 constructor(name){
     this.name=name;
 }
 sleep(){
      console.log(this.name+"is Sleeping");
 }
}

let a = new SimpleAnimal("Spot");
console.log(a.name);
a.sleep;

// 練習二：進階練習
class Animal{
    constructor(name,kg){
     this.name=name;
     this.kg=kg;
    }// 撰寫建構式，以滿足下方的輸出要求
    eat(moreKG){
       this.kg+=moreKG;
       console.log(this.name+"吃飯, 增加"+moreKG+"公斤，現在"+this.kg+"公斤");
    }
    defecate(lessKG){
    
    this.kg-=lessKG;
        console.log(this.name+"大號,減少"+lessKG+"公斤，現在 "+this.kg+"公斤");
    }//  撰寫方法，以滿足下方的輸出要求
};
let a=new Animal("Mini", 2);
console.log(a.name+": "+a.kg+" 公斤"); // 印出 "Mini: 2 公斤"
a.eat(0.1); // 印出 "Mini 吃飯，增加 0.1 公斤，現在 2.1 公斤"
a.defecate(0.08); // 印出 "Mini 大號，減少 0.08 公斤，現在 2.02 公斤"