ES6:函数的拓展

1.函数的默认值
//ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。

     function log(x, y){
         y = y || "world";
         console.log(x,y);
     }
     log('hello');   //hello world
     log('hello', 'china');   //hello china
     log('hello','');    //hello world
     log('hello',NaN);  //hello world

//上面代码检查函数log的参数y有没有赋值，如果没有，则指定默认值为World
//缺点，如果该值对应的布尔值为false，则赋值不起作用

//完善

function log(x, y){
         if( y === 'undefined'){
             y = 'world'
         }
         console.log(x,y);
     }
     log('hello');   //hello undefined
     log('hello', 'china');   //hello china
     log('hello','');    //hello 
     log('hello',NaN);  //hello NaN

  //es6
     function log(x, y ='world'){
         console.log(x,y);
     }
     log('Hello') // Hello World
     log('Hello', 'China') // Hello China
     log('Hello', '') // Hello

注意：1.参数变量是默认声明的，所以不能用let或const再次声明。
      2.使用参数默认值时，函数不能有同名参数。


//与解构赋值默认值结合使用

 function foo({x,y=5}){
         console.log(x,y);
     }
     foo({})  //undefined 5
     foo({x:1})  //1 5
     foo({x:1, y:2})  //1 2

//2.函数的length属性
// 指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。

     console.log((function(a){}).length)   //1
     console.log((function(a,b=2){}).length)  // 1
     console.log((function(a=1,b=2){}).length) //0 

//3.作用域
一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域

 {
         var x = 1;
         function f(x, y = x){
             console.log(y);
         }
         f(2);
     }

//上面代码中，参数y的默认值等于变量x。调用函数f时，参数形成一
//个单独的作用域。在这个作用域里面，默认值变量x指向第一个参数x，而不是全局变量x，所以输出是2。

//应用
//利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误


//4.箭头函数
ES6 允许使用“箭头”（=>）定义函数。

 {
         var f = v => v;
         //等同于
         var f = function (v){
             return v;
         }
     }

//如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

  var f = () => 5;
  var f = function(){ return 5};

//如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们
//括起来，并且使用return语句返回。

 var test = (num1, num2) => num1 + num2;
     const result = test(2,3);
     console.log(result);

4.1 箭头函数的this指定
//箭头函数不绑定this，箭头函数没有自己的this关键字
//如果在箭头函数中使用this，
//this关键字将指向箭头函数定义位置的this

 function fn(){
     console.log(this);   //obj 对象
//使用es6箭头函数
	      return () => {
    console.log(this);  //箭头函数指向自己绑定的区域里面的this
 }

     return function test(){
         console.log(this);   //window
     }
 }
 const obj = {
     name:'kjh',
 }
 fn.call(obj);

 const fn2 = fn.call(obj);
 fn2();  //window下调用函数，本应该指向window



3.剩余参数
当传入的实参大于形参时,剩余的实参将会被数组接收

function sum(first, ...args){  //...args 表示剩余的实参都被args以数组形式接收
         console.log(first);  //10
         console.log(args);      //[20,30]
     }
     sum(10,20,30);

//箭头函数中不能使用arguments，箭头函数中要使用剩余参数

  const sum = (...args) => {
        let total = 0;
        args.forEach((item)=>{
            total += item;
        })
        return total;
    }
    console.log(sum(10,20));
    console.log(sum(10,20,30));

//剩余参数和解构赋值一起使用

   let  arr1 = ['张三','李斯','王五'];
    let [s1,...s2] = arr1;
    console.log(s1);   //张三
    console.log(s2);   //["李斯", "王五"]