ES6-函示與作用域

讀書會分享 - 從es6開始的 Javascript 學習生活

Transcript

1. 從ES6開始的Javascript學習生活 - 函式與作⽤域 - @郭喬治
2. 函式的基本語法結構 //匿名函式 function() {} //有名稱的函式 function foo() {}
3. 函式的基本語法結構 //匿名函式 function() {} //沒有函數名稱，通常⽤來當作⼀個指定值
4. 函式的基本語法結構 //匿名函式 function() {} //沒有函數名稱，通常⽤來當作⼀個指定值 var foo = function () {}
5. 箭頭函式（Arrow Function） const sum = ( a, b ) => a + b
6. 箭頭函式（Arrow Function） const sum = (a, b) => a + b const sum = function(a, b){ return a + b; }
7. 箭頭函式（Arrow Function） const sum = (a, b) => a + b const sum = function(a, b){ return a + b; }
8. 箭頭函式（Arrow Function） ([param] [, param]) => { statements } param => expression statements vs expression
9. 箭頭函式（Arrow Function） ([param] [, param]) => { statements } // 花括號 { } 是有意義的，如果函式沒回傳東⻄就要使⽤花括號， 反之則不使⽤。 param => expression // 只有單⼀個參數時，可不⽤()。
10. 箭頭函式（Arrow Function） // 未加花括號 (x, y) => x+y
11. 箭頭函式（Arrow Function） // 未加花括號 (x, y) => x+y function (x, y) { return x + y; };
12. 箭頭函式（Arrow Function） // 未加花括號 (x, y) => x+y function (x, y) { return x + y; }; // 有加花括號 (x, y) => { x+y }
13. 箭頭函式（Arrow Function） // 未加花括號 (x, y) => x+y function (x, y) { return x + y; }; // 有加花括號 (x, y) => { x+y } (function (x, y){ x + y; }
14. 箭頭函式（Arrow Function） param => expression // 只有單⼀個參數時，可不⽤()。
15. 箭頭函式（Arrow Function） param => expression // 只有單⼀個參數時，可不⽤()。 (x) => x+1
16. 箭頭函式（Arrow Function） param => expression // 只有單⼀個參數時，可不⽤()。 (x) => x+1 x => x+1
17. 箭頭函式（Arrow Function） param => expression // 只有單⼀個參數時，可不⽤()。 (x) => x+1 (function (x) { return x + 1; } x => x+1
18. 預設參數值 function sum(x, y){ x = x || 10; y = y || 20; console.log( x + y); } sum(); //30 sum(2, 3); //5 sum(2); //22 sum(null, 3); //13 ES5
19. 預設參數值 function sum(x, y){ x = x || 10; y = y || 20; console.log( x + y); } sum(); //30 sum(2, 3); //5 sum(2); //22 sum(null, 3); //13 function sum(x = 11, y =6){ console.log( x + y); } sum(); //17 sum(2, 3); //5 sum(2); //8 sum(null, 3); //3 ES5 ES6
20. 參數傳入運算式 function bar(val) { return y + val; } function foo(x = y+3, z = bar(x)) { console.log( x + z); } var y = 5; foo();
21. 函式作為傳入參數 const addOne = function(value){ return value + 1 } const addOneAndTwo = function(value, fn){ return fn(value) + 2 } console.log(addOneAndTwo(10, addOne)) //13
22. 函式不固定傳入參數 函數傳入參數時，沒有預設值的時候會視為undefined值
23. 函式不固定傳入參數 function sum(x, y, z) { return x+y+z } console.log(sum(1, 2, 3)) //6 console.log(sum(1, 2)) //NaN console.log(sum(1, 2, 3, 4)) //6 console.log(sum(‘1’, ‘2’, ‘3’)) //123 console.log(sum(‘1’, ‘2’)) //12undefined console.log(sum(‘1’, ‘2’, ‘3’, ‘4’)) //123 函數傳入參數時，沒有預設值的時候會視為undefined值