zoukankan      html  css  js  c++  java
  • day46----JavaScript的函数及对象小结

    一:函数

      01:普通函数

    function f1(){
        console.log("Helleo world")
    }
    
    f1(); //调用函数
    -->Helleo world  //得到的值

      02:带参数的函数

    function f2(a,b){
        console.log(arguments);
        console.log(arguments.length);
        console.log(a,b);
    }
    
    f2(1,2);     //调用函数并给函数传值
    VM689:2 Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    -->2   //参数个数
    -->1 2  //值

      03:带返回值的函数

    函数只能返回一个值,如果要返回多个值,只能将其放在数组或对象中返回。
    function sum(a,b){
        return a+b;
    }
    sum(1,2);  //调用函数并给函数传参
    --〉3  //得到的值

      04:匿名函数方式,多和其他函数配合使用

    var sum=function(a,b){
        return a+b;
    
    }
    sum(2,3); //调用函数并给函数传参
    5       //得到值

      05:立即执行函数,页面加载到这里了就直接执行,不需要被调用执行

    (function(a,b){
        return a+b;
    })(4,5);   ////python中写可以这么写:ret=(lambda x,y:x+y)(10,20) 然后print(ret)
    9

      06:#箭头函数

    var f=v=>v;
    f(4);
    4
    ---〉等同于:
    var f = function(v){
      return v;
    }
    
    如果箭头函数不需要参数或需要多个参数,就是用圆括号代表参数部分:
    var f=()=>5;
    undefined
    f();
    5
    
    等同于:
    ar f=function(){return 5};
    f();
    5

      07:函数中的arguments参数

    function add(a,b){
        console.log(a+b);
        console.log(arguments.length);
    }
    //传两个数:
    add(2,4);
    -->6
    -->2
    
    
    //传三个数
    add(1,2,4);
    -->3    //1+2=3  只计算了前面两个数字的和
    -->3  //长度个数
    
    //传一个数
    
    add(3);
    -->NaN   //没有结果,只返回一个not a number
    -->1    // 长度个数

    二:函数的全局变量和局部变量

      01:局部变量

    在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。
    只要函数运行完毕,本地变量就会被删除。

      02:全局变量

     在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

      03:作用域

    首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。
    例子01:
    var city="beijing";
    function f(){
        var city="shanghai";
        function inner(){
            var city="shenzhen";
            console.log(city);
        }
    inner();   //在函数内部调用内部的函数,首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层
    
    }
    f();   //调用函数
    -->shenzhen    //输出结果
    例子02:
    var city="beijign";
    function Bar(){
    console.log(city);  //首先在函数内部查找变量,找不到则到外层函数查找
    }
    
    function f(){
    var city="shanghai";
    return Bar;
    }
    var ret=f();
    ret();
    -->beijign          //得到的值

      04:闭包

    var city="beijing";
    function f(){
        var city="shanghai";
        function inner(){
            console.log(city);
        }
        return inner;
    }
    var ret=f();
    ret();
    --> shanghai

      05:词法分析

    JavaScript中在调用函数的那一瞬间,会先进行词法分析。
    词法分析的过程:
    当函数调用的一瞬间,会先形成一个激活对象:Active Object(AO),并会分析一下3个方面
    01:函数参数,如果有,则会将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作
    02:函数局部变量,如果AO上有同名的值,则不做任何操作,如果没有,则将此变量赋值给AO,并且值为undefined
    03:函数声明,如果AO上有,则会将AO上的对象覆盖,如果没有,则不做任何操作。
    词法分析例子01:
    
    var age=18;     //(第二部:发现没有函数参数,不做任何操作)
    function foo(){
    
    //(第三步,发现下面有局部变量age的声明,此时的AO的变量名字是age,且值为undefined()
    //即:age=undefined。所以这时的age的值是undefined  在这之前是还未执行到age=22的。)
    
        console.log(age);
        var age=22;         //如果没有这个变量声明,打印的值应该是18
        console.log(age);
    }
    
    foo();  //调用函数,(第一步:瞬间形成了一个AO对象)
    
    //调用函数得到的值
    --> undefined
    -->22
    词法分析例子02:
    
    var age=18;
    function foo(){
        console.log(age);
        var age=22;
        console.log(age);
        function age(){         //#发现age这个函数名也是变量,将OA上的变量给替换了,那么函数在执行的时候,
                                //去OA上找,发现OA是个函数,然后执行到age=22的时候,age才被重新赋值
            console.log("呵呵");
        }
        console.log(age);
    }
    
    foo();  //调用执行函数
    
    结果:
    
    --> ƒunction age(){
          console.log("呵呵");
        }
    --> 22
    --> 22
    结果分析:
    词法分析过程:
    ?????????第一步分析的参数是传进去的参数还是函数程序里面的参数
    
    1、分析参数,有一个参数,形成一个 AO.age=undefine;
    2、分析变量声明,有一个 var age, 发现 AO 上面已经有一个 AO.age,因此不做任何处理
    3、分析函数声明,有一个 function age(){...} 声明, 则把原有的 age 覆盖成 AO.age=function(){...};
    最终,AO上的属性只有一个age,并且值为一个函数声明
    
    执行过程:
    注意:执行过程中所有的值都是从AO对象上去寻找
    1、执行第一个 console.log(age) 时,此时的 AO.age 是一个函数,所以第一个输出的一个函数
    2、这句 var age=22; 是对 AO.age 的属性赋值, 此时AO.age=22 ,所以在第二个输出的是 22
    3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了

    三:内置对象和方法

    JavaScript中的所有事物都是对象:字符串、数字、数组、日期,等等。在JavaScript中,对象是拥有属性和方法的数据。
    我们在学习基本数据类型的时候已经带大家了解了,JavaScript中的Number对象、String对象、Array对象等。
    注意var s1 = "abc"和var s2 = new String("abc")的区别:typeof s1 --> string而 typeof s2 --> Object

      01:自定义对象

     javascript的对象(object)本质上是键值对得集合(Hash结构),但是只能用字符串作为键
    例子01:
                //自定义一个对象a,且对象a是一个数组
                var a={"name":"Tom","age":18};
    
                //从对象中取值
                console.log(a.name);
                -->Tom
    
                console.log(a.age);
                -->18
    
                console.log(a["name"]);
                -->Tom
    
                console.log(a["age"]);
                -->18

      02:遍历对象中的值

    var a={"name":"Tom","age":18};
    for (var i in a){
    
        console.log(i,a[i]);   //遍历的只是键,需要通过键取 值
    }
    //结果:
    --〉name Tom
    --〉age 18

      03:创建对象

    var person=new Object();    // 创建一个person对象
    person.name="Tom";      // person对象的name属性
    -->"Tom"
    person.age="18";         // person对象的age属性
    -->"18
     面向对象,在ES5中没有类的概念,只有个构造函数,命名的首字母要大写,实例化的时候使用new关键字进行实例化
     

      04:Javascript面向对象之继承#

    // 父类构造函数
    var Car = function (loc) {
      this.loc = loc;
    };
    
    // 父类方法
    Car.prototype.move = function () {
      this.loc ++;
    };
    
    // 子类构造函数
    var Van = function (loc) {
      Car.call(this, loc);
    };
    
    // 继承父类的方法
    Van.prototype = Object.create(Car.prototype);
    // 修复 constructor
    Van.prototype.constructor = Van;
    // 扩展方法
    Van.prototype.grab = function () {
      /* ... */
    };

      05:Date对象

    01:创建Date对象
        001:方法一:不指定参数
            var d1=new Date();
    
            console.log(d1.toLocaleDateString());
            --> 2018/12/19
    
        002:参数为日期字符串
          01:年/月/日 形式
            var d2=new Date("2018/3/12 11:12");
    
            console.log(d2.toLocaleString());
            ---> 2018/3/12 上午11:12:00
          02:月/日/年 形式
            var d3=new Date("04/03/20 11:12");
    
            console.log(d3.toLocaleString());
            VM3078:1 2020/4/3 上午11:12:00
    
        003:参数为毫秒数
            var d3=new Date(5000);
    
            console.log(d3.toLocaleString());   //取值
            --> 1970/1/1 上午8:00:05
    
            console.log(d3.toUTCString);
            --> ƒ toUTCString() { [native code] }
    
    
    02:Date对象的方法:
        var d = new Date();
        //getDate()                 获取日
        //getDay ()                 获取星期
        //getMonth ()               获取月(0-11//getFullYear ()            获取完整年份
        //getHours ()               获取小时
        //getMinutes ()             获取分钟
        //getSeconds ()             获取秒
        //getMilliseconds ()        获取毫秒
        //getTime ()                返回累计毫秒数(从1970/1/1午夜)

      06:json对象

    创建两个对象:
    var str1='{"name":"TOM","age":18}';
    var obj1={"name":"TOM","age":18};
    
    //将json字符串转成对象
    var obj=JSON.parse(str1);
    obj;  //输出对象结果语句
    {name: "TOM", age: 18}  //结果
    
    //将对象转换成json字符串
    var str=JSON.stringify(obj1);
    str;        //输出对象结果语句
    "{"name":"TOM","age":18}"   //结果

      07:Math对象(类似于python的内置函数)( E 为自然底数 (近似值 2.7183)。)
      exp() 方法可返回 e 的 x 次幂的值。

    01:返回数的绝对值。
       Math.abs(-34.34);
       -->34.34
    
    02:返回 e 的指数。
       Math.exp(2);
       -->7.38905609893065
    
    03:返回数的自然对数(底为e)。
       Math.log(4);
       -->1.3862943611198906
    
    04:返回 x 和 y 中的最高值。
       Math.max(4,23);
       -->23
    
    05:返回 x 和 y 中的最低值。
       Math.min(23,12);
       -->12
    
    06:返回 x 的 y 次幂。
      Math.pow(3,2);
      -->9
    
    07:返回 0 ~ 1 之间的随机数。
       Math.random()
       -->0.4973948215069466
    
    08:把数四舍五入为最接近的整数。
       Math.round(3.45);
       -->3
    
      Math.round(3.68);
      -->4
    
      Math.round(3.58);
      -->4
    
    9:对数进行下舍入。
      Math.floor(23.9);
      -->23
    
    10:返回数的正弦。
       Math.sin(12);
       -->-0.5365729180004349
    
       Math.sin(90);
       -->0.8939966636005579
    
    11:返回数的平方根。
       Math.sqrt(2);
       1.4142135623730951
    
       Math.sqrt(4);
       -->2
    
    12:返回角的正切。
       Math.tan(23);
       -->1.5881530833912738
    
       Math.tan(45);
       -->1.6197751905438615

    ps:javascript 的round和python的round的比较

     python:
                print(round(3.45))  //3
                print(round(3.68))  //4
                print(round(3.58))  //4
                print(round(3.5))   //4
                print(round(4.5))   //4
    
            javascript:
    
                Math.round(3.45);
                -->3
    
                Math.round(3.5);
                ---4
    
                Math.round(3.68);
                -->4
    
                Math.round(3.58);
                -->4
    ps:拓展知识点:Math.ceil(),Math.floor(),Math.round()的区别
        Math.ceil():小数后面的数字不管多少,直接进位,比如,12.1和12.5,12.6都直接返回13,ceil是向上舍入的(math.ceiling(天花板除法)。)
        Math.floor():不管小数点后的数字是多少,多大,都是直接舍去,不进位比如 12.1和12.5,12.9都是直接返回12,floor是向下舍入的。
        Math.round():正常的标准舍入,就像我们学的数学课本上面的规则
    
    ps:python的round()和javascript的round()的比较:
        javascript:Math.round():正常的标准舍入,就像我们学的数学课本上面的规则
    
        python:python中的round()会根据版本的不同而出现不同的结果。整体的是最靠近当前偶数的规则
        01:当小数部分只为0.5时,整数部分如果为奇数则进1,如果为偶数则舍去小数部分
            print(round(3.5))   #4
            print(round(-3.5))   #-4
            print(round(4.5))   #4
            print(round(-4.5))   #-4
    
            02:小数部分不为0.5时,按标准的四舍五入
            print(round(3.6))   #4
            print(round(4.6))   #5
            print(round(4.4))   #4
            print(round(-4.4))  #-4
    
            03:保留小数部分时候
            a:当小数部分需要保留数位的下一位是5时,保留数位置为偶数则进1,奇数舍去。
            print(round(2.345,2))  #2.35
            print(round(-2.345,2))  #-2.35
            print(round(-2.335,2))  #-2.33
            b:当小数部分需要保留数位的下一位不是5时,按标准四舍五入(逢5进1)
            print(round(2.344,2))   #2.34
            print(round(2.347,2))  #2.35
            print(round(-2.347,2))  #-2.35
  • 相关阅读:
    C语言I博客作业04
    解决@ResponseBody注解返回的json中文乱码问题
    自定义 Helper Method
    webapi 学习1
    分布式事务TransactionOptions及设置msdtc
    了解websocket是什么
    用postman 来实现post方式返回json数据
    异步 Controller
    asp.net mvc Filter
    asp.net mvc Controller Factory
  • 原文地址:https://www.cnblogs.com/one-tom/p/10146330.html
Copyright © 2011-2022 走看看