美文网首页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高级学习:函数

    案例 函数作为返回值 案例2: 闭包 闭包的优缺点:缓存数据 函数模式的闭包:在一个函数中有一个函数 对象模式的闭...

  • JS高级

    JS高级 原型 函数高级 对象高级 本地存储 cookie localStorage sessionStorage...

  • JS高级学习:函数相关

    函数的声明和函数表达式 函数声明如果放在if-else的语句中,在IE8的浏览器中会出现问题,以后宁愿要函数表达式...

  • 023 JS高级

    JS高级 一、函数高级 1、函数回调 2、闭包 二、循环绑定 三、面向对象JS 1、属性与方法 2、类字典结构使用...

  • JS高级函数

    高级函数 在 JavaScript 中使用函数的高级方法。 数据类型的安全检测 构造函数的安全作用域 惰性载入函数...

  • js 高级函数

    1:基本类型和引用类型? 2:基本类型和引用类型的区别? 3:js的内存方式? 4:浏览器解析js代码的时候的顺序...

  • Js高级程序设计你不知道的那些事儿

    写在开头: 为了学习方便,js程序分成两个阶段学习,JS初级和js高级阶段,js高级有很多需要理解的概念,重在理解...

  • 学习JavaScript高级第一周总结

    本周学习了JS高级,比起之前学习的html 、css、JS基础,JS高级还是比较难接受一点的,特意利用周末的闲暇,...

  • 【JavaScript】技术参考资料

    JS基础、高级、进阶 MDN·JavaScript 函数式编程 阮一峰老师的入门简介: 函数式编程初探、函数式编程...

  • 函数表达式

    以下内容总结自《JS高级程序设计》第三版 什么是函数表达式? 函数表达式,是JS中定义函数的一种方式。在JS中,共...

网友评论

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

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