javascript
基于JavaScript 数组的经典程序应用源码（强烈建议收藏）
文章目錄
- 設(shè)計一個數(shù)組輸入并顯示的程序。
- 數(shù)組輸入和顯示
- 選擇排序
- 選擇排序
- 排序程序包
- 排序網(wǎng)頁
- 楊輝三角形
- 楊輝三角形網(wǎng)頁
- C語言畫一個sin(x)的曲線
- 螺旋線訪問二維數(shù)組
JavaScript數(shù)組的定義、使用都是非常簡單的，僅僅定義的話，就使用：
var a=new Array();對于JavaScript的數(shù)組，大小不用管的，愛用多大的下標就用多大。
設(shè)計一個數(shù)組輸入并顯示的程序。
對后續(xù)的實驗而言，要求能有一個數(shù)組、能輸入數(shù)據(jù)、并顯示結(jié)果，為滿足這個要求，程序至少要有三個按鈕：數(shù)據(jù)輸入、數(shù)據(jù)顯示、數(shù)組清除，所謂數(shù)組清除，就是當你的數(shù)據(jù)輸入錯誤后，要能清除掉這個數(shù)組、給使用者重新輸入的機會。后面肯定就是個文本框了。所以這種情況下，控件說明就是這樣的：
<INPUT TYPE="button" ID=BUTTON1 value="數(shù)據(jù)輸入" onclick='fIn()' /> <INPUT TYPE="button" ID=BUTTON2 value="數(shù)據(jù)輸出" onclick='fOut()' /> <INPUT TYPE="button" ID=BUTTON2 value="數(shù)據(jù)清除" onclick='fCls()' /> <INPUT TYPE="input" ID="text1" style="z-index: 100; left: 11px; width: 248px; position: absolute; top: 40px"/>注意這個text1控件的說明：它同過去的定義不一樣，而是說明了位置屬性，left:11px，說明這個控件離瀏覽器左邊10個像素點，width:248px說明該控件寬度是248像素點，而后面的top:40px、則說明離瀏覽器高度是40個像素點。
我們可以打開a2.htm，這個網(wǎng)頁文件，把上述控件說明寫進去，并另存為a19.htm
分析：對于數(shù)組，我們定義一個就足夠了，注意我們的數(shù)組、要在三個函數(shù)：fIn()、fOut()、fCls()中使用，所以，這個數(shù)組應(yīng)該是全局的，同理，數(shù)組的大小也需要知道，我們用n來存儲它的當前大小，n也應(yīng)該是全局的、并且開始就是0，所以程序框架結(jié)構(gòu)就是：
var a=new Array(); var n=0; function fIn() {… } function fOut() {… } fCls() {… }對于fIn()函數(shù)，就是從text1中讀到數(shù)據(jù)并給到a[ ]，所以是：
function fIn() {var d=parseInt(text1.value);a[n]=d;n++;text1.value=””; }n++的含義是準備寫到下一個數(shù)組單元里。
而對fOut()，也很簡單，就是：
對多個數(shù)據(jù)的顯示，我們選擇document.write()，這樣可以顯示很多數(shù)據(jù)。
而對于fCls()，則使用重新構(gòu)造數(shù)組并將n=0，這樣，舊的數(shù)據(jù)就全沒了
把上述代碼全部湊到一起，構(gòu)成新的網(wǎng)頁，實際通過上述很多范例的分析，我們知道基本過程就是：
（1） 打開一個框架程序、如a2.htm這樣的文件；
（2） 在框架文件里先填加控件的說明，讓你的程序有足夠的控件；
（3） 注意控件的事件響應(yīng)函數(shù)的名稱，不要搞錯；
（4） 補充你的事件響應(yīng)函數(shù)，到此就算完成了。
（5） 整個程序就是：
文件名：a19.htm
數(shù)組數(shù)據(jù)的輸入和顯示
數(shù)組輸入和顯示
這個程序的關(guān)鍵地方是要把事件響應(yīng)函數(shù)和每個控件對應(yīng)起來。
有了上述程序，后面的作業(yè)就可以逐個去完成了。所謂框架、這個程序就算一個吧，在這個程序基礎(chǔ)上繼續(xù)補充，就會非常方便。
選擇排序
排序是一個很有意思的事情，選擇排序的程序就是：
function SelectSort(x,num) {var i,j,t,m,min;for(i=0;i<num;i++){min=a[i];m=i;for(j=i;j<num;j++)if(x[j]<min){min=x[j];m=j;}if(m!=i){t=x[i];x[i]=x[m];x[m]=t;}} }其中x是一個數(shù)組，保存著待排數(shù)據(jù)，num是這個數(shù)組的大小。
查閱JavaScript，可以發(fā)現(xiàn)JavaScript得到數(shù)組長度很方便，就是x.length、或者是a.length，這樣，我們再次修改SelectSort()就是：
function SelectSort(x) {var i,j,t,m,min;var num=x.length;for(i=0;i<num;i++){min=a[i];m=i;for(j=i;j<num;j++)if(x[j]<min){min=x[j];m=j;}if(m!=i){t=x[i];x[i]=x[m];x[m]=t;}} }注意這個函數(shù)：它沒針對a數(shù)組排序，實際就是說可以針對任何一個數(shù)組排序，所以需要一個主調(diào)函數(shù)去調(diào)用它，這個主調(diào)函數(shù)應(yīng)該是一個按紐的事件響應(yīng)函數(shù)。于是要再增加一個按紐：選擇排序，就是：
注意它的事件響應(yīng)函數(shù)是fSort()，于是補充函數(shù)：
這樣，整個程序就是：
文件：a20.htm
選擇排序
選擇排序
從上述程序我們可以看到：我們的程序已經(jīng)開始逐漸變大，實際上選擇排序并不是很大，但現(xiàn)在，我們要假設(shè)：我們的排序程序非常大，實際中，排序要好多種方法。
把一個很大的程序包裝在一個網(wǎng)頁里、并不明智，這會讓這個網(wǎng)頁打開過程非常慢，于是我們要想辦法把網(wǎng)頁內(nèi)容分割成一些小包，比如我們的排序程序，要從a20.htm中分割出來。分割過程如下：
1 我們先打開記事本，把SelectSort()函數(shù)復(fù)制過去、另存為Sort.js；
2 把SelectSort()從a20.htm中刪除掉、a20.htm另存為a21.htm;
現(xiàn)在我們肯定知道：a21.htm必須引用Sort.js才能進行排序，否則fSort()函數(shù)里根本找不到SelectSort()在哪里。引用一個程序包、如Sort.js，使用的語句是：
<SCRIPT TYPE="TEXT/JAVASCRIPT" src="sort.js"></SCRIPT>注意src=””這個描述，它代表的是從本地硬盤、當前文件夾中引用這個程序包，也可以是這樣的描述：
這代表著將從一個網(wǎng)站：www.abcd.com上獲得這個程序包。
在實際中，由于瀏覽器都采用了多線程技術(shù)、網(wǎng)站也有很多端口，分割成小包文件下載、速度要快的多。
這樣，整個程序就是：
文件名：Sort.js
排序函數(shù)包，目前僅僅是選擇排序
排序程序包
文件：a21.htm
調(diào)用排序包的排序網(wǎng)頁
排序網(wǎng)頁
有了這樣的程序包，我們編寫其他排序函數(shù)也就方便的多?，F(xiàn)在我們首先在Sort.js中補充一個冒泡排序函數(shù)，所以首先打開Sort.js文件，補充代碼如下：
function BubbleSort(x) {var num=x.length;var i,j,t;for(i=0;i<=num-2;i++)for(j=0;j<=num-i-1;j++)if(x[j]>x[j+1]) {t=x[j];x[j]=x[j+1];x[j+1]=t;} }有了這個排序函數(shù)后，在a21.htm中修改：
function fSort() {BubbleSort(a); }這樣就能調(diào)用BubbleSort()函數(shù)進行排序了。如果你不希望每次都輸入數(shù)據(jù)，你還可以修改成這樣：
function fSort() {a=[2,4,6,8,10,1,3,5,7,9];n=10;BubbleSort(a); }最后，在Sort.js中補充一個新的排序方法RadixSort()，自己分析一下算法。
楊輝三角形
這個三角形就是：
實際，就是(a+b) 、當n=1,2,3,4….時候的系數(shù)。分析這個三角形還是不難發(fā)現(xiàn)其規(guī)律的。于是設(shè)計中可以用一個二維數(shù)組，先把每行最開始的數(shù)字和最末尾的數(shù)字寫進去：
#include<stdio.h> main() { int i,j,a[10][10]; for(i=0;i<10;i++)for(j=0;j<10;j++)a[i][j]=0;//每行最開始的和最末尾的數(shù)字都是1for(i=0;i<10;i++){a[i][0]=1;a[i][i]=1;}for(i=0;i<10;i++){for(j=0;j<10;j++)printf("%d ",a[i][j]);printf("\n");} }真正的處理是這樣的：
for(i=2;i<10;i++)for(j=1;j<i;j++)a[i][j]=a[i-1][j-1]+a[i-1][j];就是前一行的前一個+前一行的當前列的值。
于是整個程序就是：
另外一種算法是根據(jù)這個三角形的基本性質(zhì)，導(dǎo)出了通項公式，所以更加簡潔。C語言的程序見下面的范例。
#include<stdio.h> main() { long i,j,n,k; scanf("%ld",&n); for(i=1;i<=n;i++) { k=1; for(j=1;j<i;j++) { printf("%ld ",k); k=k*(i-j)/j; } printf("1\n"); } }但我們不僅僅做C語言的程序，我們要做的是瀏覽器下的程序。我們還是考慮使用2維數(shù)組的情況，其主要目的是讓大家學(xué)會JavaScript怎么處理2維數(shù)組。
對上述的C語言程序，它僅僅能處理10行，而對JavaScript、則這個是可以由用戶自由輸入并打印的。所以我們的瀏覽器上要一個文本框、一個按鈕就足夠了。所以控件的說明就是：
<INPUT TYPE="button" ID=BUTTON1 value="楊輝三角" onclick='fun()'/> <INPUT TYPE="input" ID="text1" />注意按鈕的事件響應(yīng)函數(shù)是fun()
但我們查閱JavaScript語言，卻發(fā)現(xiàn)這個語言沒有直接說可以有二維數(shù)組，它僅僅是有一維數(shù)組的定義，但這不要緊，我們可以自己構(gòu)造。首先可以想象一維數(shù)組就是二維數(shù)組的一列，在二維數(shù)組上、這一列本身又是個一維數(shù)組，于是就有：
function fun(){var n=parseInt(text1.value);//先申請a是一維數(shù)組var a=new Array(n);//這里是一維數(shù)組var i,j;for(i=0;i<n;i++){ //注意，一維數(shù)組的每個元素還是數(shù)組，為每個a[i]再次申請個//數(shù)組，這//樣就構(gòu)造了二維數(shù)組a[i]=new Array();for(j=0;j<n;j++)a[i][j]=0;}}這樣分兩次構(gòu)造，就可以把a變成2維數(shù)組，實際還可以是3維、4維等等。對這個數(shù)組賦值，同C語言是一樣的，比如對每行第1個和楊輝三角每行最后一個賦值，就是這樣的程序：
for(i=0;i<n;i++){a[i][0]=1; a[i][i]=1;}對第2行后的數(shù)據(jù)進行計算，就是：
for(i=2;i<n;i++)for(j=1;j<i;j++)a[i][j]=a[i-1][j-1]+a[i-1][j];同C語言完全一致的語句，所以整個程序就是：
文件名稱：a22.htm
楊輝三角形
楊輝三角形網(wǎng)頁
上述程序可以計算的層很多，基本上看你機器能力了，這點是C語言不能比擬的，JavaScript的靈活性太好了。
這個題目實際來自海盜分財游戲，說的是17人循環(huán)排隊，數(shù)到3則該人拉出去砍了，再次報數(shù)從1到3，……直到最后一人留下。
這首先要有個17個數(shù)的a數(shù)組，假設(shè)開始是1~17，一輪報數(shù)砍掉的歸0，比如a[2]=3，拉出來砍掉就是a[2]=0;
有了這樣的假設(shè)，統(tǒng)計活著的人就很必要，所以有函數(shù)：
#include<stdio.h> #define N 17 int Live(int a[ ]) {int i,m=0;for(i=0;i<N;i++)if(a[i]>0) m++;return m; } 每次砍掉一批人，直到活下1人，主程序框架就是： while(Live(a)>1) { //每人報數(shù)、砍人 } 所以主程序就非常簡單： main() { int i,j,a[N],n=0; for(i=0;i<N;i++) a[i]=i+1; while(Live(a)>1){for(i=0;i<N;i++){if(a[i]!=0) n++; //活著的計數(shù)，死的不算if(n==3) {a[i]=0;n=0;}//數(shù)到3砍人、點名的歸0}//每輪點名后顯示結(jié)果，分析吧。for(i=0;i<N;i++)printf("%4d",a[i]);printf("\n");} }把上述程序轉(zhuǎn)到JavaScript是很容易的事情，對JavaScript、你甚至可以隨便指定人或者隨便指定點名人數(shù)，所以有以下的界面：
<INPUT TYPE="button" ID=BUTTON1 value="點名開殺" onclick='fun()'/> <INPUT TYPE="input" ID="text1" /> <INPUT TYPE="input" ID="text2" />我們在text1中輸入排隊的人數(shù)、在text2中輸入砍人的計數(shù)人數(shù)、如上例的3人。注意按鈕的事件響應(yīng)函數(shù)是fun()。
上述程序的修改很容易，注意點在：
1 修改main( )為fun( )
2 修改printf()為document.write( )
3 修改”\n”為”
”
整個程序就是：
文件:a23.htm
作業(yè)5.7
C語言畫一個sin(x)的曲線
對C語言而言，如果僅僅是在命令提示符下顯示結(jié)果的那種程序，要完成漂亮的圖形顯示，基本是不可能的事情，但計算機畢竟是從沒圖形的顯示器開始的，所以用字符模擬個曲線也不是完全做不到。
首先是要設(shè)計一個虛擬的屏幕，這個屏幕大小假定就是AX*AY，一般的，AX不超過80，而AY可以大點，實際為了美觀，AY也在40以內(nèi)。AX取80的原因是：當年黑屏幕下的DOS操作系統(tǒng)，屏幕一行就顯示80個字符，一屏幕也就40行。
所以我們在內(nèi)存中先申請一個二維數(shù)組:
char s[40][80];首先，把這個數(shù)組里全部裝空格，就是：
for(I=0;I<40;I++)for(j=0;j<80;j++)s[I][j]=’ ‘;我們要在20行上畫一個X軸，就是：
n=20; for(i=0;i<AX-1;i++)s[n][i]='-'; s[n][79]=’>’;//畫個X軸的箭頭同理畫Y軸，就是：
for(i=0;i<AY-1;i++)s[i][0]='|'; s[0][0]='^';//就是Y軸的箭頭因為X坐標有80個單位，要畫360度的sin(x)、所以每個單位就相當于23.1416i/80,于是有：
for(i=0;i<80;i++){n=40/2;x=2*3.141592654*i/80;y=sin(x);n=n-n*y;s[n][i]='*';//畫*點}有了這個數(shù)組后，就是打印而已：
for(i=0;i<40;i++)for(j=0;j<80;j++)printf("%c",s[i][j]);打印出的就是sin(x)的曲線。
完整的程序就是：
//顯示SIN（X）的曲線
#include<stdio.h> #include<math.h> #define AX 80 #define AY 41 char s[AY][AX]; void cScreen() { int i,j,n; for(i=0;i<AY;i++)for(j=0;j<AX;j++)s[i][j]=' ';n=AY/2; for(i=0;i<AX-1;i++)s[n][i]='-'; s[n][AX-1]='>';s[n+1][AX-1]='X';for(i=0;i<AY-1;i++)s[i][0]='|'; s[0][0]='^';s[0][1]='Y';s[n][0]='+';s[n+1][1]='0'; }void Display() { int i,j; for(i=0;i<AY;i++)for(j=0;j<AX;j++)printf("%c",s[i][j]); }main() { int i,j,n; double x,y; cScreen();for(i=0;i<AX;i++){n=AY/2;x=2*3.141592654*i/AX;y=sin(x);n=n-n*y;s[n][i]='*';} Display(); }這個程序只不過把建立坐標系、顯示等都分開了而已。
C語言的這個思路很重要，關(guān)鍵是我們設(shè)計了一個s[ ][ ]這樣的數(shù)組做虛擬屏幕，而實際中，顯示器的緩存就是這樣的，只不過它的存儲量要比s數(shù)組大的多，僅僅一個1024X768的24位顯示，一屏幕需要：1024X768X3/1024（K）字節(jié)，考慮到動畫的切換，目前實際一個顯示卡的存儲都在512M上下，就相當于s數(shù)組的大小。題目5.18同上例。
但對JavaScript而言，要這么顯示sin()簡直是糟蹋行當。如何產(chǎn)生更加美觀的函數(shù)圖形，我們在下一講中介紹。
螺旋線訪問二維數(shù)組
在C中構(gòu)造這樣的路徑數(shù)組，分別按行、列組織路徑。就是：
int r[]={0,1,2,3,4,4,4,4,3,2,1,1,2}; int c[]={0,0,0,0,0,1,2,3,3,3,3,2,2}; int A[5][5]={{1,16,15,14,13},{2,17,24,23,12},{3,18,25,22,11},{4,19,20,21,10},{5, 6,7,8,9} }; int n,m; for(I=0;I<13;I++) {n=r[I];m=c[I];printf(“%d ”,A[n][m]); }自己在JavaScript里完成上述程序，應(yīng)該是不難的，自己修改就是。
總結(jié)
以上是生活随笔為你收集整理的基于JavaScript 数组的经典程序应用源码（强烈建议收藏）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【ArcGIS微课1000例】0007：
- 下一篇： 【ArcGIS微课1000例】0008：