JavaScript快速入門 – 函式與工具類別庫
函式/Functions
函式的宣告與定義: function 函式名稱(參數1, 參數2, 參數3) { //函式body }function say() { //... } function square(a) { //... } function add(a, b) { // ... } function say(message) { console.log(message); }函式的呼叫: functionName(arguments);
say('Hello');函式的返回值
function add(a, b) { return a + b; } //呼叫add函式,並返回二個參數a與b值的加總 let sum = add(10, 20); console.log('Sum:', sum);
function compare(a, b) { if (a > b) { return -1; } else if (a < b) { return 1; } return 0; }
Function Expressions (函式陳述)
let x = function (num) { return num * num }; console.log( x(4) ); //輸出:16
Anonymous Function 匿名函式
就地執行函式
例1: (function() { console.log('IIFE'); })();(function() { console.log('IIFE'); })();例2:
let person = { firstName: 'John', lastName: 'Doe' }; (function () { console.log(`${person.firstName} ${person.lastName}`); })(person);
Regular Function/Inline Function/Anonymous Function完整例
Function
function func() { alert ('function'); } $('a').click(func);
Inline Function
var func = function() { alert ('inline') }; $('a').click(func); // Alternative es6+ inline arrow function. let func2 = () => alert('inline'); $('a').click(func2);
Anonymous Function
$('a').click(function() { alert('anonymous'); }); // Alternative es6+ anonymous arrow function. $('a').click(() => alert('anonymous'));
工具函式
輸出資料/Outputting Data
alert() 使用瀏覽器的警告方塊輸出訊息。 confirm() Opens up a yes/no dialog and returns true/false depending on user click 開啟一個Yes或No的對話框,並且依使用者按了Yes或No傳回true或false。 console.log() Writes information to the browser console, good for debugging purposes 將資料從瀏覽器中的console列印出來,適合程式除錯使用。 document.write() 直接將資料輸出到到HTML文件中。 prompt() 建立一個取得使用者輸入的對話方塊。常用工具函式
decodeURI() 解碼一個由encodeURI或類似方法所觮立的URI decodeURIComponent() 解碼一個URI的組成 encodeURI() 將一個URI以UTF-8方式編碼 encodeURIComponent() Same but for URI components eval() Evaluates JavaScript code represented as a string isFinite() Determines whether a passed value is a finite number isNaN() Determines whether a value is NaN or not Number() Returns a number converted from its argument parseFloat() Parses an argument and returns a floating point number parseInt() Parses its argument and returns an integer日期類別 Date
日期物件建立
Date() 建立一個目前日期與時間的日期Date物件 Date(2017, 5, 21, 3, 23, 10, 0) 建立一個特定日期物件,上例:年、月、日、時、分、秒、毫秒 Date("2017-06-23") 以日期字串的方式建立一個日期物件日期物件的操作
getDate() 取得日期的數值 (1-31) getDay() 取得禮拜幾的數值 (0-6) getFullYear() 取得4位數的年份數值 (yyyy) getHours() 取得時數 (0-23) getMilliseconds() 取得毫秒數值 (0-999) getMinutes() 取得分鐘數值 (0-59) getMonth() 取得月數值 (0-11) getSeconds() 取得秒數值 (0-59) getTime() 取得從1970/1/1起算的毫秒值Number類別
Number值
MAX_VALUE JavaScript所能表示的最大值 MIN_VALUE JavaScript所能表示的最小正整數值 NaN “Not-a-Number”,不是一個數值表示 NEGATIVE_INFINITY The negative Infinity value 負無限大值 POSITIVE_INFINITY 正無限大值 Positive Infinity valueNumber方法
toExponential() 將數字轉型為科學記號表示法 (字串型態)。var numObj = 77.1234; numObj.toExponential() // 7.71234e+1 numObj.toExponential(4) // 7.7123e+1 numObj.toExponential(2) // 7.71e+1 (77.1234).toExponential() // 7.71234e+1 (77).toExponential() // 7.7e+1toFixed() 用來將一個數字轉成固定小數位數的字串。
var numObj = 12345.6789; numObj.toFixed(); // '12346' numObj.toFixed(1); // '12345.7' 四捨五入 numObj.toFixed(6); // '12345.678900' 會補零 (1.23e+20).toFixed(2); // '123000000000000000000.00' (1.23e-10).toFixed(2); // '0.00' (2.34).toFixed(1); // '2.3' (2.35).toFixed(1); // '2.4' 四捨五入 (-2.34).toFixed(1); // '-2.3'toPrecision() 將數字格式化成指定長度的字串,如果數字長度大於指定的長度,會用科學表示法顯示。
var numObj = 18.456; numObj.toPrecision(1) // '2e+1' 科學表示法 numObj.toPrecision(2) // '18' numObj.toPrecision(4) // '18.46' numObj.toPrecision(6) // '18.4560' 補零toString() 將數值轉換為字串 valueOf() 將 Number 物件 (Number object) 型態轉型成基本數值型態 (primitive value)。
var numObj = new Number(10); console.log(typeof numObj); // object var num = numObj.valueOf(); console.log(num); // 10 console.log(typeof num); // number
Math類別
Math值
E 自然對數(natural logarithm) 的基底(base) 或稱歐拉常數(Euler's constant),約2.718。 LN2 2的自然對數 LN10 10的自然對數 LOG2E 以2為底的e 的對數 LOG10E 以10為底的e 的對數 PI 圓周率 πMath方法
abs(x) 傳回x的絕對值 acos(x) asin(x) atan(x) atan2(y,x) ceil(x) 天花板數,無條件進位,會返回大於等於傳入參數的最小整數值。Math.ceil(.95); // 1 Math.ceil(4); // 4 Math.ceil(7.004); // 8 Math.ceil(-0.95); // -0 Math.ceil(-4); // -4 Math.ceil(-7.004); // -7cos(x) exp(x) floor(x) 地板數,無條件捨去,會返回小於等於傳入參數的最大整數值。
Math.floor( 45.95); // 45 Math.floor( 45.05); // 45 Math.floor( 4 ); // 4 Math.floor(-45.05); // -46 Math.floor(-45.95); // -46log(x) max(x,y,z,...,n) 取最大數 min(x,y,z,...,n) 取最小值 pow(x,y) 乘冪x^y random() 隨機數,返回一個 0 (包含) ~ 1 (不包含) 的隨機數。 0<= r < 1。 round(x) 4捨5入 sin(x) The sine of x (x is in radians) sqrt(x) 平方根值 tan(x) The tangent of an angle