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

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

上节,学完循环了~

现在学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结果:

image.png

代码演示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结果:

image.png

动态函数

通过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”);
        }• 1
• 2
• 3
• 4

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

代码演示:

<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>
目录
相关文章
|
2月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
48 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
2月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
3月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
3月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
3月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
51 2
|
3月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
45 3
|
3月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
56 4
|
3月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
59 4
|
3月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
57 1
|
3月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
31 2