美文网首页H5^Study
JS高级学习:函数

JS高级学习:函数

作者: Merbng | 来源:发表于2019-04-24 14:02 被阅读0次

    案例 函数作为返回值

            <script type="text/javascript">
                var arr = [1, 100, 20, 200, 30, 40, 60, 10, 2];
                // 排序
                arr.sort(function(obj1, obj2) {
                    if (obj1 > obj2) {
                        return 1;
                    } else if (obj1 == obj2) {
                        return 0;
                    } else {
                        return -1
                    }
                })
                console.log(arr);
            </script>
    

    案例2:

    <script type="text/javascript">
                function File(name, size, time) {
                    this.name = name;
                    this.size = size;
                    this.time = time;
                }
                var f1 = new File("aaaa", "100M", "2019-4-23");
                var f2 = new File("cccc", "200M", "2019-4-20");
                var f3 = new File("bbbb", "600M", "2019-4-26");
                var arr = [f1, f2, f3];
    
                function fn(attr) {
                    return function getSorft(obj1, obj2) {
                        if (obj1[attr] > obj2[attr]) {
                            return 1;
                        } else if (obj1[attr] == obj2[attr]) {
                            return 0;
                        } else {
                            return -1;
                        }
                    };
                }
                // var ff = fn("name");
                // var ff = fn("size");
                var ff = fn("time");
                arr.sort(ff);
                for (i = 0; i < arr.length; i++) {
                    console.log(arr[i].name + "=========" + arr[i].size + "=========" + arr[i].time);
                }
            </script>
    

    闭包

    • 闭包的优缺点:缓存数据
    • 函数模式的闭包:在一个函数中有一个函数
    function f1() {
                    var num = 10;
                    // 函数的声明
                    function f2() {
                        console.log(num);
                    }
                    // 函数调用
                    f2();
                }
                f1();
    
    • 对象模式的闭包:函数中有个对象
    function f3() {
                    var num = 10;
                    var obj = {
                        age: num
                    };
                    console.log(obj.age);
                }
                f3();
                function f4() {
                    var num = 10;
                    return function() {
                        console.log(num);
                        return num;
                    };
                }
                var ff = f4();
                var result = ff();
                console.log(result);
    

    案例:沙箱

    沙箱:环境,黑盒,在一个虚拟的环境中模拟真实世界,做实验,实验结果和真实世界的结果是一样,但是不会影响真实世界

    <body>
            <div >卡卡卡卡卡</div>
            <div >卡卡卡卡卡</div>
            <div >卡卡卡卡卡</div>
            <div >卡卡卡卡卡</div>
            <div >卡卡卡卡卡</div>
            <p>阿卡卡卡卡</p>
            <p>阿卡卡卡卡</p>
            <p>阿卡卡卡卡</p>
            <p>阿卡卡卡卡</p>
            <p>阿卡卡卡卡</p>
            <p>阿卡卡卡卡</p>
            <p>阿卡卡卡卡</p>
            <script type="text/javascript">
                var dvObjs = 20;
                var pObjs = 10;
                var getTag = 10;
                (function() {
                    function getTag(tagName) {
                        return document.getElementsByTagName(tagName);
                    }
                    // 获取所有div
                    var divObjs = getTag('div');
                    for (i = 0; i < divObjs.length; i++) {
                        divObjs[i].style.border = "2px solid pink";
                    }
                    var pObjs = getTag('p');
                    for (i = 0; i < pObjs.length; i++) {
                        pObjs[i].style.border = "2px solid pink";
                    }
                }());
                console.log(getTag);
                console.log(dvObjs);
                console.log(pObjs);
            </script>
        </body>
    

    递归

    <script type="text/javascript">
                // 求n个数字的和  
                var sum = 0;
                for (i = 0; i <= 5; i++) {
                    sum += i;
                }
                console.log(sum);
    
                // 用递归实现
                function getSum(x) {
                    if (x == 1) {
                        return 1;
                    }
                    return x + getSum(x - 1);
                }
                console.log(getSum(5))
    
                // 求一个数字各个位数上的数字的和  123--->6    1+2+3
    
                function getEverySum(x) {
                    if (x < 10) {
                        return x;
                    }
                    return x % 10 + getEverySum(parseInt(x / 10));
                }
                console.log(getEverySum(123));
    
                // 斐波那契数列
                function getFib(x) {
                    if (x == 1 | x == 2) {
                        return 1;
                    }
                    return getFib(x - 1) + getFib(x - 2);
                }
                console.log(getFib(12));
            </script>
    

    预解析

    就是在浏览器解析代码之前,把变量的声明和函数的声明提前(提升)到该作用域的最上面

        //变量的提升
        console.log(num);
        var num=100;
    
        //函数的声明被提前了
        f1();
        function f1() {
          console.log("这个函数,执行了");
        }
    
        var f2;
        f2=function () {
          console.log("小杨好帅哦");
        };
        f2();
    
    

    相关文章

      网友评论

        本文标题:JS高级学习:函数

        本文链接:https://www.haomeiwen.com/subject/ichggqtx.html