参考书《ECMAScript 6入门》
http://es6.ruanyifeng.com/
函数的扩展
函数的默认值 : ES6可以为函数指定默认值
(1)指定默认值的两种方式
a.函数参数的默认值
function test(a = 0,b = 5){
return a+b;
}
test();//5 调用方法时,参数a,b都是undefined,可以使用默认值,因此返回5
test(7);//7+5 = 12
test(,10);//报错 非尾参数设置了默认值,则调用函数时此参数无法忽略,忽略报错;显示传入undefined,则触发默认值
在参数中定义了默认值的变量,代码块中不能再用let或const重新定义变量(let与const不允许在同一个作用域内重复声明同一个变量)
function test3(a = 1){
let a = 7;
return a;
}
test3()//执行此方法时报错(定义此方法test3时不报错)Uncaught SyntaxError: Identifier 'a' has already been declared
function test4(b = 'sdf'){
const b = 'test4';
return b;
}
test4()//执行此方法时报错(定义此方法test4时不报错)Uncaught SyntaxError: Identifier 'b' has already been declared
function test5(c = 8){
var c = 1;
return c;
}
test5()//1 不报错 let与const不允许在同一个作用域内重复声明同一个变量,而var可以,所以使用var重复声明c不报错
使用参数的默认值时,不可以在声明同名参数
function test6(a = 1, a, b){
return a+b;
}//函数定义时就报错 Uncaught SyntaxError: Duplicate parameter name not allowed in this context
b.对象的解构赋值默认值
function test2({a = 1,b = 8}){
return a+b;
}
test2({});//9此时参数是一个空对象,空对象里的属性全是undefined, 所以函数可以使用参数的默认值
test2({a:12,b:13});//25
test2({a:15});//23
test2();//此处使用的是对象的解构赋值默认值,如果传入的参数不是对象,就无法让对象的解构赋值默认值生效,报错 Cannot destructure property `a` of 'undefined' or 'null'.
//要解决此问题,可以将其转化为进一步的参数默认值
function test2({a = 2,b = 3} = {}){ //此处表示函数test2的默认参数是一个空对象,此空对象的属性a的默认值是2,属性b的默认值是3
return a+b;
}
test2({});//5
test2();//5
(2)指定默认值后length属性将失真,已经制定默认值的参数以及位置在其后的参数都不参与length计数
function test7(a,b,c,d){
return a+b+c+d;
}
test7.length //4
function test8(a,b = 0,c,d){
return a+b+c+d;
}
test8.length //1 只计算了一个参数a,定义了默认值的参数b以及其后的c,d均不参与length计数
(3)参数默认值是不传值的,如果参数默认值是一个表达式赋值,那每次都需要重新计算
(4)一旦设置了参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域(context)。等到初始化结束,这个作用域就会消失。这种语法行为,在不设置参数默认值时,是不会出现的。
(5)参数默认值用途:可用于提示某参数可省略(默认值设置成undefined)或者必须(默认值设置成可以返回异常提示语句的函数)
2.rest参数:rest参数是一个数组,length属性不记录rest参数。
function test11(...restParams){
return restParams;
}
test11(1,3,4,5,'qwe'); // [1,3,4,5,'qwe']
test11.length; //0
3.函数的name属性返回实际的函数名
let f = function test12(){};
f.name; // 'test12'
Array.bind({}).name; // "bound Array"
4.箭头函数
(1)箭头函数的this始终是函数定义时的this,不是使用时的this
function Timer(){
this.s1 = 0;
this.s2 = 0;
setInterval(()=>this.s1++,1000);//箭头函数中的this,指向Timer定义时的this,即this.s1 = 0;
setInterval(function(){
this.s2++;//常规写法函数中的this,通常指向使用时的window/document全局变量,因此this.s2是NaN,而timer.s2始终是定义时的值。
},1000);
}
var timer = new Timer();
setTimeout(()=>console.log(timer.s1),3100);//3
setTimeout(()=>console.log(timer.s2),3100);//0
(2)箭头函数可以简化函数写法
function insert(value){
return {into : function(arr){
return {afterValue : function(val){
arr.splice(arr.index(val)+1,0,value);
return arr;}
}}}
}
let insert = (value) => {into : (arr) => ({afterValue : (val) => {arr.splice(arr.indexOf(val)+1,0,value);return arr;}})}
(3)如果箭头函数右边返回的是代码块,用{}括起来;如果箭头函数右边的是对象,则必须使用({})括起来。
(a,b) => {return a+b}
let test13 = (a,b) => ({name : a,value : b})
test13("test",8); //{name : "test",value : 8}
(4)箭头函数不能做构造函数,即不能使用new命令
let test15 = (a,b) => a*b;
new test15(); //报错 Uncaught TypeError: test15 is not a constructor
5.双冒号运算符:左边是一个对象,右边是一个函数
object1 :: f1 //等同于f1.bind(object1)
object2 :: f2(...restArr) //等同于 f2.apply(object2,restArr);
::f3 //等同于f3.bind(f3)
::f3(...restArr1) //等同于f3.apply(f3,restArr1);
如果双冒号运算符的结果是一个对象,则可以链式使用
6.尾调用和尾调用优化
尾调用:函数的最后一步调用了另外一个函数
function test17(){
return test18();//必须是最后一步调用此函数,而且是作为返回值返回
}
尾调用优化:函数A最后一步调用了另外一个函数B,且函数B执行过程中不需要使用到任何有关函数A里变量的操作,那么在尾调用执行后,有关函数A的调用帧都可以删除,只保留函数B的调用帧,这即是尾调用优化
function A(a){
a = a + 1;
function B(b){
console.log(b);
}
return B('this is a test')
}
7.递归和尾递归
递归:函数调用自身
尾递归:函数尾调用自身
常见递归:遍历dom树
function traversal(node){
//对node的处理
if(node && node.nodeType === 1){
console.log(node.tagName);
}
var i = 0, childNodes = node.childNodes,item;
for(; i < childNodes.length ; i++){
item = childNodes[i];
if(item.nodeType === 1){
//递归先序遍历子节点
traversal(item);//属于尾递归
}
}
}
尾递归优化
普通尾递归
function sum(x){
if(x === 1) {return 1};
return x+sum(x - 1);//返回当前层次计算的x的值与下一子自身调用返回的值,因此当前的调用帧不能删除
}
优化后的尾递归
function sum(x,y){
if(x === 1) {return y};
return sum(x - 1,x+y);//执行后当前调用帧可以删除,进入下一次自调用的新参数的调用帧
}
5,1-->4,5+1
4,6-->3,5+1+4
3,11-->2,5+1+4+3
2,14-->1,5+1+4+3+2
1,15--->15
8.尾逗号规则:ES6允许函数定义时尾参数带逗号
function test16(p1,p2,p3,){}