函数的扩展

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面向对象编程中，匿名函数推荐使用箭头函数