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);

圖說演算法使用JavaScript(九)

5-3徹底完轉單向串列演算法

在JavaScript語言中,如果以動態配置產生鏈結串列的節點,必須先行自訂一個類別,接著在該類別中定義一個指標欄位,用意在指向下一個鏈結點,及至少一個資料欄位。例如我們宣告一學生成績串列節點的結構宣告,並且包含下面兩個資料欄位;姓名name、成績score,與一個指標欄位next。可以宣告如下:
class student{
constructor(){
this.name='';
this.score=0;
this.next=null;
}
}
當各位完成節點類別的宣告後,就可以動態建立鏈結串列中的每個節點。假設我們現在要新增一個節點至串列尾端,且ptr指向串列的第一個節點,在程式上必須設計四個步驟:
1.動態配置記憶體空間給新節點使用。
2.將原列尾端的指標欄next指向新元素所在的記憶體位置。
3.將ptr指標指向新節點的記憶體位置,表示這是新的串列尾端。
4.由於新節點目前為串列最後一個元素,所以將它的指標欄next指向null。
例如要將s1的next變數指向s2,而且s2的next變數指向null:
s1.next = s2;
s2.next = null;
由於串列的基本特性就是next變數將會指向下一個節點,這時s1節點與s2節點間的關係就如下圖所示:
5-3-1單向鏈結串列的連結

JS           concatlist.js

/[示範]:單向串列的連結功能
var concatlist=(ptr1,ptr2)=>{
	ptr=ptr1;
	while (ptr.next!=null) ptr=ptr.next;
	ptr.next=ptr2;
	return ptr1;
}

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

findword=0;
data=[];
namedata1=['Allen','Scott','Marry','Jon',
			'Mark','Ricky','Lisa','Jasica',
		   'Hanson','Amy','Bob','Jack'];
namedata2=['May','John','Michal','Andy',
			'Tom','Jane','Yoko','Axel',
		   'Alex','Judy','Kelly','Lucy'];
for (i=0; i<12;i++){
	data[i]=[];
	data[i][0]=i+1;
	data[i][1]=Math.floor(51+Math.random()*50);
}
const head1=new employee();  //建立第一組串列首
if (!head1) {
	console.log('Error!! 記憶體配置失敗');
	return;
}
head1.num=data[0][0];
head1.name=namedata1[0];
head1.salary=data[0][1];
head1.next=null;
ptr=head1;

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

for(i=0; i<12; i++){
	data[i][0]=i+13;
	data[i][1]=Math.floor(51+Math.random()*50);
}

const head2=new employee();
if (!head2){
	console.log('Error!! 記憶體配置失敗!!');
	return;
}

head2.num=data[0][0];
head2.name=namedata2[0];
head2.salary=data[0][1];
head2.next=null;
ptr=head2;
for(i=1; i<12; i++){
//建立第二組鏈結串列
  newnode=new employee();
  newnode.num=data[i][0];
  newnode.name=namedata2[i];
  newnode.salary=data[i][1];
  newnode.next=null;
  ptr.next=newnode;
  ptr=ptr.next;
}

i=0;
ptr=concatlist(head1,head2);//將串列相連
console.log('兩個鏈結串列相聯的結果:');
while(ptr!=null){
	process.stdout.write('['+ptr.num+' '+ptr.name+' '+ptr.salary+']=> ');
	i=i+1;
	if(i>3){
		console.log();
		i=0;
	}
	ptr=ptr.next;
}

用一維方式來算

PHP          concatlist.php

$namedata1=array('Allen','Scott','Marry','Jon',
			'Mark','Ricky','Lisa','Jasica',
		   'Hanson','Amy','Bob','Jack');

$namedata2=array('May','John','Michal','Andy',
			'Tom','Jane','Yoko','Axel',
		   'Alex','Judy','Kelly','Lucy');
$namedata=array();

function add_score($arr){
	$count_arr=count($arr);
	$new_arr=array();

	for ($i=0; $i<$count_arr; $i++){
		$score = rand(60,100);
		$temp = $arr[$i].",".$score;
		array_push($new_arr,$temp);
	}
	return $new_arr;
}

function join_arr($arr1,$arr2){
	 $count_arr=count($arr2);
	 for($i=0; $i<$count_arr; $i++){
	 	array_push($arr1,$arr2[$i]);
	 }
	 return $arr1;
}
$new_namedata1=add_score($namedata1);
$new_namedata2=add_score($namedata2);
$namedata=join_arr($new_namedata1,$new_namedata2);

foreach ($namedata as $key => $item) {
	  echo $item." ";
}

後記:

PHP
    使用二維陣列,很難去加、刪,只好用一維陣列並加上符號,來加資料。
       array_push()函數,前面不能加變數,會出錯。
           $my_arr=array_push($my_arr,$add_data);
  會出現錯誤的訊息
      array_push() expects parameter 1 to be array

PHP          concatlist.php

用二維方式來算       

$namedata1=array('Allen','Scott','Marry','Jon',
			'Mark','Ricky','Lisa','Jasica',
		   'Hanson','Amy','Bob','Jack');

$namedata2=array('May','John','Michal','Andy',
			'Tom','Jane','Yoko','Axel',
		   'Alex','Judy','Kelly','Lucy');
$namedata=array();

function add_score($arr){
	$count_arr=count($arr);
	$new_arr=array();
	$temp_arr=array();

	for ($i=0; $i<$count_arr; $i++){
		$score = rand(60,100);
		$temp = $arr[$i];
		$temp_arr=array($temp,$score);
		array_push($new_arr,$temp_arr);
	}
	return $new_arr;
}

function join_arr($arr1,$arr2){
	 $count_arr=count($arr2);
	 for($i=0; $i<$count_arr; $i++){
	 	array_push($arr1,$arr2[$i]);
	 }
	 return $arr1;
}
$new_namedata1=add_score($namedata1);
$new_namedata2=add_score($namedata2);
$namedata=join_arr($new_namedata1,$new_namedata2);

foreach ($namedata as $key => $item) {
	  foreach($item as $value){
	  echo $value." ";
	  }
	  echo "<br>";
}

後記       PHP二維參考資料

PHP      先存成陣列,再用array_push去加
for ($i=0; $i<$count_arr; $i++){
       $score = rand(60,100);
       $temp = $arr[$i];
       $temp_arr=array($temp,$score);
array_push($new_arr,$temp_arr);
}

用佇列(Quene)方式來算

PHP                   concalist_quene.php


5-3-2單向串列插入新節點
在單向鏈結串列中插入新節點,如同一列火車加入新的車廂,有三種情況:加於第1個節點之前、加於最後一個節點之後,以及加於此串列中間任一位置。

演算法如下:

newnode.next=first;
first=newnode;

演算法如下:

ptr.next=newnode;
newnode.next=null;

演算法如下:

newnods.next=x.next;
x.next=newnods;

JS          insert_node.js

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

var findnode=(head,num)=>{
	ptr=head;
	while (ptr!=null){
		if (ptr.num==num) return ptr;
		ptr=ptr.next;
	}
	return ptr;
}

var insertnode=(head,ptr,num,salary,name)=>{
	InsertNode=new employee();
	if (!InsertNode) return null;
	InsertNode.num=num;
	InsertNode.salary=salary;
	InsertNode.name=name;
	InsertNode.next=null;
	if(ptr==null)  {  //插入第一個節點
		InsertNode.next=head;
		return InsertNode;
	}
	else{
		if(ptr.next==null)  //插入最後一個節點
				ptr.next=InsertNode;
			else{ //插入中間點
				InsertNode.next=ptr.next;
				ptr.next=InsertNode;
			}
	}
	return head;
}

position=0;
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]];
namedata=['Allen','Scott','Marry','John','Mark','Ricky',
					'Lisa','Jasica','Hanson','Daniel','Axel','Jack'];
process.stdout.write('員工編號 薪水\t員工編號 薪水\t員工編號 薪水\t員工編號 薪水\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();
}
console.log('-------------------------------------------------------------');

head=new employee(); //建立串列首
head.next=null;

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;
}

while(true) {
	process.stdout.write('請輸入要插入其後的員工編號,如輸入的編號不在此串列中,\n');
	const prompt = require('prompt-sync')();
	const position=parseInt(prompt('新輸入的員工節點將視為此串列的串列首,要結束插入的過程,請輸入-1'));
	if (position ==-1)
		break;
	else{
		ptr=findnode(head,position);
		new_num = parseInt(prompt('請輸入新插入的員工編號:'));
		new_salary=parseInt(prompt('請輸入新插入員工的薪水:'));
		new_name=prompt('請輸入新插入的員工姓名:');
		head=insertnode(head,ptr,new_num,new_salary,new_name);
	}
	console.log();
}
ptr=head;
console.log('\t員工編號     姓名\t薪水');
console.log('\t===========================');
while (ptr!=null) {
	process.stdout.write('\t['+ptr.num+' ]\t[ '+ptr.name+' ]\t['+ptr.salary+']\n');
	ptr=ptr.next;
}