上节,学完循环了~

现在学Javascript的函数和数组。

JavaScript语法

每一种语言都有自己的语法规则,JS语法与Java很像,所以学习起来比较容易。JS中也一样有变量,语句,函数,数组等常见语言组成元素。

1.一般函数

格式:

function  函数名(形式参数...)
{
执行语句;
return 返回值;
}

函数是多条执行语句的封装体,只有被调用才会被运行。

注意:调用有参数的函数,但没有给其传值,函数一样可以运行,或者调用没有参数的函数,给其传值,该函数也一样运行。

说的简单点:只要写了函数名后面跟了一对小括号,该函数就会运行。那么传递的参数呢?

其实,在函数中有一个参数数组对象(arguments),该对象将传递的参数都封装在一个数组中。

例:

function demo()//定义函数。
{
alert(arguments.length);
}

demo(“hello”,123,true);//调用函数。

那么弹出的对话框结果是3,如果想得到所有的参数值,可以通过for循环遍历该数组。

for(var x=0; x<arguments.length; x++)
{
alert(arguments[x]);
}

为了增强阅读性,最好按照规范,按定义好的形式参数传递实际参数。

函数在调用时的其他写法:

var show = demo();//show变量接收demo函数的返回值。

var show = demo;//这种写法是可以的,意为show和demo代表同一个函数。

//那么该函数也可以通过show()的方式运行。

代码演示1:

<html>
<head>
<title>javascript函数用法演示</title>
</head> <body>
<!--
※java中函数定义的格式:
int sum(int a,int b){
....
return s
} ※js中函数定义的格式:
function sum(a,b){
....
return s
}
▲▲js中的函数可以理解成一个function类型的对象
--> <script type="text/javascript">
//※浏览器对js代码是边解析边执行的
//注意,函数的调用 应该在浏览器解析完 该函数的定义 之后进行
//调用
hello();//ie11中无效---因为浏览器解析该语句时,此函数还没有定义
</script> <script type="text/javascript">
//定义---无参函数
function hello(){
document.write("hello function!");
}
hello();//调用 //定义---有参函数
function add(a,b){
var s = a+b;
return s;
}
document.write("<br/>")
document.write("s="+add(10,23));
</script> </body> </html>

360浏览器8.1 演示1结果:

代码演示2:

<html>
<head>
<title>javascript函数用法演示2---一点小细节</title>
</head> <body>
<script type="text/javascript">
function show(x, y) {
document.write(x + "," + y);
document.write("<br/>");
}
show(23, 22);//23,22
show(23); //23,undefined
show(); //undefined,undefined
show(23, 22, 11);//23,22 后面的一个参数函数接收了但没有用 //函数的参数全部是js内部用一个arguments数组来接收与存放的---该对象是js内部隐含帮我们做的,我们可以访问到这个数组对象
function show2(x, y) {
arguments[0] = 1000;//可以把形参x的值改掉
document.write(x + "," + y + "<br/>");
for ( var i = 0; i < arguments.length; i++) {
document.write(arguments[i] + ",");
}
}
show2(11, 22, 33, 44);
document.write("<br/>");
//※综上,函数的技术细节:
//1, js中的函数是没有重载,只以函数名来识别的---其实函数名就是一个function对象的引用的名字
//2, js函数中有一个内部维护的arguments数组来接收与保存形参
</script> <script type="text/javascript">
function getValue() {
document.write("aa");
document.write("<br/>");
return 100;
}
var v = getValue();
document.write("v=" + v);
document.write("<br/>");
var v2 = getValue; //相当于getValue把引用值传给v2,因此v2也是一个“function对象”----getValue和v2都是引用变量
document.write("v2=" + v2);//其实是输出v2对象的toString()
document.write("<br/>");
document.write("v2=" + v2()); //调用v2这个函数对象---调用函数
document.write("<br/>");
</script> </body> </html>

360浏览器8.1 演示2结果:

动态函数

通过Js的内置对象Function实现。

例:

    var demo = new Function(“x,y”;”alert(x+y);”);
demo(4,6);
如同:
function demo(x,y)
{
alert(x+y);
}
demo(4,6);

不同的是,动态函数,参数以及函数体都可以通过参数进行传递,可以动态指定。

匿名函数

   格式 : function(){…}

   例:

     var demo = function(){…}

    demo();

通常在定义事件属性的行为时较为常用。

例:

function test()
{
alert(“load ok”);
}
window.onload = test;

可以写成匿名函数的形式:

window.onload = function()
{
alert(“load ok”);
}

匿名函数就是一种简写格式。

代码演示:

<html>
<head>
<title>javascript函数用法演示3---动态函数,匿名函数</title>
</head> <body> <!--
※1※ 动态函数:使用的是js中内置的一个对象---- Function
注意,小写的function是用来声明的,而大写的Function是用来new对象的 //把下面的函数写成动态函数
function add(a,b){
var s = a+b;
return s;
}
-->
<script type="text/javascript">
//把函数的形参用第1个参数传入,函数体中的代码用第2个参数传入----可以通过调用者动态传入函数体,因此非常灵活,该思想类似Java当中的类反射。
var add = new Function("a,b","var s = a+b; return s; ");
document.write( add(12,13) );
</script> <!--
※2※ 匿名函数: 没有函数名的函数。这种方式我们以后在事件处理时会经常使用,类似Java中的匿名内部类经常用在事件监听器中一样
-->
<script type="text/javascript">
var fun= function(a,b){
return a+b;
};
document.write( fun(2,3) ); </script> <!-- 用匿名函数给按钮添加事件绑定 -->
<button id="btn1">一个按钮</button>
<script type="text/javascript">
btn1.onclick=function(){
alert('aa');
};
</script> </body> </html>

360浏览器8.1 演示结果:



弹窗:

5.数组

方便操作多元素的容器,可以对其中的元素进行编号。

特点:可以存任意元素,长度是可变的。

格式:

var arr = new Array();
arr[0] = “hello”;
arr[1] = 123;
var arr = [‘hello’,123,true,”abc”];

通过遍历即可对数组进行基本操作。

for(var x=0; x<arr.length; x++)
{
alert(arr[x]);
}

代码演示:

<html>
<head>
<title>javascript数组用法演示</title>
</head> <body>
<script type="text/javascript">
//数组定义的方式1: 定义时直接赋初值
var arr =[12,34,2,-3,90,12];
document.write( typeof(arr) );
//object
document.write("<br/>");
document.write("len:" + arr.length);
document.write("<br/>");
//遍历数组
for(var x=0;x<arr.length;x++){
document.write("arr["+x+"]="+ arr[x]+"&nbsp;");
}
document.write("<br/>"); arr[0]=-10;
arr[7]=66;//数组可以自动增长,且arr[6]没有赋值则是undefined document.write("len:"+arr.length+" 数组长度自动加长");
document.write("<br/>"); for(var x=0;x<arr.length;x++){
document.write("arr["+x+"]="+ arr[x]+"&nbsp;");
}
document.write("<br/>");
document.write("<hr/>"); var arr2=[]; document.write("arr2.length="+arr2.length);//0
document.write("<br/>"); arr2[1]=10;
for(var x=0;x<arr2.length;x++){
document.write("arr2["+x+"]="+ arr2[x]+"&nbsp;");
}
document.write("<br/>"); //※※错误的声明方式--数组
//int[] arr3 ={1,2,3};
//var[] arr3 = [1,2,3];//错的,[]代表的是数组类型,而js中,所有数据类型只有一个var声明,不存在“var[]”这种类型 document.write("同一个数组的元素可以是不同类型!!!<br/>");
var arr4=[1,2,3,100];
arr4[0]="abc";
arr4[1]=true;
for(var x=0;x<arr4.length;x++){
document.write("arr4["+x+"]="+ arr4[x]+"&nbsp;");
}
document.write("<br/>"); //※※综上,js数组的两个特点:
//1,长度是可变的
//2,元素的类型是任意的
</script> <hr/> <script type="text/javascript">
//数组定义的方式2: 使用js中的Array对象来定义
var arr10 = new Array(); //※ 空参
for(var x=0;x<arr10.length;x++){
document.write("arr10["+x+"]="+ arr10[x]+"&nbsp;");
}//什么都没有,因为长度是0
document.write("arr10.length="+arr10.length);//0
document.write("<br/>"); var arr11 = new Array(8); //※ 一个参数,代表的是数组的长度
arr11[2]=12;
arr11[3]="abc";
for(var x=0;x<arr11.length;x++){
if(x==2||x==3){
document.write("<font color=red >arr11["+x+"]="+ arr11[x]+"&nbsp;</font>");
}else{
document.write("arr11["+x+"]="+ arr11[x]+"&nbsp;");
}
}
document.write("<br/>"); var arr12 = new Array(10,11,12); //※ 多个参数,代表的是数组元素值
arr12[5]="aaa";
for(var x=0;x<arr12.length;x++){
document.write("arr12["+x+"]="+ arr12[x]+"&nbsp;");
}
document.write("<br/>"); </script> </body> </html>

360浏览器8.1 演示结果:

接下来将函数和数组结合起来用用,写个排序和二分查找。

<html>
<head>
<title>javascript数组与函数练习</title>
</head> <body>
<script type="text/javascript">
//写一个获取数组中元素最大值的函数
//若有多个,返回第一个
function getMax(arr){
var max=0;//最大值的下标
for(var x=1;x<arr.length;x++){
if(arr[x]>arr[max]){
max = x;
}
}
return arr[max];
}
//调用
var arr=[23,-3,45,0,-100,47,22];
var v = getMax(arr);
document.write("数组最大值的下标:"+v);
document.write("<br/>");
document.write("数组最大值:"+v);
document.write("<br/>"); //数组选择排序
function sortArray(arr){
for(var x=0;x<arr.length-1;x++){
var min=x;
for( var y=x+1;y<arr.length;y++){
if(arr[min]>arr[y]){
min=y;
}
}
if(min!=x){
swap(arr,x,min);
}
}
}
function swap(arr,x,y){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
document.write("<hr/>");
document.write("排序前:"+arr+"<br/>");
sortArray(arr);
document.write("排序后:"+arr+"<br/>"); //我们的输出函数---把内容输出到页面且换行
function println(str){
document.write(str+"<br/>");
}
println(arr);
sortArray(arr);
println(arr); //到数组当中查找元素
function searchElement(arr,key){
for(var x=0;x<arr.length;x++){
if(arr[x]==key){
return x;
}
}
return -1;
}
println( searchElement(arr,0) );
println( searchElement(arr,123) ); </script> <script type="text/javascript">
//二分查找
function binarySearch(arr,key){
var max,min,mid;
min=0;
max=arr.length-1;
while(min<=max){
mid = (max+min)>>1;
if(key>arr[mid]){//落在右边
min = mid+1;
}else if(key<arr[mid]){//落在左边
max = mid-1;
}else{
return mid;
}
}
return -1;
}
println("二分查找结果:");
println( binarySearch(arr,0) );
println( binarySearch(arr,123) ); //数组反转
function reverseArray(arr){
for(var start=0,end=arr.length-1; start<end; start++,end--){
swap(arr,start,end);
}
}
reverseArray(arr);
println("反转之后:"+arr);
</script> </body> </html>

360浏览器8.1 演示结果:

JS中的全局变量和局部变量解答:

代码演示:

<html>
<head>
<title>javascript中的全局变量与局部变量</title>
</head> <body>
<!--
全局变量: js中,直接在脚本当中定义的变量全都是全局变量。
局部变量: 在函数中定义的变量是局部的。
--> <script type="text/javascript">
function println(str){
document.write(str+"<br/>");
}
var a=100;
println("遍历输出0-9:");
for(var x=0;x<10;x++){
println("x="+x);
}
</script> <script type="text/javascript">
println("aaaa="+a);
println("xxxx="+x); function aa(){
var y=123;
document.write("y="+y);
return;
}
aa();
document.write("<br/>"); println("yyyy="+y);//不能访问函数内部定义的变量,因为它是局部的
</script> <!-- 一点小细节 -->
<script type="text/javascript">
var n=3;//全局变量n
function abc(n){//局部变量n---形参是方法内部声明的局部变量,值由arguments[0]在使用n时临时赋给它的
n=6;
}
abc(n);//把x传给方法abc,并在其中试图对该值进行更改--未遂!----本质上实参n是把值传给了函数中的arguments数组了
println("n="+n);
</script> </body> </html>

360浏览器8.1 演示结果:

下一次就学习JS的对象了。毕竟JS是基于对象的语言。

JavaScript---网络编程(2)-函数与数组的更多相关文章

  1. c/c++ 网络编程 getaddrinfo 函数

    网络编程 getaddrinfo 函数 解析网址,返回IP地址. 例子: #include <iostream> #include <string.h> #include &l ...

  2. c/c++ 网络编程 bind函数

    网络编程 bind函数 bind的作用是确定端口号. 正常处理都是先bind,然后listen 如果不bind,直接listen,会是什么结果? 内核会自动随机分配一个端口号 例子: #include ...

  3. JavaScript高级编程——引用类型、Array数组使用、栈方法

    JavaScript高级编程——引用类型.Array数组使用.栈方法 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999 ...

  4. UNIX网络编程——select函数的并发限制和 poll 函数应用举例

    一.用select实现的并发服务器,能达到的并发数,受两方面限制 1.一个进程能打开的最大文件描述符限制.这可以通过调整内核参数.可以通过ulimit -n来调整或者使用setrlimit函数设置,  ...

  5. Linux网络编程-readn函数、writen函数、readline函数实现

    readn函数功能:在网络编程的读取数据中,通常会需要用到一个读指定字节才返回的函数,linux系统调用中没有给出,需要自己封装. readn实现代码: int readn(int fd, void ...

  6. UNIX网络编程——fcntl函数

    fcntl函数提供了与网络编程相关的如下特性: 非阻塞式I/O.  通过使用F_SETFL命令设置O_NONBLOCK文件状态标志,我们可以把一个套接字设置为非阻塞型. 信号驱动式I/O. 通过使用F ...

  7. 健壮的网络编程IO函数-RIO包

    RIO包 简介 Rio包即为Robust io函数包.包中函数是对Linux基本I/O函数的封装,使其更加健壮.高效,更适用于网络编程. 分析 Rio包由rio_t结构体和系列函数组成. 首先是两个不 ...

  8. 网络编程select函数

    select函数的作用: 在编程的过程中,经常会遇到许多阻塞的函数,好像read和网络编程时使用的recv, recvfrom函数都是阻塞的函数,当函数不能成功执行的时候,程序就会一直阻塞在这里,无法 ...

  9. linux c网络编程之函数

    1. struct protoent *protocol=getprotobyname(char *p); 功能:通过协议名获取协议类型信息 解释:p为字符串指针,指向一个协议名,如icmp,stru ...

随机推荐

  1. 通过 OpenNI 建立 Kinect 3D Point Cloud

    這篇還是算延續前一篇的<透過 OpneNI 合併 Kinect 深度以及彩色影像資料>.在可以透過 OpenNI 讀取到 Kinect 的深度.色彩資訊之後,其實就可以試著用這些資訊,來重 ...

  2. Struts2配置文件_常量属性_独立测试分析

    <constant name="struts.devMode" value="true" /> 设置开发模式,可以了解详细信息,该属性指定视图标签默 ...

  3. 排序算法——QuickSort、MergeSort、HeapSort(C++实现)

    快速排序QuickSort template <class Item> void quickSort (Item a[], int l, int r) { if (r<=l) ret ...

  4. IOS代理

    之前看过一些关于代理的资料,始终感觉还是很模糊,最近抽出一段空闲的时间,将这块内容整理下: 什么是代理,顾名思义就是帮别人做些事情,比如买房子,当我们买房子时,我们一般会找房屋中介,因为他们就是干这件 ...

  5. docker 挂在本地目录

    docker run -i -t -v /home/:/opt/data jenkins /bin/bash    运行jenkins,把本地中的/home/   挂载到虚拟机中的/opt/data/ ...

  6. 认识linux权限

    首先,我们来了解下linux系统的用户和用户组 场景:公司里有两个项目组:小组A和小组B:A.B.C是小组A的成员,甲.乙是小组B的成员.为了保密起见,小组内的进度.文档.程序都有小组内公开.比如小组 ...

  7. 《APUE》第三章笔记(2)

    read函数 调用read函数从打开的文件中读数据. #include <unistd.h> ssize_t read(int filedes, void *buf, size_t nby ...

  8. 利用OllyDebug查看程序调用的dll模块

    最近在做一个Qt项目,在产品发布的时候一直为找不到程序到底缺少了哪些dll组件而困扰.具体问题是,在我的项目中使用到了QMediaPlayer播放一段音频文件,我使用的开发环境的Win7 32位,而在 ...

  9. Laravel学习第一天(创建laravel项目、路由、视图、blade模板)

    创建laravel项目 composer create-project laravel/laravel learnlv 4.1.* 查看帮助:composer create-project    使用 ...

  10. 聊聊Web App、Hybrid App与Native App的设计差异

    目前主流应用程序大体分为三类:Web App.Hybrid App. Native App. 一.Web App.Hybrid App.Native App 纵向对比 首先,我们来看看什么是 Web ...