zoukankan      html  css  js  c++  java
  • ES6_入门(6)_函数的扩展

      1 // 2017/7/22
      2         /*ES6函数的扩展*/
      3         //ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。
      4         function log(x, y) {
      5           y = y || 'World';
      6           console.log(x, y);
      7         }
      8 
      9         log('Hello') // Hello World
     10         log('Hello', 'China') // Hello China
     11         log('Hello', '') // Hello World
     12         log('Hello', '0') // Hello 0
     13         log('Hello', 0) //Hello World
     14 
     15           console.log("0"==false);//true
     16           console.log(0==false);//true
     17 
     18          //注意:这种写法的缺点在于,如果参数y赋值了,但是对应的布尔值为false,则该赋值不起作用。就像上面代码的最后一行,参数y等于空字符,结果被改为默认值。
     19 
     20          //问题:数字0和字符串“0”的布尔值都为false,但是调用log函数的结果不一样。
     21 
     22          //为了避免这个问题,通常需要先判断一下参数y是否被赋值,如果没有,再等于默认值。
     23 
     24          function log(x, y) {
     25              if(typeof y===undefined){
     26                  y="World";
     27              }
     28          
     29           console.log(x, y);
     30         }
     31 
     32         log('Hello') // Hello undefined
     33         log('Hello', 'China') // Hello China
     34         log('Hello', '') // Hello 
     35         log('Hello', '0') // Hello 0
     36         log('Hello', 0) //Hello 0
     37 
     38 
     39         //ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。
     40         function log(x,y="world"){
     41             console.log(x,y);
     42         }
     43         log('Hello');//Hello world
     44         log('Hello','');//Hello 
     45         log('Hello','China');//Hello China
     46         log('Hello',0)//Hello 0
     47 
     48         //注意:参数变量是默认声明的,在函数体中不能用let和const再次声明。
     49         function foo(x=8){
     50             let x=3;
     51             const x=3;
     52         }
     53         foo();//Uncaught SyntaxError: Identifier 'x' has already been declared
     54 
     55 
     56 
     57         //注意:参数默认值不是传值的,而是每次都重新计算默认值表达式的值。也就是说,参数默认值是惰性求值的。
     58 
     59         let a=99;
     60         function foo(x=a+1){
     61             console.log(x);
     62         }
     63         foo();//100
     64         a=0;
     65         foo();//1
     66 
     67         // 上面代码中,参数x的默认值是a + 1。这时,每次调用函数foo,都会重新计算a + 1,而不是默认x等于 100。
     68 
     69 
     70         //2017/7/24
     71         //与解构赋值默认值结合使用
     72         function foo({x,y=5}){
     73             console.log(x,y);
     74         }
     75 
     76         foo({});//undefined 5
     77         foo({x:1});//1,5
     78         foo({x:1,y:2});//1,2
     79         foo();//Uncaught TypeError: Cannot match against 'undefined' or 'null'.
     80 
     81         //注意:只有当函数foo的参数是对象时,变量x和y才会通过解构赋值而生成。如果函数foo调用时参数不是对象,变量x和y就不会生成,从而报错。
     82 
     83         //写法一
     84         function m1({x=0,y=0}={}){
     85             console.log(x,y);
     86         }
     87 
     88         // //写法二
     89         function m2({x,y}={x:0,y:0}){
     90             console.log(x,y);
     91         }
     92 
     93         m1();//0 0
     94         m2();//0 0
     95 
     96         m1({x:3,y:4});//3 4
     97         m2({x:3,y:4});//3 4
     98 
     99         m1({});//0 0
    100         m2({});//undefined undefined
    101 
    102         m1({z:3});//0 0
    103         m2({z:3});//undefined undefined
    104 
    105         //参数默认值的位置
    106 
    107         //注意:定义了默认值的参数,应该是函数的尾参数。因为这样比较容易看出来。如果是非尾部的参数设置默认值,实际上这个参数是没法省略的。
    108 
    109         function f(x=1,y){
    110             console.log(x,y);
    111         }
    112         f();//1 undefined
    113         f(2);//2 undefined
    114         // f(,1);//Uncaught SyntaxError: Unexpected token ,
    115         f(undefined,1);//1 1
    116 
    117         function f(x,y=5,z){
    118             console.log(x,y,z);
    119         }
    120 
    121         f();//undefined 5 undefined
    122         f(1);//1 5 undefined
    123         f(1,2,3);//1 2 3
    124         // f(1,,2);//报错:es6.html:971 Uncaught SyntaxError: Unexpected token ,
    125         f(1,undefined,2);//1 5 2
    126 
    127         //传入undefined,将触发该参数等于默认值,null则没有这个效果。
    128         function foo(x=5,y=6){
    129             console.log(x,y);
    130         }
    131 
    132         foo(undefined,null);//5 null
    133 
    134     
    135         //函数的 length属性
    136         //注意:为函数的参数指定默认值后,函数的length属性将会失真,因为函数的length属性返回的是没有指定默认值的参数个数。
    137         //length属性的含义是:该函数预期传入的参数个数。某个参数指定默认值以后,预期传入的参数个数就不包括这个参数了。同理,rest参数也不会计入length属性。
    138         console.log((function(a){}).length);//1
    139         console.log((function(a=1){}).length)//0
    140 
    141         console.log((function(...args){}).length);//0
    142 
    143         //如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。
    144         console.log((function(a=1,b,c){}).length);//0
    145         console.log((function(a,b=1,c){}).length);//1
    146 
    147         //作用域:
    148         //一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的。
    149 
    150         var x=1;
    151         function f(x,y=x){
    152             console.log(y);
    153         }
    154         f(2);//2
    155 
    156         let x=1;
    157         function f(y=x){
    158             let x=2;//
    159             console.log(y);
    160         }
    161         f();//1,函数f调用时,参数y = x形成一个单独的作用域。这个作用域里面,变量x本身没有定义,所以指向外层的全局变量x。函数调用时,函数体内部的局部变量x影响不到默认值变量x。
    162         f(3);//3
    163 
    164 
    165         function f(y=x){
    166             let x=2;
    167             console.log(y);
    168         }
    169         f();//es6.html:1012 Uncaught ReferenceError: x is not defined
    170          
    171         var x=1;
    172         function f(x=x){
    173             console.log(x);
    174         }
    175         f();//Uncaught ReferenceError: x is not defined
    176         /*注意:以上代码,参数x=x形成一个单独的作用域,实际上执行的是let x=x,由于暂时性死区的原因报错,在变量x的声明语句还没有执行完成前,就去取x的值,导致报错”x 未定义“。*/
    177 
    178         /*应用*/
    179         //(1)利用参数默认值,可以指定某一个参数不得省略,如果省略就抛出一个错误。
    180         //(2)可以将参数默认值设为undefined,表明这个参数是可以省略的。
    181 
    182 
    183         //rest参数:ES6 引入 rest 参数(形式为...变量名)。
    184         function f(...values){
    185             let sum=0;
    186             for(var val of values){
    187                 sum+=val;
    188             }
    189             return sum;
    190         }
    191 
    192        console.log(f(4,5,1));//10
    193 
    194     
    195     //严格模式
    196 
    197     //(1)从 ES5 开始,函数内部可以设定为严格模式。
    198     //(2)ES2016 做了一点修改,规定只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。
    199     /*如何规避*/
    200     //(1)第一种是设定全局性的严格模式,这是合法的。
    201     //(2)把函数包在一个无参数的立即执行函数里面。
  • 相关阅读:
    给jdk写注释系列之jdk1.6容器(9)-Strategy设计模式之Comparable&Comparator接口
    给jdk写注释系列之jdk1.6容器(8)-TreeSet&NavigableMap&NavigableSet源码解析
    给jdk写注释系列之jdk1.6容器(7)-TreeMap源码解析
    给jdk写注释系列之jdk1.6容器(6)-HashSet源码解析&Map迭代器
    给jdk写注释系列之jdk1.6容器(5)-LinkedHashMap源码解析
    给jdk写注释系列之jdk1.6容器(4)-HashMap源码解析
    给jdk写注释系列之jdk1.6容器(3)-Iterator设计模式
    给jdk写注释系列之jdk1.6容器(2)-LinkedList源码解析
    给jdk写注释系列之jdk1.6容器(1)-ArrayList源码解析
    留言板
  • 原文地址:https://www.cnblogs.com/LinSL/p/7229580.html
Copyright © 2011-2022 走看看