导航菜单
  • 首页
  • 首页>前端万博manbext备用网址>JavaScript万博manbext备用网址

    JavaScript基础11:Function函数的基础介绍

    记得大学学习C语言的时候,刚毕业的研究生老师讲到函数,什么构造函数,形参,实参,把我搞得晕乎乎的。结果,期末考试C语言没及格,当然,全班几乎都没有及格。

    第二学期换了一个资历深厚的教授给我们补了一学期的C语言,大家的期末成绩几乎都是80分以上,看来,姜还是老的辣。所以,我们多学了一学期的C语言,导致C++没学!!

    一、函数的定义

    简单一点就是“写一次代码,多次重复使用。”

    函数就是一段用来执行特定任务的代码块,可以有名字,也可以没有名字,可以有参数,也可以没有参数。

    二、创建函数

    1、函数声明

    函数声明定义一个具有指定参数的函数。

    function name([param,[, param,[..., param]]]) {
       [statements]
    }

    name

    函数名

    param

    要传递给函数的参数的名称。不同引擎中的最大参数数量不同。

    函数参数是函数在被调用时接收到的实际值。在函数内部,参数表现为局部变量。

    statements

    包含函数体的语句。

    一个被函数声明创建的函数是一个 Function 对象,具有 Function 对象的所有属性、方法和行为。

    默认情况下,函数是返回 undefined 的。想要返回一个其他的值,函数必须通过一个 return 语句指定返回值。

    console.log(filterNum([1,2,'1','',0,' ',null,undefined,'a',NaN]));
    function filterNum(arr){
    var newArr=[];
    for(var i=0;i<arr.length;i++){
    if(!isNaN(arr[i])  && typeof arr[i]==="number"){
    newArr.push(arr[i]);
    }
    }
    return newArr;
    }
    console.log(add(1,10));
    console.log(add(1,100));
    console.log(add(10,200));
    console.log(add(1,1000000));
    
    function add(start,end){
    var sum=0;
    for(var i=start;i<=end;i++){
    sum+=i;
    }
    return sum;
    }

    函数的调用一般有三种方式:

  • 事件发生时(用户单击按钮时)

  • 当从javascript代码调用(调用)它时

  • 自动(自动调用)

  • 利用函数声明创建的函数对象,可以在函数声明之前调用。因为函数声明被提升成函数定义,也就是有预解析的过程。

    当JavaScript到达return语句时,该函数将停止执行,并返回值。

    函数调用有没有( )很重要。没有( )引用函数对象,有( )引用函数结果。

    var oBtn=document.querySelector("#btn");
    
    oBtn.onclick=function(){
    message('现在点击了我');
    };
    
    oBtn.onclick=msg; //不能加上(),加了()表示执行结果,没有点击就已经执行了。不加()表示引用函数,需要等到点击之后才会调用执行。
    
    function message(str){
    alert(str);
    }
    
    function msg(){
        alert("没有参数的函数");
    }

    2、函数表达式

    function 关键字可以用来在一个表达式中定义一个函数。

    let function_expression = function [name]([param1[, param2[, ..., paramN]]]) {   statements};

    name

    函数名称。可被省略,此种情况下的函数是匿名函数(anonymous)。 函数名称只是函数体中的一个本地变量。

    paramN

    被传递给函数的一个参数名称。一个函数至多拥有 255 个参数。

    statements

    构成函数体的语句。

    函数表达式(function expression)非常类似于函数声明(function statement)。

    并且两者拥有几乎相同的语法。函数表达式与函数声明的最主要区别是函数名称(function name),在函数表达式中可省略它,从而创建匿名函数(anonymous functions)。

    一个函数表达式可以被用作一个即时调用的函数表达式,它一旦定义就运行。

    JavaScript中的函数表达式没有提升,不像函数声明,在定义函数表达式之前不能使用函数表达式。

    console.log(filterNum([1,2,'1','',0,' ',null,undefined,'a',NaN])); //filterNum is not a function
    var filterNum= function(arr){
    var newArr=[];
    for(var i=0;i<arr.length;i++){
    if(!isNaN(arr[i])  && typeof arr[i]==="number"){
    newArr.push(arr[i]);
    }
    }
    return newArr;
    }

    更多情况下被当作回调函数使用:

    button.addEventListener('click', function(event) {
        console.log('button is clicked!')
    })

    三、函数的调用

    1、函数声明的直接函数名( )调用。

    myFunction(5,10); 
    function myFunction(a, b) {
      return a * b;
    }

    2、函数表达式的可以用变量名调用。

    var x = function (a, b) {return a * b};
    var z = x(4, 3);

    存储在变量中的函数不需要函数名。它们总是使用变量名来调用。

    3、自己调用自己

    能够自己调用自己的必须是函数表达式。

    函数声明是不能自己调用自己的。

    在函数表达式后跟(),则函数表达式将自动执行。

    必须在函数周围添加括号,以表明它是函数表达式。

    (function(){alert('不用别人调用我,我自启动了')})();

    四、函数的应用

    1、函数可以作为一个返回值赋值给变量。

    function myFunction(a, b) {
      return a * b;
    }
    
    var x = myFunction(4, 3);

    2、函数如果有返回值,可以链式使用,可以用在表达式中。

    function myFunction(a, b) {
    return a * b;
    }
    
    var a = myFunction(4.125, 3.252).toFixed(2) * 2;
    console.log(a); //26.82

    五、函数作为对象的属性和方法

    用typeof运算符返回函数的类型为function,但其实,函数依然是object。依然拥有属性和方法。

    1、属性

    arguments.length返回调用函数时接收的参数数量。

    function myFunction(a, b) {
      return arguments.length;
    }

    arguments 是一个对应于传递给函数的参数的类数组对象。

    arguments对象是所有(非箭头)函数中都可用的局部变量。可以使用arguments对象在函数中引用函数的参数。

    此对象包含传递给函数的每个参数,第一个参数在索引0处。例如,如果一个函数传递了三个参数,可以以如下方式引用他们:

    arguments[0]
    arguments[1]
    arguments[2]

    arguments对象不是一个 Array 。它类似于Array,但除了length属性和索引元素之外没有任何Array属性。例如,它没有 pop 方法。但是它可以被转换为一个真正的Array:

    var args = Array.prototype.slice.call(arguments);
    var args = [].slice.call(arguments);
    // ES2015
    const args = Array.from(arguments);
    const args = [...arguments];
    function test() {
    var s = "";
    for (var i = 0; i < arguments.length; i++) {
    s += arguments[i] + ",";
    }
    return s;
    }
    console.log(test("name", "age"));
    输出结果:
    name,age

    2、方法

    toString()方法可以把函数转成一个字符串。

    function myFunction(a, b) {
    return a * b;
    }
    
    var txt = myFunction.toString();
    console.log(txt);
    //function myFunction(a, b) {
                return a * b;
            }


    点赞


    1
    保存到:

    相关文章

    发表评论:

    ◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。

    Top