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)把函数包在一个无参数的立即执行函数里面。