数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS语言---数组演示</title>
<script type="text/javascript">
//JS中的数组非常重要，因为JS中只有一个容器---数组，它是Java中的数组与集合的综合
//JS中的数组长度可变，元素类型任意
///////数组定义方式1: 定义时直接赋初值////////
function a1() {
var arr = [1,2,3]; //※与Java不一样的地方1: 类型中没有"[]",数据是用"[]"封装 ,Java方式是: int[] arr={1,3,5}
//alert( typeof(arr) ); //object
alert( arr) ; //1,3,5 js中可以直接用数组名来输出它的内容
var sum = arr[0] + arr[2]; //对数组元素的引用和Java是一样的
alert( "arr[0]+arr[2]=" + sum ); //arr[0]+arr[2]=4
}
function a2() {
var arr = [1,2,3];
//※JS的数组有集合的功能,长度可以自动增长
arr[5] = 7;
alert( arr ); //1,2,3,,,7
//可以用arr.length读取数组当前的长度
alert( "变长后数组长度："+arr.length ); // 变长后数组长度：6
alert( arr[4] ); //undefined
//※JS的数组有集合的功能,元素类型可以任意
arr[3] = "abc";
arr[4] = 3.14;
alert( arr );
}
function a3() {
//可以先声明一个空数组，然后往里面不断赋值，因为JS中的数组长度是可变的
var arr = [];
arr[0] = 10;
arr[2] = 4;
arr[4] = true;
arr[1] = "abc";
arr[3] = "12.3";
alert( arr );
}
///////数组定义方式2: 用new对象的方式创建////////
function b1() {
var arr = new Array(1,3); //等价于 var arr = [];
arr[0] = 3.14;
arr[1] = true;
arr[2] = 10;
arr[3] = "abc";
alert( arr );
}
function b2 () {
/*
在创建时给参数:
1个参数时是长度，2个及以上参数为元素初始值
*/
var arr = new Array( 3 );
alert( arr + "--数组长度:" + arr.length );
var arr = new Array( 1, 2 );
alert( arr + "--数组长度:" + arr.length );
}
function c() {
//二维数组
var arr = [];
arr[0] = [1,false,3];
arr[1] = [3.14,2];
arr[2] = "abc1223";
arr[3] = true;
for ( var i = 0; i < arr.length; i++ ) {
for ( var j = 0; j < arr[i].length; j++ ) {
document.write( arr[i][j] +" " );
}
document.write( "<br />" );
}
document.write( arr[3] +" " );
}
</script>
</head>
<body>
<input type="button" value="定义方式1-演示1" onclick="a1();" />
<input type="button" value="定义方式1-演示2" onclick="a2();" />
<input type="button" value="定义方式1-演示3" onclick="a3();" />
<input type="button" value="定义方式2-演示1" onclick="b1();" />
<input type="button" value="定义方式2-演示2" onclick="b2();" />
<input type="button" value="演示二维数组" onclick="c();" />
</body>
</html>
函数
定义函数格式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/* js中定义函数的格式:
function 函数名(参数列表){ //注意Java是“参数类型列表”
函数体;
[return 返回值;]
}
*/
//1 无参无返回值的函数
function a1(){
alert("aa...");
}
//2 有参有返回值
function add(a, b){
var s = a+b;
return s;
}
function a2(){
var ab = add(100,200);
alert("ab="+ ab );
}
</script>
</head>
<body>
<input type="button" value="演示1" onclick="a1();">
<input type="button" value="演示2" onclick="a2();">
</body>
</html>
函数使用细节
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS语言演示---函数讲解2</title>
<script type="text/javascript">
/* js函数的一些小细节---与Java不一样的地方:
1. 函数调用与参数
js中的函数不存在重载。定义了函数，只要通过该函数名就可以调用它，
调用不调用跟参数没有关系。参数匹配时，对应参数有数据传递时就接收，
没有就是undefined,多余的就不接收。
js中的函数只以函数名来识别调用，跟参数没关系，参数只是用于传递数据。
每个函数内部都有一个arguments[]用于接收并存储所有实参，
不管函数定义时的参数列表有没有 定义或接收。
*/
function show(x,y){
alert(x+","+y);
}
function a1(){
show(1,8); //1,8
show(1); //1, undefined
show(1,2,3); //1,2
show("aa",0.6,3); //aa,0.6
}
function show2(x,y){
alert(x+","+y);
for(var i=0; i<arguments.length;i++){
document.write(arguments[i]+" ");
}
}
function a2(){
show2("aa", 0.6, 3, true);
}
</script>
<script type="text/javascript">
/* js函数的一些小细节---与Java不一样的地方:
2. 函数有别名
函数名只是函数对象的一个引用(变量)，
同一个函数对象可以有多个引用指向它(非声明时的名称就是别名)，
通过别名可以和原函数名一样访问该函数对象。
*/
function getNum(){
return 100;
}
function b1(){
var v = getNum();
alert( v );
}
function b2(){
//alert(getNum); //getNum.toString()
var aa=getNum;
//alert( aa ); //aa.toString()
alert( aa() ); //aa()和getNum()效果一样
}
</script>
</head>
<body>
<input type="button" value="演示1-1" onclick="a1();">
<input type="button" value="演示1-2" onclick="a2();">
<input type="button" value="演示2-1" onclick="b1();">
<input type="button" value="演示2-2" onclick="b2();">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS语言演示---函数讲解3</title>
<script type="text/javascript">
/* 可以用new的方式创建函数 ---动态函数，功能类似于Java中的类反射 */
function a1(){
var add = new Function("x,y","var sum; sum=x+y; return sum;");
var s = add(10,20);
alert("s="+s);
}
function a2(){
var p1 = document.getElementById("param").value;
var p2 = document.getElementById("fun1").value;
var f = new Function(p1,p2);
alert( f(10,20) );
}
//JS的函数内部可以再定义函数，而Java不允许这样
//匿名函数
function a3(){
var abc = function(a,b){
return a*b;
};
/*上面的代码等价于:
function ff(a,b){
return a*b;
}
var abc = ff;
*/
alert( abc(2,5) ); //通过别名调用匿名函数
}
function a4(){
/*以后事件注册时写成下面形式
btnObj.onclick=function(){
函数体.....
};
*/
var btnObj = document.getElementById("btn1");
btnObj.onclick=function(){
alert("aaaa....");
};
alert("功能添加完毕!");
}
</script>
</head>
<body>
<input type="button" value="演示1" onclick="a1();"> <br/><br/>
参数列表:<input type="text" id="param"/> <br/>
函数体:<input type="text" id="fun1"/> <br/>
<input type="button" value="演示2" onclick="a2();"> <br/><br/>
<input type="button" value="匿名函数" onclick="a3();"> <br/><br/>
<input type="button" value="没功能" id="btn1">
<input type="button" value="以后注册事件响应时常用匿名函数--给btn1注入功能" onclick="a4();"> <br/><br/>
</body>
</html>
数组与函数结合练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function getMax( arr ){
if ( typeof( arr ) == "undefined" ) {
return undefined;
}
var max;
if( arr.length > 0 ) {
max = arr[0];
for( var i = 1; i < arr.length; i++ ) {
if ( arr[i] > max ){
max = arr[i];
}
}
}
return max;
}
function sortArray( arr ){
if ( typeof( arr ) == "undefined" ) {
return undefined;
}
for ( var i = 0; i < arr.length - 1 ; i++ ) {
for ( var j = i + 1; j < arr.length ; j++ ){
if ( arr[i] > arr[j] ) {
swap( arr, i , j );
}
}
}
alert( arr );
}
function swap( arr, x, y ){
if ( typeof( arr ) == "undefined" ) {
return ;
}
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
function searchElement( arr, val ){
if ( typeof( arr ) == "undefined" ) {
return undefined;
}
for ( var i = 0; i < arr.length; i++ ) {
if( arr[i] == val ){
return i;
}
}
return -1;
}
function binarySearch( arr, val ){
if ( typeof( arr ) == "undefined" ) {
return undefined;
}
var left = 0;
var right = arr.length - 1;
var mid = Math.round( ( left + right ) / 2 - 0.5 );
while ( left <= right ){
if ( arr[mid] > val ){
right = mid - 1;
} else if ( arr[mid] < val ) {
left = mid + 1;
} else {
return mid;
}
mid = Math.round( ( left + right ) / 2 - 0.5 );
}
return -1;
}
function reverseArray( arr ){
if ( typeof( arr ) == "undefined" ) {
return undefined;
}
var left = 0;
var right = arr.length - 1;
while ( left < right ) {
swap( arr, left, right );
left++;
right--;
}
}
var arr = [ 1,-3,10,2.14,6666,-77777 ];
alert( getMax(arr) );
alert( searchElement( arr, -4 ) );
reverseArray( arr );
alert("反转后：" + arr );
sortArray( arr );
alert( binarySearch( arr, 10 ) );
</script>
</head>
<body>
<pre>
写一些具有如下功能的函数:
getMax(arr), sortArray(arr),
searchElement(arr,val), binarySearch(arr,val)
reverseArray(arr) 数组内容反转
</pre>
</body>
</html>
本文详细介绍了JavaScript中的数组和函数特性。包括数组的定义、操作、长度变化及元素类型的灵活性，函数的定义、调用细节、别名使用及动态创建方式。此外，还提供了数组与函数结合使用的实践案例。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
