函数的扩展
1.三点运算符
//三点运算实现rest可变参数 /* 计算可变个数整数的和 */ function addAll(){ let res = 0; /*for(let i=0;i<arguments.length;i++){ res += arguments[i]; }*/ //arguments不是一个真数组 console.log(arguments); arguments.forEach(function(item,index){ //报错,arguments不是数组 console.log(item,index); }) console.log(res); } addAll(1,2,3,4) //10 //三点运算实现一样的功能 function addAll2(...args){ var res = 0; args.forEach(function(item,index){ res += item; }) console.log(res); } addAll2(1,2,3,4) //根据第一个形参的值,将不定个数的参数存入不同的数组中 /* 三点运算的rest可变参数,必须是最后一个形势参数,也就是...arg后面不能再加参数 */ function daveDate(code,...args){ let arr1=[],arr2=[]; if(code==1){ arr1 = [...args]; }else if(code == 2){ arr2 = [...args]; } console.log(arr1,arr2) } saveDate(1,'a','b','c','d')
2.参数默认值
function sayHello(name,sex="m"){ //这里设置了默认值 if(sex=="m"){ console.log("hello! MR" + mame); }else if(sex == "w"){ console.log("hello! MS" + name); } } sayHello("Tom") console.log(sayHello.length)//返回方法没有默认值形参的个数,这里指name没有设置
3.name属性
function test1(){} //es6中,方法的name属性会返回变量名 let test2 = function(){} console.log(test1.name) //test1 console.log(test2.name) //test2 //能过构造函数Function定义的函数 let test3 = new Function(); console.log(test3.name) //anonymous //通过bind方法绑定了某个对象的方法 console.log(new Function().bind({}).name) //bound anonymous console.log(test2.bind({}).name) //bound test2
4.箭头函数-匿名函数的简写模式,一段可以传递的代码
1.箭头函数的格式 格式一 let fun1 = (a,b)=>{console.log(a,b)} fun1("hello","world")//hello world 格式二:当只有一个形参时()可以省略 其它情况,比如没有参数,或不止一个参数时,不能省略 let fun2 = a =>{console.log(a)} fun2(100)//100 console.log(fun2(100)) //undefined 里面没有return; 格式三:当方法体只有一句代码的时候,大括号可以省略 并且系统会将这一句代码的运算结果return出来 let fun3 = a=>a+10; console.log(fun3(5)); //15 let fun3 = a=>{a+10}; console.log(fun3(5)); //undefined 加了{}就不能返回了 格式四:手写return返回最大值 let fun4 = (a,b,c)=>{ if(a>b){ if(a>c){ return a; }else{ return c; } }else{ if(b>c){ return b; }else{ return c; } } } console.log(fun4(5,12,6)) 2.箭头函数的作用 //使用场景:回调函数中 setTimeout(function(){ console.log("hello"); },1000); setTimeout(()=>{console.log("hello")},1000) document.body.onkeyup = event=>{ console.log(event.keyCode); }; 3.箭头函数的this <input id="btn" type="button" value="click" /> document.getElementById("btn").onclick = function(){ console.log(this); //btn自身 } setTimeout(function(){ console.log(this);//window },1000) document.getElementById("btn").onclick = ()=>{ console.log(this); //window } setTimeout(()=>{ console.log(this)//window },1000) 4.箭头函数的好处 优点:没有自己的this,this指向他声明时的所处环境 ()=>{}更适合于JS面身对象的编程:因为当我们在一个类中,使用匿名函数的时候,就不用担心this指向问题 js面向对象编程中,匿名函数推荐使用箭头函数