JavaScript 精選14堂課(四)

自訂函式

使用函式Function有下列優點:
1.可重複叫用,簡化程式流程。
2.程式除錯容易。
3.便於分工合作完成函式。

格式:
function 函式名稱 ()
{
程式敘述;
return 回傳值
}

函式宣告式(Function Declaration)

<script type="text/javascript">
	
	myfunc(10, 20);     //呼叫放在函式前
	function myfunc(a, b){
		console.log('a='+a+',b='+b);
	}
	myfunc(100,200);    //呼叫放在函式後
</script>

呼叫函式方法不管放在函式定義之前或之後都可以,很方便就能夠重複使用。


函式表達式Function Expressions

格式:
var 變數 = function [函式名稱](參數1,參數2,...,參數n){
程式敘述;
return 回傳值;
};
<script type="text/javascript">
	
	function checkflag(flag){
		if(flag) {
			var myfunc = function(a,b){
				return a + "+" + b +"=" + (a+b);
			};
		}else{
			var myfunc = function(a,b){
				return a + "*" + b + "=" + (a*b);
			};
		}
		console.log(myfunc(10,20));
	}

	checkflag(true);
	checkflag(false);
 </script>

以下函式為本身呼叫自己的模式稱為「遞迴呼叫」Recursive Calls。使用遞迴函式可以讓程式碼變得簡潔,正確使用有助於提升執行效率,但是使用時要特別注意遞迴的結束條件,否則會造成無窮迴圈。
<script type="text/javascript">
	
	var myfunc = function factorial(n){
		let x = (n ==1 ? n : n * factorial(n-1));
		console.log(n + ">" + x)
		return x;
	};

	console.log("5!=" + myfunc(5));
</script>

箭頭函式  Arrow function 一種函式精簡的寫法

格式:
(參數) => {
程式敘述;
return value;
}
var myFunc = function(a,b){
    return a+b;
}
console.log(myFunc(10,20));

改為用箭頭函式就直接以箭頭來代替function

var myFunc = (a,b) =>{
    return a+b;
}
console.log(myFunc(10,20));
物件、方法與屬性
我們想要製作一個名稱為cat的物件,並且給兩個屬性名稱:Name;Age,以及一個run方法。
建立完成之後,只要用new關鍵字就能產生物件實體。例如實作一隻名為kitty的5歲貓。
var kitty = new cat("kitty", 5);
kitty物件實作完成了,我們就可以使用點(.)來呼叫物件的屬性attribute與方 法method,由於方法是函式,所以要加括號來呼叫。
console.log(kitty.Name+"是一隻"+ kitty.Age+"歲的貓");
kitty.run();

kitty.htm 完整程式碼

<script type="text/javascript">
	
	var cat = function (catName, catAge){
		this.Name = catName;
		this.Age = catAge;
		this.run = function(){
			console.log(this.Name, "跑走了!");
		};
	};

	var kitty = new cat("kitty",5);

	console.log(kitty.Name+"是一隻"+ kitty.Age+"歲的貓");
	kitty.run();
 </script>
原型鏈prototype chain 與擴充 extneds
student 繼承 person 主要使用兩個方法,一個是call()方法,一個是Object.create()方法,我們來看看這兩個方法如何使用。
call()語法如下:
otherObj.call(thisObj[, arg1,arg2,...]);

JavaScript 精選14堂課(三)

JavaScript 的內建物件,可分為四大類:
1. 日期(Date)
2. 數學(Math)
3. 字串(String)
4. 陣列(Array)
Date 日期物件
<script type="text/javascript">
	var theDate = new Date();
	var nowDT = theDate.getFullYear() + "/" +
				(theDate.getMonth() +1 )+ "/" +
				theDate.getDate() +"/" +
				theDate.getHours() +":"+
				theDate.getMinutes() + ":" +
				theDate.getSeconds();
	console.log("現在日期時間:"+nowDT);
    </script>

結果:

Tips:
setMonth()與getMonth()的數值是從0開始,0代表一月,11代表十二月,所以使用這兩個方法時都必須再加1,才是正確的月份值。

字串物件(string)
屬性
字串物件可搭配的屬性有length,作用是取字串的長度。
var name = "good job!";
len = name.length; //len的值為9

   方法

方法說明格式
toString 
將數值或物件轉換為字串
number[object].toString()
charAt()傳回指定位置index的
字元index從0開始
String.charAt(index)
charCodeAt()傳回指定位置index的Unicode編
碼,數值為0到65535之間的整
數。index從0開始
String.charCodeAt(index)
includes()搜尋字串,傳回布林值true或
flase區分大小寫
String.includes(searchString)
indexOf()搜尋字串,回傳搜尋字串第一
次相符的位置索引值,1表示
找不到。
String.indexOf(searchString)
lastIndexOf()搜尋字串,回傳搜尋字串最後
相符的位置索引值,-1表示找
不到。
String.lastIndexOf(searchString)
match()以正則表示式regexp搜尋字
串(如果輸入非regexp會自動
轉換),回傳陣列,包含
groups、index、input,找
不到會傳回null。
String.match(regexp)
matchAll()以正則表示式regexp搜尋字
串,返回所有符合的結果,
返回值是正則表示式字串疊
代器RegExpStringIterator
String.matchAll(regexp)
concat()合併字串String.concat(string1,string2)
Math 數學運算物件
Math是JavaScript內建物件,提供了數學運算常用的常數以及三角函數、對數函數和數學函數。
屬性說明
Math.Ee數學常數,自然對數函數的底數或稱為歐拉數,約為2.718
Math.LM2loge2,2的自然對數,約為0.693
Math.PI圓周率,約為3.1416

範例

let r=10;
let circleArea = r * r * Math.PI;
console.log(`半徑${r}公分的圓形面積為${circleArea}`);
陣列

宣告陣列物件

方法一:
var arrayName = new Array();
arrayName[0] = "元素一";
arrayName[1] = "元素二";

方法二:
var arrayName = new Array("元素一","元素二");

方法三:
var arrayName = ["元素一","元素二"];

陣列屬性property

array.property

取的陣列的個數
myArray.length

陣列方法method()

方法說明
sort()排列陣列元素
reverse()反轉陣列元素排列

sort()方法是將陣列排列,而reserse()方法則是將陣列反方向排列。

pop()取出陣列尾端元素
push()新增元素到陣列尾端
shit()取出陣列第一個元素
unshift()新增元素到陣列開端