基于JavaScript 数组的经典程序应用源码（强烈建议收藏）

Posted 2021-08-16 刘一哥GIS

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于JavaScript 数组的经典程序应用源码（强烈建议收藏）相关的知识，希望对你有一定的参考价值。

文章目录

设计一个数组输入并显示的程序。
数组输入和显示
选择排序
选择排序
排序程序包
排序网页
杨辉三角形
杨辉三角形网页
C语言画一个sin(x)的曲线
螺旋线访问二维数组

javascript数组的定义、使用都是非常简单的，仅仅定义的话，就使用：

var a=new Array();

对于JavaScript的数组，大小不用管的，爱用多大的下标就用多大。

设计一个数组输入并显示的程序。

对后续的实验而言，要求能有一个数组、能输入数据、并显示结果，为满足这个要求，程序至少要有三个按钮：数据输入、数据显示、数组清除，所谓数组清除，就是当你的数据输入错误后，要能清除掉这个数组、给使用者重新输入的机会。后面肯定就是个文本框了。所以这种情况下，控件说明就是这样的：

<INPUT TYPE="button" ID=BUTTON1 value="数据输入" onclick='fIn()' />
<INPUT TYPE="button" ID=BUTTON2 value="数据输出" onclick='fOut()' />
<INPUT TYPE="button" ID=BUTTON2 value="数据清除" 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，这个网页文件，把上述控件说明写进去，并另存为a19.htm

分析：对于数组，我们定义一个就足够了，注意我们的数组、要在三个函数：fIn()、fOut()、fCls()中使用，所以，这个数组应该是全局的，同理，数组的大小也需要知道，我们用n来存储它的当前大小，n也应该是全局的、并且开始就是0，所以程序框架结构就是：

var a=new Array();
var n=0;
function fIn()
{
	…
}
function fOut()
{
	…
}
fCls()
{
	…
}

对于fIn()函数，就是从text1中读到数据并给到a[ ]，所以是：

function fIn()
{
		var d=parseInt(text1.value);
		a[n]=d;
		n++;
		text1.value=””;
}

n++的含义是准备写到下一个数组单元里。
而对fOut()，也很简单，就是：

function fOut()
{
	var i;
	for(i=0;i<n;i++)
	document.write(a[i]+"<br>");
}

对多个数据的显示，我们选择document.write()，这样可以显示很多数据。
而对于fCls()，则使用重新构造数组并将n=0，这样，旧的数据就全没了

function fCls()
{
	a=new Array();
	n=0;
}

把上述代码全部凑到一起，构成新的网页，实际通过上述很多范例的分析，我们知道基本过程就是：

（1）打开一个框架程序、如a2.htm这样的文件；
（2）在框架文件里先填加控件的说明，让你的程序有足够的控件；
（3）注意控件的事件响应函数的名称，不要搞错；
（4）补充你的事件响应函数，到此就算完成了。
（5）整个程序就是：

文件名：a19.htm
数组数据的输入和显示

<html>
	<HEAD>
	<TITLE>数组的输入</TITLE>
		<SCRIPT TYPE="TEXT/JAVASCRIPT">
		//这里要加入的是JAVASCRIPT的代码
		var n=0;
		var a=new Array();
		function fIn()
		{
			var d=parseInt(text1.value);
			a[n]=d;
			n++;
		}
		function fOut()
		{
		var i;
		for(i=0;i<n;i++)
			document.write(a[i]+"<br>");
		}
		function fCls()
		{
			a=new Array();
			n=0;
		}
		</SCRIPT>
	</HEAD>

	<BODY BGCOLOR="#FF1234">
		<DIV>
		<INPUT TYPE="button" ID=BUTTON1 value="数据输入" onclick='fIn()' />
		<INPUT TYPE="button" ID=BUTTON2 value="数据输出" onclick='fOut()' />
		<INPUT TYPE="button" ID=BUTTON3 value="数据清除" onclick='fCls()' />
		<INPUT TYPE="input" ID="text1" style="z-index: 100; left: 11px; width: 248px; position: absolute; top: 40px"/>
		</DIV>
	</BODY>
</HTML>

数组输入和显示

这个程序的关键地方是要把事件响应函数和每个控件对应起来。

有了上述程序，后面的作业就可以逐个去完成了。所谓框架、这个程序就算一个吧，在这个程序基础上继续补充，就会非常方便。

选择排序

排序是一个很有意思的事情，选择排序的程序就是：

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是一个数组，保存着待排数据，num是这个数组的大小。

查阅JavaScript，可以发现JavaScript得到数组长度很方便，就是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;
			}
		}
}

注意这个函数：它没针对a数组排序，实际就是说可以针对任何一个数组排序，所以需要一个主调函数去调用它，这个主调函数应该是一个按纽的事件响应函数。于是要再增加一个按纽：选择排序，就是：

注意它的事件响应函数是fSort()，于是补充函数：

function fSort()
{
	SelectSort(a);
}

这样，整个程序就是：
文件：a20.htm
选择排序

<HTML>
	<HEAD>
	<TITLE>选择排序</TITLE>
		<SCRIPT TYPE="TEXT/JAVASCRIPT">
		//这里要加入的是JAVASCRIPT的代码
		var n=0;
		var a=new Array();
		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;
					}
				}
		}
		function fIn()
		{
			var d=parseInt(text1.value);
			a[n]=d;
			n++;
			text1.value="";
		}

		function fOut()
		{
		var i;
		for(i=0;i<n;i++)
			document.write(a[i]+"<br>");
		}
		function fCls()
		{
			a=new Array();
			n=0;
		}

		function fSort()
		{
			SelectSort(a);
		}
		</SCRIPT>
	</HEAD>
	<BODY BGCOLOR="#FF1234">
		<DIV>
		<INPUT TYPE="button" ID=BUTTON1 value="数据输入" onclick='fIn()' />
		<INPUT TYPE="button" ID=BUTTON2 value="数据输出" onclick='fOut()' />
		<INPUT TYPE="button" ID=BUTTON3 value="数据清除" onclick='fCls()' />
		<INPUT TYPE="button" ID=BUTTON4 value="选择排序" onclick='fSort()' />
		<INPUT TYPE="input" ID="text1" style="z-index: 100; left: 11px; width: 248px; position: absolute; top: 40px"/>
		</DIV>
	</BODY>
</HTML>

选择排序

从上述程序我们可以看到：我们的程序已经开始逐渐变大，实际上选择排序并不是很大，但现在，我们要假设：我们的排序程序非常大，实际中，排序要好多种方法。

把一个很大的程序包装在一个网页里、并不明智，这会让这个网页打开过程非常慢，于是我们要想办法把网页内容分割成一些小包，比如我们的排序程序，要从a20.htm中分割出来。分割过程如下：

1 我们先打开记事本，把SelectSort()函数复制过去、另存为Sort.js；
2 把SelectSort()从a20.htm中删除掉、a20.htm另存为a21.htm;

现在我们肯定知道：a21.htm必须引用Sort.js才能进行排序，否则fSort()函数里根本找不到SelectSort()在哪里。引用一个程序包、如Sort.js，使用的语句是：

<SCRIPT TYPE="TEXT/JAVASCRIPT" src="sort.js"></SCRIPT>

注意src=””这个描述，它代表的是从本地硬盘、当前文件夹中引用这个程序包，也可以是这样的描述：

这代表着将从一个网站：www.abcd.com上获得这个程序包。
在实际中，由于浏览器都采用了多线程技术、网站也有很多端口，分割成小包文件下载、速度要快的多。

这样，整个程序就是：
文件名：Sort.js
排序函数包，目前仅仅是选择排序

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

排序程序包

文件：a21.htm
调用排序包的排序网页

<HTML>
	<HEAD>
	<TITLE>选择排序</TITLE>
		<SCRIPT TYPE="TEXT/JAVASCRIPT" src="sort.js"></SCRIPT>
		<SCRIPT TYPE="TEXT/JAVASCRIPT">
		//这里要加入的是JAVASCRIPT的代码
		var n=0;
		var a=new Array();
		function fIn()
		{
			var d=parseInt(text1.value);
			a[n]=d;
			n++;
			text1.value="";
		}

		function fOut()
		{
		var i;
		for(i=0;i<n;i++)
			document.write(a[i]+"<br>");
		}
		function fCls()
		{
			a=new Array();
			n=0;
		}

		function fSort()
		{
			SelectSort(a);
		}

		</SCRIPT>
	</HEAD>

	<BODY BGCOLOR="#FF1234">
		<DIV>
		<INPUT TYPE="button" ID=BUTTON1 value="数据输入" onclick='fIn()' />
		<INPUT TYPE="button" ID=BUTTON2 value="数据输出" onclick='fOut()' />
		<INPUT TYPE="button" ID=BUTTON3 value="数据清除" onclick='fCls()' />
		<INPUT TYPE="button" ID=BUTTON4 value="选择排序" onclick='fSort()' />
		<INPUT TYPE="input" ID="text1" style="z-index: 100; left: 11px; width: 248px; position: absolute; top: 40px"/>
		</DIV>
	</BODY>
</HTML>

排序网页

有了这样的程序包，我们编写其他排序函数也就方便的多。现在我们首先在Sort.js中补充一个冒泡排序函数，所以首先打开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;
		}
}

有了这个排序函数后，在a21.htm中修改：

function fSort()
{
	BubbleSort(a);
}

这样就能调用BubbleSort()函数进行排序了。如果你不希望每次都输入数据，你还可以修改成这样：

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….时候的系数。分析这个三角形还是不难发现其规律的。于是设计中可以用一个二维数组，先把每行最开始的数字和最末尾的数字写进去：

#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;
    //每行最开始的和最末尾的数字都是1
	for(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];

就是前一行的前一个+前一行的当前列的值。
于是整个程序就是：

#include<stdio.h>
main()
{
int i,j,a[10][10];
for(i=0;i以上是关于基于JavaScript 数组的经典程序应用源码（强烈建议收藏）的主要内容，如果未能解决你的问题，请参考以下文章 
 ArrayList 源码分析
 ArrayList详解
 2018.9.7  ArrayList
 基于线上的茶叶购买小程序（论文+程序设计源码+数据库文件）
 PHP四大经典排序算法源码
 图像分割技术及经典实例分割网络Mask R-CNN（含基于Keras Python源码定义）