JavaScript---网络编程(2)-函数与数组

谙忆 2021-01-21 12:54:24
编程 网络 函数 javascript javascript---


上节,学完循环了~ 现在学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是基于对象的语言。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

版权声明
本文为[谙忆]所创,转载请带上原文链接,感谢
https://cloud.tencent.com/developer/article/1777201

  1. 【计算机网络 12(1),尚学堂马士兵Java视频教程
  2. 【程序猿历程,史上最全的Java面试题集锦在这里
  3. 【程序猿历程(1),Javaweb视频教程百度云
  4. Notes on MySQL 45 lectures (1-7)
  5. [computer network 12 (1), Shang Xuetang Ma soldier java video tutorial
  6. The most complete collection of Java interview questions in history is here
  7. [process of program ape (1), JavaWeb video tutorial, baidu cloud
  8. Notes on MySQL 45 lectures (1-7)
  9. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  10. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  11. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  12. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  13. 【递归,Java传智播客笔记
  14. [recursion, Java intelligence podcast notes
  15. [adhere to painting for 386 days] the beginning of spring of 24 solar terms
  16. K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
  17. K8s Series Part 8 (service, endpoints and high availability kubeadm deployment)
  18. 【重识 HTML (3),350道Java面试真题分享
  19. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  20. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  21. [re recognize HTML (3) and share 350 real Java interview questions
  22. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  23. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  24. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  25. RPC 1: how to develop RPC framework from scratch
  26. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  27. RPC 1: how to develop RPC framework from scratch
  28. 一次性捋清楚吧,对乱糟糟的,Spring事务扩展机制
  29. 一文彻底弄懂如何选择抽象类还是接口,连续四年百度Java岗必问面试题
  30. Redis常用命令
  31. 一双拖鞋引发的血案,狂神说Java系列笔记
  32. 一、mysql基础安装
  33. 一位程序员的独白:尽管我一生坎坷,Java框架面试基础
  34. Clear it all at once. For the messy, spring transaction extension mechanism
  35. A thorough understanding of how to choose abstract classes or interfaces, baidu Java post must ask interview questions for four consecutive years
  36. Redis common commands
  37. A pair of slippers triggered the murder, crazy God said java series notes
  38. 1、 MySQL basic installation
  39. Monologue of a programmer: despite my ups and downs in my life, Java framework is the foundation of interview
  40. 【大厂面试】三面三问Spring循环依赖,请一定要把这篇看完(建议收藏)
  41. 一线互联网企业中,springboot入门项目
  42. 一篇文带你入门SSM框架Spring开发,帮你快速拿Offer
  43. 【面试资料】Java全集、微服务、大数据、数据结构与算法、机器学习知识最全总结,283页pdf
  44. 【leetcode刷题】24.数组中重复的数字——Java版
  45. 【leetcode刷题】23.对称二叉树——Java版
  46. 【leetcode刷题】22.二叉树的中序遍历——Java版
  47. 【leetcode刷题】21.三数之和——Java版
  48. 【leetcode刷题】20.最长回文子串——Java版
  49. 【leetcode刷题】19.回文链表——Java版
  50. 【leetcode刷题】18.反转链表——Java版
  51. 【leetcode刷题】17.相交链表——Java&python版
  52. 【leetcode刷题】16.环形链表——Java版
  53. 【leetcode刷题】15.汉明距离——Java版
  54. 【leetcode刷题】14.找到所有数组中消失的数字——Java版
  55. 【leetcode刷题】13.比特位计数——Java版
  56. oracle控制用户权限命令
  57. 三年Java开发,继阿里,鲁班二期Java架构师
  58. Oracle必须要启动的服务
  59. 万字长文!深入剖析HashMap,Java基础笔试题大全带答案
  60. 一问Kafka就心慌?我却凭着这份,图灵学院vip课程百度云