圖說演算法使用JavaScript(十六)

7-4插入排序法

插入排序法insert sort則是將陣列中的元素,逐一與已排序好的資料作比較,如前兩個元素先排好,再將第三個元素插入適當的位置,所以這三個元素仍然是已排序好,接著再將第四個元素加入,重複此步驟,直到排序完成為止。各位可以看做是在一串有序的紀錄R1、R2..Ri,插入新的紀錄R,使得i+1個紀錄排序妥當。

以下利用55、23、87、62、16數列的由小到大排序過程,來說明插入排序法的演算流程。下圖中,在步驟二,以23為基準與其他元素比較後,放到適當位置(55的前面),步驟三則拿87與其他兩個元素比較後,接著62在比較完前三個數後插入87的前面…,將最後一個元素比較完後即完成排序:

JS          insert.js

let SIZE=8;
	//定義陣列大小
var showdata=(data)=> {
	for (k=0; k<8; k++) {
		process.stdout.write(data[k]+' ');
	}
}

var insert=(data)=> {
	for (i=0; i<SIZE; i++) {
		tmp=data[i];
		//tmp用來暫存資料
		no=i-1;
		while (no>=0 && tmp<data[no]) {
			data[no+1]=data[no];
			//就把所有元素往後推一個位置
			no-=1;
		}
		data[no+1]=tmp;
		//最小的元素放到第一個元素
	}
}
data=[16,25,39,27,12,8,45,63];
console.log('原始陣列是:');
showdata(data);
insert(data);
console.log();
console.log('排序後陣列是:');
showdata(data);

PHP          insert.php

$data=array(16,25,39,27,12,8,45,63);
$count=count($data);

echo "原始陣列:<br>";
showdata($data);

$new_data=insert($data);

echo "<br>排列後的陣列:<br>";
showdata($new_data);

function insert($arr) {
	$count=count($arr);
	//計算陣列大小
	for ($i=0; $i<$count; $i++) {
		$tmp=$arr[$i];
		//用tmp來暫存資料
		$no=$i-1;
		while ($no>=0 && $tmp<$data[$no]){
			$data[$no+1]=$data[$no];
			//就把所有元素往後推一個位置
			$no--;
		}
		$data[$no+1]=$tmp;
		//最小的元素放到第一個元素  
	}
	return $data;
}


function showdata($arr){
	foreach($arr as $key=>$value){
		echo $value."、";
	}
	echo "<br>";
}

7-5謝耳排序法

我們知道如果原始紀錄的鍵值大部分以排序好的情形下,插入排序法或非常有效率,因為它無須做太多的資料搬移動作。[謝耳排序法]是D.L.Shell在1959年7月所發明的一種排序法,可以減少插入排序法中資料搬移的次數,以加速排序進行。排序的原理是將資料分成特定間隔的幾個小區塊,以插入排序法排完區塊內的資料後再漸漸減少間隔的距離。

以下利用63、92、27、36、45、71、58、7數列的由小到大排序過程,來說明謝耳排序法的演算過程。

範例:shell.js>請設計一程式,並使用謝耳排序法來將以下的數列排序:
16,25,39,27,12,8,45,63

JS           shell.js

let SIZE=8;

var showdata=(data)=> {
	for (i=0; i<SIZE; i++) {
		process.stdout.write(data[i]+ ' ');
	}
	console.log();
}

var shell=(data, size)=> {
	k=1;
	//k列印計數
	jmp=parseInt(size/2);
	while (jmp !=0) {
		for (i=jmp; i<size-1; i++) {
			//i為掃描次數 jmp為設定間距位移量
			tmp=data[i];
			//tmp用來暫存資料
			j=i-jmp;
			//以j來定位比較的元素
			while (tmp<data[j] && j>=0) {
				//插入排序法
				data[j+jmp] = data[j];
				j=j-jmp;
			}
			data[jmp+j]=tmp;
		}
		process.stdout.write('第 '+k+' 次排序過程:');
		k=k+1;
		showdata(data);
		console.log('------------------------------------');
		jmp=parseInt(jmp/2);
		//控制迴圈數
	}
}

data=[16,25,39,27,12,8,45,63];
process.stdout.write('原始陣列是:     ');
showdata(data);
console.log('-------------------------------------');
shell(data, SIZE);

圖說演算法使用JavaScript(十五)

7-2氣泡排序法

氣泡排序法又稱為交換排序法,是由觀察水中氣泡變化構思而成,原理是由第一個元素開始,比較相鄰元素大小,如果大小順序有誤,則對調後在進行下一個元素的比較,就彷彿氣泡逐漸由水底逐漸升到水面上一樣。如此掃描過一次之後就可確保最後一個元素是位於正確的順序。接著再逐步進行第二次掃描,直到完成所有元素的排序關係為止。

以下排序我們利用55、23、87、62、16的排序過程,您可以清楚知道氣泡排序法的演算流程:

由此可知5個元素的氣泡排序法必須執行5-1次掃描,第一次掃描需比較5-1次,共比較4+3+2+1=10次。

JS               bubble.js

var data=[16, 25, 39, 27, 8 ,45, 63];   
//原始資料
console.log('氣泡排序法:原始資料為:');
for (i=0; i<8; i++) 
	process.stdout.write(data[i]+' ');

console.log();

for (i=7; i>0; i--) {    //掃描次數
	for (j=0; j<i; j++) {
		if(data[j]>data[j+1])  {     
		//比較,交換的次數
			temp=data[j];
			data[j]=data[j+1];      
			//比較相鄰兩數,如果第一數較大則交換
			data[j+1]=temp;
		}
	}
	process.stdout.write('第 ' +(8-i)+ ' 次排序後的結果是:')    
	//把各次結果掃描出來
	for (j=0; j<8; j++) process.stdout.write(data[j]+' ');
		console.log();
}
console.log('排序後結果為:');
for (j=0; j<8; j++) process.stdout.write(data[j]+ ' ');
console.log(); 

PHP          buble.php

$data = array("16","25","39","27","8","45","63");
//原始資料
echo "原本陣列是:";
arr_print($data);
echo "<br><br>";

$count=count($data);
for ($i=$count-1; $i>0; $i--){
	//掃描次數
	for ($j=0; $j<$i; $j++){
		//比較,交換的次數
		if ($data[$j]>$data[$j+1]){
			$temp=$data[$j];
			$data[$j]=$data[$j+1];
			//比較相鄰兩數,如果第一數較大則交換
			$data[$j+1]=$temp;
		}

	}
	$time=7-$i;
	echo "第{$time}次";
	arr_print($data);
	echo "<br>";
}
echo "<br><br>";
echo "排完陣列是:";
arr_print($data);

function arr_print($arr){
	foreach ($arr as $key => $value) {
		echo $value." ";
	  	echo "--";
	}
}

7-3選擇排序法

選擇排序法Selection Sort也算是枚舉法的應用,概念就是反覆從未排序的數列中取出最小的元素,加入到另一個數列,結果即為已排序的數列。選擇排序法可使用兩種方式排序,一圍在所有的資料中,當由大至小排序時,則將最大值放入第一位置;若由小至大排序時,則將最大值放入為至末端。例如一開始在所有的資料中挑選一個最小項放在第一個位置(假設是由小到大),再從第二筆開始挑選一個最小項放在第2個位置,依樣重複,直到完成排序為止。

以下利用55、23、87、62、16數列的由小到大排序過程,來說明選擇排序法的演算過程:

JS          select.js

var showdata=(data)=>   {
	for (k=0; k<8; k++){
		process.stdout.write(data[k]+' ');
	}
}

var select=(data)=> {
	for(i=0; i<7; i++) {
		smallest=data[i];
		index=i;
		for (j=i+1; j<8; j++) {
			//由i+1比較起
			if (smallest>data[j]) {
			//找出最小元素
			smallest=data[j];
			index=j;	
			}	
		}
	tmp=data[i];
	data[i]=data[index];
	data[index]=tmp;
	console.log();
	process.stdout.write('第'+(i+1)+"次排序結果: ");
	showdata(data);
	}
}

data=[63,25,39,27,12,8,45,16];
process.stdout.write('原始資料為:');
for (i=0; i<8; i++) process.stdout.write(data[i]+' ');
	console.log();
	console.log("----------------------------");
	select(data);
	console.log();
	console.log("----------------------------");
	process.stdout.write("排序後資料");
for (i=0; i<8; i++) process.stdout.write(data[i]+'  ');
	console.log();
	console.log("----------------------------"); 

PHP          select.php

$data = array("16","25","39","27","8","45","63");
//原始資料
echo "原本陣列是:";
arr_print($data);
echo "<br><br>";

$count=count($data);

for ($i=0; $i<$count-1; $i++) {
	$smallest=$data[$i];
	$index=$i;
		for ($j=$i+1; $j<$count; $j++) {
					//由i+1比較起
			if($smallest>$data[$j]){
					//找出最小元素
				$smallest=$data[$j];
				$index=$j;
			}
		}
	$tmp=$data[$i];
	$data[$i]=$data[$index];
	//兩個交換
	$data[$index]=$tmp;
	//把$tmp換回來
	$num=$i+1;
	echo "第{$num}次排序結果:";
	arr_print($data);
	echo "<br>";
	
}

echo "<br><br>";
echo "排完陣列是:";
arr_print($data);

function arr_print($arr){
	foreach ($arr as $key => $value) {
		echo $value." ";
	  	echo "--";
	}
}

圖說演算法使用JavaScript(十四)

6-6鏈結串列實作佇列

佇列除了能以陣列的方式來實作外,我們也可以鏈結串列來實作佇列。在宣告佇列類別中,除了和佇列類別中相關的方法外,還必須有指向佇列前端及佇列尾端的指標,即front及rear。例如我們以學生姓名及成績的結構資料來建立佇列串列的節點,及front與rear指標宣告如下:

class student  {
constructor() {
this.name='';
this.score=0;
this.next=null;
}
}
front=new student();
rear=new student();
front=null;
rear=null;

至於在佇列串列中加入新節點,等於加入此串列的最後端,而刪除節點就是將此串列最前端的節點刪除。加入與刪除運算法如下:

var enqueue=(name, score)=> {  //置入佇列資料
new_data= new student(); //配置記憶體給新元素
new_data.name=name; //設定新元素的資料
new_data.score = score;
if (rear==null) //如果rear為null,表示這是第一個元素
front = new_data;
else
rear.next = new_data; //將新元素連接至佇列尾端
rear = new_data; //將rear指向新元素,這是新的佇列尾端
new_data.next = null; //新元素之後無其他元素
}
var dequeue=()=>{              // 取出佇列資料
if (front == null)
process.stdout.write('佇列已空!\n');
else {
process.stdout.write('姓名:'+front.name+'\t成績:'+front.score+'...取出'); //將佇列前端一致下一個元素
}
}

JS          list_queue.js

class student {
	constructor () {
		this.name='';
		this.score=0;
		this.next=null;
	}
}
front=new student();
rear=new student();
front=null;
rear=null;

var enqueue=(name, score)=> {  //置入佇列資料
	new_date=new student();    //配置記憶體給新元素
	new_date.name=name;
	new_date.score=score;
	if (rear==null)            //如果rear為null,表示這是第一個元素
		front=new_date;
	else
		rear.next=new_date;    //將新元素連接至佇列尾端
	rear=new_date;             //將rear指向新元素,這是新的佇列尾端
	new_date.next = null;      //新元素之後無其他元素
}

var dequeue=()=>{    //取出佇列資料
	if(front == null)
		process.stdout.write('佇列已空!\n');
	else {
		process.stdout.write('姓名:'+front.name+'\t成績:'+front.score+'....取出\n');
		front = front.next;    //將佇列前端移至下一個元素
	}

}

var show=()=> {    //顯示佇列資料
	ptr = front;
	if (ptr == null)
		process.stdout.write('佇列已空!\n');
	else {
		while (ptr !=null)  {  //由front往rear走訪佇列
			process.stdout.write('姓名:'+ptr.name+'\t成績:'+ptr.score+'\n');
			ptr = ptr.next;
		}

	}
}

select=0;
const prompt = require('prompt-sync')();
while (true) {
	const select = parseInt(prompt('(1)存入 (2)取出 (3)顯示 (4)離開=> '));
	if (select==4)
		break;
	if (select==1) {
		const name = prompt('姓名: ');
		const score = parseInt(prompt('成績: '));
		enqueue(name, score);
	}
	else if (select==2)
		dequeue();
	else
		show();
}

6-7有趣的雙向佇列

所謂雙向佇列Double Ended Queue, Deque 為一有序串列,加入與刪除可在佇列的任一端進行,請看下圖:

具體來說,雙向佇列就是允許兩端中任意一端都具備有刪除或加入功能,而且無論與尾端指標都是朝佇列中央來移動。通常在一般的應用上,雙向佇列可以區分為兩種:第一種是資料只能從一端加入,但是可從兩端取出。另一種則是可由兩端加入,但由一端取出。以下我們將討論第一種輸入限制的雙向佇列的節點宣告、加入與刪除運算法如下:

class Node   {
      constructor() {
this.data=0;
this.next=null;
}
}
front=new Node();
rear=new Node();
front=null;
rear=null;
//方法enqueue:佇列資料的存入
var enqueue=(value)=> {
node = new Node();
node.data=value;
node.next=null; //檢查是否為空佇列
if (rear==null)
fornt=node; //新建立的節點成為第一個節點
else
rear.next=node; //將節點加入到佇列的尾端
rear=node;
}
//方法dequeue:佇列資料的取出
var dequeue=(action)=> {
//從前端取出資料
if (!(front==null) && action==1) {
if (front==rear) rear=null;
value=front.data;
front=front.next;
return value;
}
//從尾端取出資料
else if (!(rear==null) && action=2) {
startNode=front; //先記下前端的指標值
value=rear.data; //取出目前尾端的資料
//尋找最尾端節點的前一個節點
tempNode=front;
while (front.next!=rear && front.next!=null){
front=front.next;
tempNode=front;
}
front=startNode; //記錄從尾端取出資料後的佇列前端指標
rear=tempNode; //紀錄從尾端取出資料後的佇列尾端指標
//下一列程式是指當佇列中僅剩下最後節點時
//取出資料後便將 front 及 rear 指向 null
if (front.next==null || rear.next==null) {
front=null;
rear==null;
}
return value;
}
else return -1;
}

JS         dequeue.js 

class student {
	constructor () {
		this.name='';
		this.score=0;
		this.next=null;
	}
}
front=new student();
rear=new student();
front=null;
rear=null;

var enqueue=(name, score)=> {  //置入佇列資料
	new_date=new student();    //配置記憶體給新元素
	new_date.name=name;
	new_date.score=score;
	if (rear==null)            //如果rear為null,表示這是第一個元素
		front=new_date;
	else
		rear.next=new_date;    //將新元素連接至佇列尾端
	rear=new_date;             //將rear指向新元素,這是新的佇列尾端
	new_date.next = null;      //新元素之後無其他元素
}

var dequeue=()=>{    //取出佇列資料
	if(front == null)
		process.stdout.write('佇列已空!\n');
	else {
		process.stdout.write('姓名:'+front.name+'\t成績:'+front.score+'....取出\n');
		front = front.next;    //將佇列前端移至下一個元素
	}

}

var show=()=> {    //顯示佇列資料
	ptr = front;
	if (ptr == null)
		process.stdout.write('佇列已空!\n');
	else {
		while (ptr !=null)  {  //由front往rear走訪佇列
			process.stdout.write('姓名:'+ptr.name+'\t成績:'+ptr.score+'\n');
			ptr = ptr.next;
		}

	}
}

select=0;
const prompt = require('prompt-sync')();
while (true) {
	const select = parseInt(prompt('(1)存入 (2)取出 (3)顯示 (4)離開=> '));
	if (select==4)
		break;
	if (select==1) {
		const name = prompt('姓名: ');
		const score = parseInt(prompt('成績: '));
		enqueue(name, score);
	}
	else if (select==2)
		dequeue();
	else
		show();
}

圖說演算法使用JavaScript(十三)

6-4八皇后演算法

         八皇后問題也是一種常見的堆疊應用實例。在西洋棋中的皇后可以在沒有限定一步走幾格的前提下,對其盤中的其他棋子直吃、橫吃及對角斜吃(左斜吃或右斜吃皆可),只要後放入的新皇后,再放入前必須考慮所放置直線方向、橫線方向或對角線方向是否已被放置就皇后,否則就會被先放入的舊皇后吃掉。
        利用這個觀念,我們可以將其應用在4*4的棋盤,就稱為4-皇后問題;應用在8*8的棋盤,就稱為8-皇后問題。應用在N*N的棋盤,就稱為N-皇后問題。要解決N-皇后問題(在此我們以8-皇后為例),首先當於棋盤中置入一新皇后,且這個位置不被先前放置的皇后吃掉,則將此新皇后的位置存入堆疊。
        但若欲放置新皇后的該行(或該列)的8個位置,都沒有辦法放置新皇后(亦即一放入任何一個位置,就會被先前放置的舊皇后給吃掉)。此時,就必須由堆疊中取出前一個皇后的位置,並於該行(或該列)中重新尋找另一個新的位置放置,在將該位置存入堆疊中,而這種方式就是一種回溯Backtracking)演算法的應用概念。
          N-皇后問題的解答,就是配合堆疊及回溯兩種演算概念,以逐行(或逐列)找新皇后位置(如果找不到,則回溯到前一行找尋前一個皇后另一個新位置,以此類推)的方式,來尋找N-皇后問題的其中一組解答。

JS                queen.js

程式碼:如下

const EIGHT=8;  //定義最大堆疊容量
queen = [];  //存放8個皇后之列位
number=0;   //計算總共幾組解的總數
//決定皇后存放的位置
//輸出所需要的結果

var print_table=()=> {
	let x=y=0;
	number+=1;
	process.stdout.write('\n');
	process.stdout.write('八皇后問題的第'+number+'組解\n\t');
	for (x=0; x<EIGHT ; x++) {
		for (y=0; y<EIGHT ; y++){
			if (x==queen[y])
				process.stdout.write('<q>');
			else 
				process.stdout.write('<->');
		}
		process.stdout.write('\n\t');
	}
}

//測試在(row,col)上的皇后是否遭受攻擊
//若遭受攻擊則傳回值為1,否則傳回0
var attack=(row, col)=>{
	let i=0;
	atk=false;
	offset_row=offset_col=0;
	while ((atk!=1) && i<col) {
		offset_col=Math.abs(i-col);
		offset_row=Math.abs(queen[i]-row);
		//判斷兩皇后是否在同一對角線上
		if ((queen[i]==row || offset_row==offset_col)) 
			atk=true;
		i=i+1;
	}
	return atk;
}

var decide_position=(value)=>{
	let i=0;
	while (i<8) {
		//是否受到攻擊攻擊判斷式
		if (attack(i,value)!=1) {
			queen[value]=i;
			if (value==7)
				print_table();
			else
				decide_position(value+1);
		}
		i++;
	}
}

//主程式
decide_position(0);

6-5 陣列實作佇列

         以陣列結構來製作佇列的好處是演算法相當簡單,不過與堆疊不同之處是需要擁有兩種基本動作加入與刪除,而且使用frint與rear兩個註標來分別指向佇列的前端與尾端,缺點是陣列大小並無法事先規劃宣告。首先我們需要宣告一個有限容量的陣列,並以下列說明:

const MAXSIZE=4;
queue=[];       //佇列大小為4
front=-1;
rear=-1;

JS          array_queue.js

const MAX=10;      //定義佇列的大小
queue=[];
var front=rear=-1;
var choice='';
const prompt = require ('prompt-sync')();
while (rear<MAX-1 && choice !='e') {
	const choice = prompt('[a]表示存入一個數值[d]表示取出一個數值[e]表示跳出此程式: ');
	if (choice=='a') {
		const val = parseInt(prompt('[請輸入數值]: '));
		rear+=1;
		queue[rear]=val;
	}
	else if (choice=='d') {
		if (rear>front) {
			front+=1;
			process.stdout.write('[取出數值為]: ' +queue[front]+'\n');
			queue[front]=0;
		}
		else{
			process.stdout.write('[佇列已經空了]\n');
			return;
		}
	}
	else {
		process.stdout.write('\n');
		break;
	}
}
process.stdout.write('---------------------------\n');
process.stdout.write('[輸出佇列中所有元素]: \n');

if (rear==MAX-1)
	process.stdout.write('[佇列已滿]\n');
else if (front>=rear)  {
	process.stdout.write('沒有\n');
	process.stdout.write('[佇列已空]\n');
}
else  {
	while (rear>front) {
		front+=1;
		process.stdout.write('['+queue[front]+'] ');
	}
	process.stdout.write('\n');
	process.stdout.write('---------------------------------------------\n');
}
process.stdout.write('\n');

PHP          array_queue.php 

$choice="n";
$queue=$_SESSION['queue'];
$length = length($queue);

if($_GET['choice'])
$choice=$_GET['choice'];

echo "<center>[<a href=".$_SERVER['PHP_SELF']."?choice=a>A</a>]表示存入一數值|
							[<a href=".$_SERVER['PHP_SELF']."?choice=d>D</a>]表示取出一數值|
							[<a href=".$_SERVER['PHP_SELF']."?choice=e>E</a>]表示跳出此程式|
							[<a href=".$_SERVER['PHP_SELF']."?choice=n>N</a>]清空佇列
			</center>";


if($choice)
	switch ($choice){

		case 'a':
		echo "
		<center>
		 <form method='post' action={$_SERVER['[PHP_SELF]']}>
		 請輸入數值:
		 <input name='add_queue' type='text'>
		 <input type='submit' name='submit' value='送出''>
     </form>
    </center>
		";
		break;

		case 'd':
		$queue=$_SESSION['queue'];      //取出
		$del=$queue[0];
		array_shift($queue);
		echo "<center> 刪除 {$del} </center>";
		$_SESSION['queue']=$queue;	      //存入
		break;

		case 'e':
		//$length = length($queue);
    echo "
    <center>目前佇列數目:{$length}</center>
		";
		break;

		case 'n':
		unset($_SESSION['queue']);
		session_destroy();
		break;

	}


if ($_POST['submit']=='送出'){
	//echo $_POST['add_queue'];
	$queue=array();      //先宣告陣列
	//print_r($queue)."<br>";
	//print_r($_SESSION['queue'])."<br>";
	
	$queue = $_SESSION['queue'];       //取出
	//array_push ($queue, $_POST['add_queue']);  //不知為什麼會出現錯誤,但是queue有值後就不會出現
	$queue[]=$_POST['add_queue'];     //加入陣列
	$_SESSION['queue']=$queue;      //存入
}


echo "<center>目前陣列"."<br>";
//print_r($queue);
//echo "here";
foreach ($_SESSION['queue'] as $value){
		echo $value."  ";
	}

function length ($arr){
	return count($arr);
}	
$queue=array();
$queue = $_SESSION['queue']; //取出
$queue[]=$_POST['add_queue']; //加入陣列

可以改寫為
$_SESSION['queue'][]=$_POST['add_queue'];

圖說演算法使用JavaScript(十二)

6-3古老的河內塔演算法

法國數學家Lucas在1883年介紹了一個十分經典的河內塔Tower of Hanoli智力遊戲,是典型使用遞迴式與堆疊觀念來解決問題的範例,內容是說在古印度神廟,廟中有三根木樁,天神希望和尚們把某些數量大小不同的圓盤,由第一個木樁全部移動到第三個木樁。

更精確來說,河內塔問題可以這樣形容:假設有A、B、C三個木樁和n個大小均不同的套環Disc,由小到大編號為1,2,3,…n,編號越大直徑越大。開始的時候,n個套環套進A木樁上,現在希望找到將A木樁上的套環藉著B木樁當中間橋樑,全部移到C木樁上最少次數的方法。不過在搬動時還必須遵守下列規則:

1.直徑較小的套環永遠置於直徑較大的套環上。
2.套還可任意弟由一個木樁移到其他的木樁上。
3.每一次僅能移動一個套環,而且只能從最上面的套環開始移動。

現在我們考慮n=1~3的狀況,以圖示方式為大家示範處理河內塔問題的步驟:

結論:移動了2@2-1=3次,盤子移動的次序為1,2,1(此處為盤子次序)
步驟:1->2,1->3,2->3(此處為木樁次序)

結論:移動了2@3-1=7次,盤子移動的次序為1,2,1,3,1,2,1(盤子次序)。
步驟為1->3,1->2,3->2,1->3,2->1,2->3,1->3(木樁次序)

當有4個盤子時,我們實際操作後(在此不作圖說明),盤子移動的次序為121312141214121,而移動木樁的順序為1->2,1->3,2->3,1->2,3->1,3->2,1->2,1->3,2->3,2->1,3->1,2->3,1->2,1->3,2->3,而移動次數為2@4-1=15。
當n不大時,各位可以逐步用圖示解決,但n的值較大時,那就十分傷腦筋了。

事實上,我們可以得到一個結論,例如當有n個盤子時,可將河內塔問題歸納成三個步驟:歸納成三個步驟:

1.將n-1個盤子,從木樁移動到木樁2。
2.將第n個最大盤子,從木樁1移動到木樁3。
3.將n-1個盤子,從木樁2移動到木樁3。

由上圖中,應該發現河內塔問題是非常適合以遞迴式與堆疊來解決。因為它滿足了遞迴的兩大特性1.有反覆執行的過程、2.有停止的出口。以下則以遞迴式來表示河內塔遞迴函數的演算法。

var hanoi=(n, p1, p2, p3)=>{
         if (n==1) //遞迴出口
                         process.stdout.write(‘套環從 ‘+p1+ ‘移到 ‘+p3+’\n’);
         else {
                         hanoi(n-1, p1, p3, p2);
                         process.stdout.write(‘套環從 ‘+p1+’ 移到 ‘+p3+’\n’);
                         hanoi(n-1, p2, p1, p3);
             }
}

JS          haoni.js

var hanoi=(n, p1, p2, p3)=> {
	if (n==1) //遞迴出口
		process.stdout.write('套環從'+p1+'移到 '+p3+'\n');
	else {
		hanoi(n-1, p1, p3, p2);
		process.stdout.write('套環從 '+p1+'移到' +p3+'\n');
		hanoi(n-1, p2, p1, p3);
	}
}
const prompt = require('prompt-sync')();
const j= parseInt(prompt('請輸入所移動套環數量:'));
hanoi(j,1,2,3);

PHP          haoni.php

$n=3;
echo "您所輸入的N是{$n}<br>";
haoni($n,1,2,3);

function haoni ($j, $p1, $p2, $p3){

	switch ($j){
		case 1;
		  	echo "套環從{$p1}移到{$p3}<br>";
		    break;
		default:
			haoni($j-1,$p1, $p3, $p2);
		  	echo "套環從{$p1}移到{$p3}<br>";
		  haoni($j-1,$p2, $p1, $p3);
	}

}

圖說演算法使用JavaScript(十一)

        堆疊結構在電腦中的應用相當廣泛,時常被用來解決電腦的問題,例如前面所談到的遞迴呼叫、副程式的呼叫,至於在日常生活中的應用也隨處可以看到,例如大樓電梯、貨架上的貨品等等,都是類似堆疊的資料結構原理。
        佇列在電腦領域的應用也相當廣泛,例如計算機的模擬simulation、CPU的工作排程Job Scheduling、線上同時周邊作業系統的應用與圖形走訪得先廣後深搜尋法BFS。由於堆疊與佇列都是抽象資料型態Abstract Data Type,ADT,本章終將為各位介紹相關演算法。
         堆疊在程式設計領域中,包含以下兩種設計方式,分別為陣列結構與鏈結串列結構。

6-1陣列實作堆疊輕鬆學

         以陣列結構來製作堆疊的好處是製作與設計的演算法都相當簡單,但因為如果堆疊本身是變動的話,大小並無法事先規劃宣告,太大時浪費空間,太小則不夠使用。

相關演算法如下
//判斷是否空堆疊
var isEmpy=()=>{
if (top==-1)
return true;
else
return false;
}
//將指定的資料存入堆疊
var push=(data)=>{
if (top>=MAXSTACK-1)
process.stdout.write('堆疊已滿,無法再加入');
else {
top +=1;
stack[top]=data; //將資料存入堆疊
}
}
//從堆疊取出資料
var pop=()=>{
if (isEmpty())
process.stdout.write('堆疊是空');
else {
process.stdout.write('彈出的元素為: '+stack[top]+'\n');
top=top-1;
}
}

JS            array_stack.js

const MAXSTACK=100; //定義最大堆疊容量
stack=[]; //堆疊的陣列宣告
top=-1; //堆疊的頂端

//判斷是是否為空堆疊
var isEmpty=()=>{
	if(top==-1)
		return true;
	else
		return false;
}

//將指定的資料存入堆疊
var push=(data)=> {
	if (top>=MAXSTACK-1)
		process.stdout.write('堆疊已滿,無法再加入');
	else {
		top +=1;
		stack[top]=data;//將資料存入堆疊
	}
}

//從堆疊取出資料
var pop=()=> {
	if (isEmpty())
		process.stdout.write('堆疊是空');
	else {
		process.stdout.write('彈出的元素為:'+stack[top]+'\n');
		top=top-1;
	}
}

//主程式
i=2;
count=0;
const prompt = require('prompt-sync')();
while(true) {
	const i = parseInt(prompt('要推入堆疊,請輸入1,彈出則輸入0,停止操作則輸入-1:'));
	if (i==-1)
		break;
	else if (i==1) {
		const value = parseInt(prompt('請輸入元素值:'));
		push(value);
	}
	else if (i==0)
		pop();
}

process.stdout.write('========================\n');

if (top<0)
	process.stdout.write('\n 堆疊是空的\n');
else {
	i=top;
	while (i>=0) {
		process.stdout.write('堆疊彈出的順序為:'+stack[i]+'\n');
		count +=1;
		i =i-1;
	}
}
process.stdout.write('=====================================\n');

PHP          array_stack.php

6-2鏈結串列實作堆疊

        使用鏈結串列來製作堆疊的優點是隨時可以動態改變串列長度,能有效利用記憶體資源,不過缺點是設計時,演算法較為複雜。

相關演算法如下:

class Node {    //堆疊鏈結點的宣告
constructor() {
this.data=0; //堆疊資料的宣告
this.next=null; //堆疊中用來指向下一個節點
}
}
top=null;
var isEmpty=()=> {
if(top===null)
return true;
else
return false;
}
//將指定的資料存入堆疊
var push=(data)=> {
new_add_node=new Node();
new_add_node.data=data; //將傳入的值指定為節點的內容
new_add_node.next=top; //將新節點指向堆疊的頂端
top=new_add_node; //新節點成為堆疊的頂端
}
//從堆疊取出資料
var pop=()=> {
if (isEmpty()) {
process.studout.write('===目前為空堆疊====\n');
return -1;
}
else {
ptr=top; //指向堆疊的頂端
top=top.next; //將堆疊頂端的指標指向下一個節點
temp=ptr.data; //取出堆疊的資料
return temp; //將從堆疊取出的資料回傳給主程式
}
}
class Node {    //堆疊鏈結節點的宣告
constructor() {
this.data=0; //堆疊資料的宣告
this.next=null; //堆疊中用來指向下一個節點
}
}
top=null;
var isEmpty=()=> {
if(top==null)
return true;
else
return false;
}
//將指定的資料存入堆疊
var push=(data)=> {
new_add_node=new Node();
new_add_node.data=data; //將傳入的值指定為節點的內容
new_add_node.next=top; //將新節點指向性堆疊的頂端
top=new_add_node; //新節點成為堆疊的頂端
}
//從堆疊取出資料
var pop=()=> {
if (isEmpty()) {
process.stdout.write('===目前為空堆疊===\n');
return -1;
}
else {
ptr=top; //指向堆疊的頂端
top=top.next; //將堆疊頂端的指標指向下一個節點
temp=ptr.data; //取出堆疊資料
return temp; //將從堆疊取出的資料回傳給主程式
}
}
// 主程式
const prompt = require('prompt-sync') ();
while (true) {
const i = parseInt(prompt('要推入堆疊,請輸入1,彈出則輸入0,停止操作則輸入-1: '));
if (i==-1)
break;
else if (i==1) {
const value = parseInt(prompt('請輸入元素值:'));
push(value);
}
else if (i==0)
process.stdout.write('彈出的元素為'+pop()+'\n');
}
process.stdout.write('===========================\n');
while (!isEmpty()) //將資料陸續從頂端彈出
process.stdout.write('堆疊彈出的順序為:'+pop()+'\n');
process.stdout.write('===========================\n');

 JS           list_strack.js

圖說演算法使用JavaScript(十)

5-3-3單向鏈結串列刪除節點

在單向鏈結型態的資料結構中,如果要在串列中刪除一個節點,如同一列火車拿掉原有的車廂,依據所刪除節點的位置有三種不同的情形:

演算法如下

top=head;
head=head.next;

演算法如下

ptr.next=tail;
ptr.next=null;

演算法如下

Y=ptr.next;
ptr.next=Y.next;

class employee{
        constructor() {
               this.num=0;
               this.salary=0;
               this.name=”;
               this.next=null;
        }
}

JS          del_node.js

class employee{
	constructor(){
		this.num=0;
		this.salary=0;
		this.name='';
		this.next=null;
	}
}

var del_ptr=(head,ptr)=>{   //刪除節點副程式
	top=head;
	if (ptr.num==head.num) {  //[情形1]:刪除點在串列首
		head=head.next;
		process.stdout.write('已刪除第' +ptr.num+' 號員工 姓名:'+ptr.
			name+' 薪資:'+ptr.salary);
	}
	else {
		while (top.next!=ptr)  //找到刪除點的前一個位置
			top=top.next;
		if(ptr.next==null) {   //刪除在串列尾的節點
			top.next=null;
			process.stdout.write('已刪除第'+ptr.num+' 號員工 姓名:'+ptr.
				name+' 薪資:'+ptr.salary+'\n');
		}
		else{
			top.next=ptr.next;
			process.stdout.write('已刪除第 '+ptr.num+' 號員工 姓名:'+ptr.
				name+' 薪資:' +ptr.salary+'\n');
		}		
	}
	return head;
}

findword=0;
namedata=['Allen','Scott','Mary','John','Mark','Ricky',
		  'Lisa','Jasica','Hanson','Daniel','Axel','Jack'];
data=[[1001,32367],[1002,24388],[1003,27556],[1007,31299],
		[1012,42660],[1014,25676],[1018,44145],[1043,52182],
		[1031,32769],[1037,21100],[1041,32196],[1046,25776]];
process.stdout.write('員工編號 薪水 員工編號 薪水 員工編號 薪水 員工編號 薪水\n');
process.stdout.write('--------------------------------------------------\n');

for(i=0; i<3; i++) {
	for (j=0; j<4; j++)
		process.stdout.write(data[j*3+i][0]+ '\t'+data[j*3+i][1]+'\t');
	console.log();
}

head=new employee(); //建立串列首
if(!head) {
	console.log('Error!! 記憶體配置失敗!!');
	return;
}
head.num=data[0][0];
head.name=namedata[0];
head.salary=data[0][1];
head.next=null;

ptr=head;
for (i=1; i<12; i++) { //建立串列
	newnode=new employee();
	newnode.next=null;
	newnode.num=data[i][0];
	newnode.name=namedata[i];
	newnode.salary=data[i][1];
	newnode.next=null;
	ptr.next=newnode;
	ptr=ptr.next;
}
const prompt = require('prompt-sync')();
while(true)  {
	const findword = parseInt(prompt('請輸入要刪除的員工編號,要結束刪除過程,請輸入-1:'));
	if (findword==-1)  //迴圈中斷條件
		break;
	else {
		ptr=head;
		find=0;
		while (ptr!=null) {
			if (ptr.num==findword){
				ptr=del_ptr(head,ptr);
				find=find+1;
				head=ptr;
			}
			ptr=ptr.next;
		}
		if (find==0)
			process.stdout.write('//////////沒有找到///////////\n');
	}
}
ptr=head;
process.stdout.write('\t座號\t  姓名\t成績\n');  //列印剩餘串列資料
process.stdout.write('\t======================\n');  
while (ptr!=null)  {
	process.stdout.write('\t['+ptr.num+' ]\t[ '+ptr.name+' ]\t[ '
		+ptr.salary+']\n');
	ptr=ptr.next;
}

5-3-4單向鏈結串列的反轉

看完了節點的刪除及插入後,各位可以發現在這種具有方向性的鏈結串列結構中增刪節點是相當容易的一件事。而要從頭到尾印整個串列似乎也不難,不過如果要反轉過來列印就真的需要某些技巧了。我們知道在鏈結串列中的節點特性是知道下一個節點的位置,可是卻無從得知它的上一個節點位置,不過如果要將串列反轉,則必須使用三個指標變數。請看下圖說明:

演算法如下:

class employee{
constructor() {
this.num=0;
this.salary=0;
this.name='';
this.next=null;
}
}
var invert=(x)=> { //x為串列的開始指標
p=x; //將p指向串列的開頭
q=null; //q是p的前一個節點
while (p!=null) {
r=q; //將r接到q之後
q=p; //將q接到p之後
p=p.next //p移到下一個節點
q.next=r; //q連結到之前的節點
}
return q;
}

JS          rev_node.js

class employee {
	constructor() {
		this.num=0;
		this.salary=0;
		this.name='';
		this.next=null;
	}
}

findword=0;
namedata=['Allen','Scott','Marry','John','Mark','Ricky',
			'Lisa','Jasica','Hanson','Daniel','Axel','Jack'];
data=[[1001,32367],[1002,24388],[1003,27556],[1007,31299],
		[1012,42660],[1014,25676],[1018,44145],[1043,52182],
		[1031,32769],[1037,21100],[1041,32196],[1046,25776]];

head = new employee();//建立串列首
if(!head) {
	console.log('Error!! 記憶體配置失敗!!');
	return;
}
head.num =data[0][0];
head.name=namedata[0];
head.salary=data[0][1];
head.next=null;

ptr=head;

for(i=1; i<12; i++){  //建立串列
	newnode=new employee();
	newnode.next=null;
	newnode.num=data[i][0];
	newnode.name=namedata[i];
	newnode.salary=data[i][1];
	newnode.next=null;
	ptr.next=newnode;
	ptr=ptr.next;
}

ptr=head;
i=0;
process.stdout.write('原始員工串列節點資料:\n');
while (ptr !=null) { //列印串列資料
	process.stdout.write('['+ptr.num+'\t'+ptr.name+'\t'
							+ptr.salary+'] -> ');
	i=i+1;
	if (i>=3) { //三個元素為一列
		console.log();
		i=0;
	}
	ptr=ptr.next;
}

ptr=head;
before=null;
process.stdout.write('\n反轉後串列節點資料:\n');
while (ptr!=null) { //串列反轉,利用三指標
	last=before;
	before=ptr;
	ptr=ptr.next;
	before.next=last;
}
ptr=before;
while (ptr!=null) {
	process.stdout.write('['+ptr.num+'\t'+ptr.name+'\t'
							+ptr.salary+'] ->');
	i=i+1;
	if (i>=3) { //三個元素為一列
		console.log();
		i=0;
	}
	ptr=ptr.next;
}

PHP  陣列 函數

array_pop() 刪除陣列最後一個元素。
array_push() 將一個或多個元素加入末端。
array_reverse() 以相反的順序返回陣列。
array_shift() 刪除首個元素。
array_slice() 刪除指定位置的元素,返回陣列。

JavaScript 概念三明治(六)

Event Table

Event Table 是與Event Queue 互相搭配的資料集合,它負責記錄在非同步目的達成後,有哪些函式或者事件要被執行,這裡指的非同步目的指的是像計時完畢、API資料獲取完畢、事件被觸發。當我們執行setTimeout這個函式時,JavaScript會把給定的函式與像是倒數的秒數之類的附帶資訊(meta data)推送到Event Table裡面,等到一秒過後(目的達成)該函式教會被正式推送到事件除列等待執行,而在這之前JavaScript就是透過Event Table知道有那些事件要被送到事件儲列中。

Event Loop

那麼,什麼又是事件迴圈Event Loop呢?可以把Event Loop想成是另外一個幾乎無時無刻、每一毫秒都在執行的程式,它負責檢查現在主執行環境堆疊是否是空的。如果是空的,再去檢查Event Queue,若Event Queue有函式等待執行,則將這些函式從Event Queue依序到主執行環境並執行。
也因為有事件迴圈與事件儲列的機制,像是事件監聽與透過Ajax拉取資料這類行為才有辦法被達成。例如在監聽網頁點時,一旦使用者做了點擊的動作,對應的邏輯就會被推送到事件儲列內,而事件迴圈看到儲列內有待執行的任務,就會負責去執行。
那麼,現在了解了整個事件儲列的概念,讓我們再度回到setTimeout的例子,來看看一道經典的面試問題。
for (var i=0; i<3; i++){
setTimeout(function(){
console.log(i)
}, 1000)
}
各位可以先想一下,在一秒之後,setTiomeout函式內console.log的輸出的結果是甚麼。這邊用到的概念跟前面講閉包的時候類似,都與先後順序有關。若沒有非同步概念的話,通常會下意識的認為結果會是0、1、2,不過這段程式碼最後其實是會印出3、3、3,不知道有沒有猜對。
搭配識見儲列的概念,現在我們知道setTimeout對應的函式會在主執行環境結束之後才被執行,而等到該函式被執行時,for迴圈裡面的i早就已經因為迴圈而被修改為3了。
要改變三個3的結果,想要看到0、1、2的話該怎麼辦呢?這邊要結合一點前面說到的範疇與閉包的觀念,可以看到for迴圈裡面的i是利用var所宣告,而既然var具有的範疇是根據函式來界定,那麼我只要利用函式,是不是就是夠透過產生閉包,把每個迴圈的i值保留下來呢?當然可以,我們可以利用立即執行函式(IIFE),並把i導入這個立即執行函式,就能夠產生閉包了。

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

或者是把var宣告改成let來做宣告
for (let i=0; i<3; i++){
setTimeout(function(){
console.log(i)
}, 1000)
}

Promise

我們在前一個段落提到,為了防止網頁的主程式因為等待某些邏輯運算的回應而停擺,有時候JavaScript的行為需要透過非同步的方式來執行,包括一些瀏覽器的API和對外部伺服器拉取資料的動作,而這些動作是利用瀏覽器的Event Queue來達成非同步的行為。
這的確減少不必要的等待,進而增加了使用流程上的順暢度。不過就程式碼的撰寫方式來看,由於在做這些非同步行為的時候,若不做任何的處理,一般都是以回呼函式的方式來進行,才能確保某一段邏輯在非同步行為完成之後才被執行,若這類邏輯開始複雜的時候,可能會變得難以閱讀。
舉前例講到的例子來說,若以setTimeout來模擬一個非同步的行為,想要確保這件事情的話,我們就必須把一個非同步行為放到另外一個非同步的行為的回呼函式裡面。當這樣子的需求越來越多時,你可能就會看到這樣的程式碼。
const asynActionA = (fn)=>setTimeout(fn, 10000);
const asynActionB = (fn)=>setTimeout(fn, 10000);
const asynActionC = (fn)=>setTimeout(fn, 10000);
const asynActionD = (fn)=>setTimeout(fn, 10000);

asyncActionA(()=>{
console.log("asynActionA");
asynActionB(()=>{
console.log("asynActionB");
asynActionC(()=>{
console.log("asynActionC");
asynActionD(()=>{
console.log("asynActionD");
});
});
});
});
這種巢狀的回呼函式一旦多了起來,就容易造成維護上的困難。一般在正式的專案中都非常不樂見這樣子的程式碼。為了解決這樣的問題,我們就必須認識這個Promise
>Promise簡介
Promise是什麼呢?Promise是JavaScript版本E86以後出現的新語法,這個詞以字面上的意義來看,用比較白話的方式解釋的話有一種:我承諾幫你做某件事情,能不能成功還不一定,但是我做完之後會把結果告訴你的意思。官方的文件描述則是:
Promise是一個代表非同步運作的最終狀態的物件(成功或失敗)
A Promise is an object repressnting the eventual completion
or failure of an asynchronous operation.(MDN)

從技術文件的角度來解釋就顯得比較抽象,不過你應該大致能夠看出一點頭緒,只要抓住幾個關鍵字--也就是「成功」與「失敗」兩種狀態。
>Promise的狀態
進一步總結以上的論點,一個Promise以時間順序來看是有狀態之分的。除了前面講的成功與失敗兩種結果,一般以Pending來描述在執行中,懸而未決的Promise,一個Promise總共會有三種可能的狀態,分別代表進行中、成功與失敗。而相對於Pending這個代表處理中的狀態,不管是進入成功或失敗狀態的Promise,我們都能夠用Settled來表示這個Promise已經被解決了。

*Pending:還在執行中的狀態,表示還沒有特定結果。
*Fulfilled:成功的狀態,代表Promise被實現,對應的回呼函式為resolve。
*Rejected:失敗的狀態,代表Promise被拒絕,對應的回呼函式為reject。
*Settled:表示Promise已經被解決,結果已經確定。

>Promise基本使用方式
從前面文件的描述應該也可以看得出來Promise在JavaScript裡面是以物件的方式存在。這個物件又是怎麼產生呢?接下來我們就來看看要怎麼使用Promise吧!基本的Promise宣告方式如下:
我們進一步仔細看一下這個傳進Promise建構函式,它接收了兩個參數:resolvereject來命名。

resolvereject 其實分別是兩個具有不同目的的函式。resolve(解析)被用於在認為Promise內的行為成功時呼叫reject(拒絕)則用於被認為失敗的邏輯發生時呼叫。使用這兩個詞最為函式的名稱只因為這是一種約定俗成,許多人都用這些詞來稱呼它們。

JavaScript 概念三明治(五)

同步/非同步

「同步」聽起來就是指一次做好幾件事情,其實並不是,同步指的是:
同一時間只做一件事
套用到JavaScript裡面就是指一次只跑一段程式碼,就像JavaScript語法解析器做的,從上到下一行一行執行那樣。當JavaScript載入全域執行環境,也許呼叫了某個函式創造出一個函式執行環境,然後回到全域環境後結束,這一切都是同步來做處裡的,也就是說,在JavaScript裡面不可能同時執行兩個函式、執行多段程式碼邏輯。
而「非同步」呢?就很好理解了,相較於同步,它的概念則相反:
同一時間內處理不只一件事
必須透過非同步的處理方式,才能讓JavaScript在進入全域執行環境到結束的這中間,能夠額外處理一些需要時間進行的邏輯,而又不影響原來的主程式。在非同步的處理方式下,主程式的運行還是會繼續,而非同步進行的工作也還是會進行,只是不是馬上,而是等到主程式執行完畢,JavaScript引擎有空檔後才會被執行。
非同步的行為在瀏覽器前端很常見,像是部落格網站,當網站一打開,JavaScript必須處理畫面上的一些行為,卻又必須跟後端取文章資料。若以同步的方式來進行這個拉取文章的動作,那麼在拉取道完整文章之前,JavaScript就會無法執行任何其他任務。
也就是說,即便JavaScript是一門同步的語言,但為了符合瀏覽器的使用情境,某些時候它必須具有非同步執行邏輯的能力,至於它怎麼處理這些互動的非同步動作呢?就是透過瀏覽器內的事件迴圈的幫助,關於事件迴圈在後面馬上就會看到。
瀏覽器內可不是只有JavaScript引擎而已,還有其他許多部份在JavaScript引擎之外執行的其他程式,像是渲染引擎負責畫面的構築、以及負責處理網路溝通如Http請求以獲得資料的部分。而JavaScript可能在某些時候必須要要求瀏覽器變更畫面的內容,或是觸發網路溝通的流程,以與其他伺服器溝通,但是這些工作可能會是非同步的,只有在JavaScript引擎裡面事同步的運行。

Event Queue 與 Event Loop

Event Queue、Event Loop這兩個部分並不存在於JavaScript內,而是瀏覽器的其中一部份。它們雖然不屬於JavaScript,卻是前端產品開發裡面最重要的概念之一。因此,需要了解它們為前端互動方面帶來什麼樣的幫助和影響。
>JavaScript引擎的組成

讓我們回想一下前面提到的基礎。之前提到過「執行環境堆疊」,函式呼叫時會產生執行環境,若在這個函式執行環境內含有其他函式被呼叫,就會在之上產生另一個執行環境,形成堆疊。而在上層的執行環境結束之前,下層部分的其他程式碼事無法被執行的,包含全域執行環境。                                                                                                

因此,只要在這之中某個堆疊過久,就算只有一個函式執行環境的堆疊,都有可能影響整個主程式(全域執行環境)的運行。不過應用程式裡面總是會有某些功能需要時間來提取/運算,這時候為了不讓整個主程式停下來等待太久,我們可以,而且其實我們很常把這些比較耗時的工作放在主程式以外的某一個部分去執行。
要討論下一段之前,必須先複習一下,前面我們提到的,JavaScript引擎底下根據功能大致上可以分為三個部分:

#全域執行環境
#執行環境堆疊
#記憶體堆疊

然而瀏覽器內可不只有JavaScript引擎,接下來我們要提到一個很重要的概念--Queue(又稱Message/Event/Callback Queue)。
整個瀏覽器的運行並非只有JavaScript引擎組成。前面說到過,因為JavaSript屬於同步執行的語言,同時又為了讓網頁具有像「監聽事件」、「計時」、「拉第三方API」這些類似「背景作業」的功能,瀏覽器提供了另外一些部份來達成,分別是:
#

#Event Queue
#Web API
#Event Table
#Event Loop

整個由上述部分,包含JavaScript引擎所組成的整體,稱為JavaScript Runtime Environment(JRE),瀏覽器內並不只有JavaScript語言本身而已,我們先來看一下瀏覽器內的事件處理。
>Event Queue
Queue(儲列)是什麼樣的概念呢?我們先來看一下,在寫網頁程式的時候,有一些所謂的「內建的」API如setTimeout、setInterval,這些API不存在於JavaScript原始碼內,但你仍然可以在開發時直接使用。因為這些API是屬於瀏覽器所提供的WebAPI。WebAPI並非JavaScript引擎的一部份,但它屬於瀏覽器運行流程的一環。
關於Web API,舉一些例子:
*操作DOM節點的API:document.getElementeById
*AJAX相關API,像是:XMLttpRequest
*計時類型的API,就像剛剛提到的setTimeout
這類Web API在與JavaScript原始碼一起執行的時候,通常不會直接影響JavaScript主執行環境的運行。否則的話若網頁需要與後端伺服器溝通,拉取外部資料時,就只有乾等,無法執行任何其他事情了!
>Event Queue 運行流程
要了解Event Queue的運行,我們必須先找到一件會放到Event Queue執行的事情。所以這邊要先介紹其中幾個瀏覽器的API:setTimeout與setInterval。setTimeout是一個全域的函式,用於將想做的事情延後幾秒進行。將想要執行的邏輯以函式的方式傳入第一個參數,並在第二個參數傳入想要等待的時間,JavaScript就會為你在若干秒之後,呼叫你傳入的函式。
而setInterval呢?與setTimeout相似,只不過setTimeout只會在你給定的秒數之後執行一次,而setInterval則是根據你給定的時間,固定幾秒執行一次。
function executeAfterDelay(){
console.log("一秒之後才會執行");
}
setTimeout(executerAfterDelay, 1000);
console.log("我會先被被執行");
如果了解了這兩個方法的用途,來觀察上圖的程式碼應該不會太難理解,函式內的程式碼會在一秒之後才被呼叫。不過意外的事情總是會發生,這段程式碼裡面,setTimeout可不像一般的函式那樣運行起來那麼單純。
我們可以試試看把setTimeout的時間調整為0,那是不是就會馬上執行對應的函式內容了呢?
function executeAfterDalay() {
console.log("應該要馬上執行");
}
setTimeout(excuteAfterDalay,0);
console.log("應該要最後執行");

整個流程看起來像這樣:
1.JavaScript 引擎執行到瀏覽器提供的setTimeout函式。
2.JavaScript 引擎繼續運行,同時瀏覽器開始根據給定的秒數計時。
3.等待計時完成後,把剛才接收到的函式推送到Event Queue內。
4.等待JavaScript引擎運行完畢,主執行環境結束後,將Event Queue內的函式推送到JavaScript主執行環境,產生堆疊(執行該函式)。

JavaScript 概念三明治(四)

函式陳述式與表達式

JavaScript有兩種語法分類:陳述式與表達式。而了解這兩種語法分類之後,我們才有辦法區別函式的兩種使用方法:函式宣告式、函式表達式在運用上有什麼不同。
陳述式
陳述式Statement就像生活中我們所描述事情時所說的某句話像是「今天出門天氣不好的話記得帶傘」,像是一種聲明、或是對邏輯的描寫。陳述式會影響程式的運行流程,並且一定會做某一些事情,向邏輯判斷就是一種陳述式。
但是陳述式在JavaScript並不會產生數值,可以以此看出它跟表達式的區別。所以不能放在JavaScript內預期會產生數值的地方,像是函式的參數、函式的回傳值、或是宣告變數時等號的右邊(不能被用來指派給另一變數)。舉例來說,常見的陳述式有:

*if/switch判斷式
*for/while迴圈
*變數宣告
*一般函式宣告

表達式
就像你每個月上班或打工,做完該做的事情之後會拿到薪水作為回報一樣。表達式也是一段JavaScript在執行完後會得到一個結果的程式碼。它可以是很長,也可以簡短,只要執行後會回傳結果的一段程式碼,就是表達式。
//函式呼叫
functionInvocation();
//變數指派
a = 3;
//運算式
1 + 2;
a ===3;
ture || false;
true && true;
Array.isArray([]) ? doSomeThing() : doOtherThing();
這些都是表達式。
函式陳述式與函式表達式
在JavaScript裡面,要創造一個函式,可以透過宣告式,也能透過表達式來達成。這兩種方法就很值觀則分別稱成「函式陳述式」跟「函式表達式」。
函式陳述式
函式陳述式是藉由直接給函式名稱來直接宣告一個函式,其實它就是一般的函式宣告。之前有說過變數宣告時,JavaScript會幫你保留記憶體空間,所以它屬於陳述式。而像這樣子一般的函式宣告,跟變數宣告會產生的行為是一樣的,因此當然也屬於陳述式。
//可以在宣告函式的程式碼之前就先呼叫
functionStatement();
function functionStatement(){
//do something
}
函式表達式
另外一種宣告函式的方法是函式表達式,函式表達式的寫法是直接一個把函式指派給另一個變數,之所以能夠這麼做是因為函式本身在JavaScript裡面也是一個物件,所以除了一般的宣告方式之外,函式也能夠作為一個被指派的值。
functionExpression() //functionExpression is not a function
var functionExpression = function(){
//do somthing
}

上方是 functionStatement
下方是函式表達式,有 do somthing

回呼函式

在JavaScript裡面很常聽到這個值,那麼什麼是回呼函式Callback Function?其實它指的就是在函式裡面執行的另外一個函式。它有著一種「等某段邏輯執行完畢之後,在告訴我」的意思。

其餘參數以及物件參數

這邊介紹兩種在函式上非常實用的語法:其餘參數物件作為參數時的展開。

>其餘參數
當一個函式有可能接收一個以上但不確定數量的參數,我們就能夠使用ES6之後提供的其餘參數(Rest Parameter)。其餘參數以...加上變數名稱來表示,且只能擺在最後一個位置,它會將所有後來未在函式裡面定義的變數,蒐集成一個陣列傳入函式。

function addAll(a,b,…rest){
let sum =a+b;
rest.forEach((num)=>{ //參數 rest會是一個陣列
sum = sum +num;
})
return sum;
}
AddAll=addAll(1,2,3,4,5,6);
console.log(AddAll);
>物件參數的展開
當一個物件參數傳入函式時,我們可以把這個物件「展開」,快速地取得物件裡面的屬性作為參數給函式內的邏輯使用。
var userInfo = {
name:'Anakin',
nickName: 'King'
}
function displayUser({name,nickName}){
//do something
}
displayUser(userInfo);