zoukankan      html  css  js  c++  java
  • JavaScript函数

    定义函数:在JavaScript中,定义函数的方式如下

        /*定义函数*/
            function abs(x) {
                if( x >= 0) {
                    return x;
                } else {
                    return -x;
                }
            }

    function()指出这是一个函数定义;

    abs是函数的名称;

    (x)括号内列出函数的参数,多个参数以,分隔;

    {……}之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句。

    函数体内部的语句在执行时,一旦执行到return时,函数就执行完毕,并将结果返回,因此,函数内部通过条件判断和循环可以实现非常复杂的逻辑。

    如果没有return语句,函数执行完毕后也会返回结果,只是结果为undefined。

    由于JavaScript的函数也是一个对象,上述定义的abs()函数实际上是一个函数对象,而函数名abs可以视为指向该函数的变量。

    因此,第二种定义函数的方式:

         var abs = function (x) {
                if( x >= 0) {
                    return x;
                } else {
                    return -x;
                }
            };

    在这种↑方式下,function (x) {……}是一个匿名函数,它没有函数名。但是,这个匿名函数赋值给了变量abs,所以,通过变量abs就可以调用该函数。

    两种方法完全等价,第二种方式按照完整语法需要在函数体末尾加一个;,表示赋值语句结束。

         /*调用函数*/
            abs(10);// 10
            abs(-9);//9
            /*由于JavaScript允许传入任意个参数而不影响调用,因此传入的参数比定义的参数多也没关系,虽然函数内部并不需要*/
            abs(10,'blablabla');//10
            abs(-9,'hh','heihei',null);//9
            /*传入的参数比定义的少也没有问题*/
            abs();//返回NaN

    ↑此时abs(x)函数的参数x将受到undefined,计算结果为NaN

    要避免收到undefined,可以对参数进行检查:

          function abs(x) {
                if( typeof x!=='number') {
                    throw'Not a number';
                }
                if( x >= 0) {
                    return x;
                } else {
                    return -x;
                }
            }

    arguments

    JavaScript还有一个免费赠送的关键字arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数,arguments类似Array,但它不是一个Array

         function foo(x) {
                alert(x);//10
                for ( var i = 0 ; i < arguments.length ; i++) {
                    alert(arguments[i]);//10,20,30
                }
            }
            foo(10,20,30);

    利用arguments,你可以获得调用者传入的所有参数,也就是说,即使函数不定义任何参数,还是可以拿到参数的值:

         function abs() {
                if( arguments.length === 0) {
                    return 0;
                }
                var x = arguments[0];
                return x >= 0 ? x : -x;
            }
            abs();//0
            abs(10);//10
            abs(-9);//9

    rest参数

    由于JavaScript函数允许接收任意个参数,于是我们就不得不用arguments来获取所有参数:

        function foo(a,b) {
                var i,rese = [];
                if(arguments.length >2 ){
                    for (i = 2 ; i < arguments.length; i++ ) {
                        rest.push(arguments[i]);
                    }
                }
                console.log( 'a=' + a );
                console.log( 'b=' + b );
                console.log(rest);
            }

     为了获取除了已定义参数a、b之外的参数,我们不得不用arguments,并且循环要从索引2开始以便排除前两个参数,这种写法很别扭,只是为了获得额外的rest参数。

    ES6标准引入了rest参数,上面的函数可以改写成:

        function foo(a,b,...rest) {
                console.log('a =' + a);
                console.log('b =' + b);
                console.log(rest);
            }
    
            foo(1,2,3,4,5);
            //结果:
            //a=1
            //b=2
            //Array[3,4,5]
            foo(1);
            //结果:
            //a=1
            //b=undefined
            //Array[]

    rest参数只能写在最后,前面用...标识,从运行结果可知,传入的参数先绑定a、b,多余的参数以数组形式交给变量rest,所以,不再需要arguments我们就获取了全部参数。

    如果传入的参数连正常的参数都没有填满,也不要紧,rest参数会接收一个空数组(注意不是undefined)

    注意return

    JavaScript引擎有一个行末自动添加分号的机制,这可能让你栽到return语句的一个大坑:

    function foo() {
        return { name:'foo' };
    }
    foo();//{name:'foo'}

    如果把return语句拆分成两行:

    function foo() {
        return
            {name:'foo'};
    }
    
    foo();//undefined

    JavaScript引擎在行末自动添加分号的机制,上面的代码实际上变成了:

    function foo() {
        return;//自动添加了分号,相当于return undefined
        { name:'foo'};//这行语句得不到执行
    }

    所以return正确的多行写法是:

    function foo() {
        return {//这里不会自动加分号,因为{表示语句尚未结束
            name:'foo'
        };
    }
  • 相关阅读:
    关于js计算非等宽字体宽度的方法
    [NodeJs系列]聊一聊BOM
    Vue.js路由管理器 Vue Router
    vue 实践技巧合集
    微任务、宏任务与Event-Loop
    事件循环(EventLoop)的学习总结
    Cookie、Session和LocalStorage
    MySQL 树形结构 根据指定节点 获取其所在全路径节点序列
    MySQL 树形结构 根据指定节点 获取其所有父节点序列
    MySQL 创建函数报错 This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled (you *might* want to use the less safe log_bin_trust_function_creators
  • 原文地址:https://www.cnblogs.com/yuanxinru321/p/7552887.html
Copyright © 2011-2022 走看看