ES6 重要觀念 note:const / let & Arrow function & 函式參數的預設值

最近在上彭彭老師的React 前端開發:從入門到進階,覺得內容的概念解釋淺顯易懂,以下為課程筆記:

ES6 使用 let 變數與 const 常數

let(變數)

let 是以程式區塊(大括號)做分界,會比 var 還嚴謹,在大括號內宣告的變數,跑到大括號外去呼叫,就會找不到。

範例:

let(let i=0; i<3; i++){
 console.log(i);
}
console.log(i); // 錯誤,找不到變數 i
  function(){
   let(let i=0; i<3; I++){
   console.log(i);
   }
  }
console.log(i); // 錯誤,找不到變數 i

var(變數)

var 是以 function 為分界,只要在 function 內宣告的變數,跑到 function 外去呼叫,會找不到。沒有 function 時,就會直接在 global scope 找。

範例:

for(var i=0; i<3; i++){
console.log(i);
}
console.log(i); // 會得到 3

function(){
 for(var i=0; i<3; I++){
 console.log(i);
 }
}

console.log(i); // 錯誤,找不到變數 i

Const(常數)一定要指定資料並資料不可修改

Const 為常數,所以一定要先要宣告值,且一旦宣告值後就不能改變。不能像 let 或 var 一樣,可以先宣告但不給值,如 let x;

範例:

var v =3;
v =“Hello World”; //可變動
let l; //可暫不給資料
l=0 //資料可變動

const x;//錯誤,一定要給資料
const c=100;//正確
c=50;//錯誤,不能更動

ES6 常用的 function 寫法為 Arrow function

  1. (參數列表)=>(回傳值)
    省略 function 直接放參數在小括號
    -省略大括號裡頭的 return

如果 function 的結果是直接 return 某值,可以直接包在小括號裡
如:let a =(n1,n2)=>(n1+n2);

範例:

//傳統函式宣告
let add = function(n1,n2){
return n1+n2;
};

//箭頭函數(不用寫 function 跟 return)
let add =(n1,n2)=>(n1+n2);

2.(參數列表)=>{函式內部程式}
如果 function 不只 return 某值,要包在大括號裡,如:let a =(n1,n2)=>{alert(“hi”)};

範例:

//傳統函式宣告
return n1+n2;
};
//箭頭函數
let add =(n1,n2)=>{
return n1+n2;
};

3.匿名函式(以 setTimeout 為例)
setTimeout 寫法:setTimeout(function(){ }, 時間);

在排程中使用「傳統的方式」撰寫匿名函式:

//傳統方式
setTimeout(function(){
 console.log(“過了一秒鐘”);
}, 1000};

在排程中使用「箭頭函式」撰寫「匿名函式」:

setTimeout(()=>{
 console.log(“過了一秒鐘”);
},1000);

ES6 函式參數的預設值

舊的方法是從外面傳值進參數預設值,ES6 的方式是可以直接在參數後面寫 = 預設值。

// 舊寫法
function show(message){
 if(typeof message ===“undefined”){//未給定 message 資料
 message=“預設值”;
 }
 alert(message);
}
show(“Hi”); //顯示 Hi
show(); //顯示預設值

ES6 作法: (參數1=預設值, 參數2=預設值) //在參數後面放想要給的預設值,也可以不寫。

//ES6 寫法
function show(message=“預設值”){
 alert(message);
}
show(“Hi”); //顯示 Hi
show(); //顯示預設值


//箭頭函示寫法
let show = (message =“預設值”)=>{
 alert(message);
};

show(“Hi”); //顯示 Hi
show(); //顯示預設值

其他範例:

範例一

function multiply(n1, n2=1){
 return n1*n2;
}
multiply(3,4); //12
multiply(5); //5 可以不給 n2 的資料

//箭頭函示
let multiply= (n1, n2=1)=>(n1*n2);
multiply(3,4); //12
multiply(5); //5 可以不給 n2 的資料

範例二:後面的參數可使用前面的參數名稱

function combine(first=“Ann”, last=“Huang”, name=first+“ ”+last){
alert(name);
}

combine(“Helen”, ”Li”); //顯示:Helen Li
combine(“Helen”); //顯示:Helen Huang
combine();//顯示:Ann Huang

//箭頭函式寫法
let combine=(first=”Ann”, last=“Huang”, name=first+” ”+last)=>{
alert(name);
}

combine(“Helen”, ”Li”); //顯示:Helen Li
combine(“Helen”); //顯示:Helen Huang
combine();//顯示:Ann Huang