ES6 函数的扩展

ES6 函数的扩展

一，函数参数的默认值

• ES6允许为函数的参数设置默认值，即直接写在参数定义的后面。

   function log(x, y = 'world') {
            console.log(x + ' ' + y);
        }
        log('hello', 'hello');   //hello hello
        log('hello');   //hello world
        log('hello',);   //hello world

• 参数默认值可以与解构赋值的默认值，结合起来使用。

function func({x,y=5}){
           console.log(x,y);
       }
       func({});   //undefined,5
       func({x:1}) // 1,5 
       func({x:1,y:2})  //1,2
       foo()   // TypeError:Cannot read property 'x' of undefined

• 参数默认值的位置
  通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。
  如果非尾部的参数设置默认值，实际上这个参数是没法省略的。

• 函数的length值
  指定了默认值以后，函数的length 属性，将返回没有指定默认值的参数个数。也就是说，指定了默认后，length 属性将失真。

(function len(a){}).length   //1
(function len(a=1){}).length   //0
(function len(a,b,c=9){}).length   //2

• 作用域
  如果参数默认值是一个变量，则该变量所处的作用域，与其变量的作用域规则是一样的，即先是当前函数的作用域，然后才是全局作用域。

二,rest参数

• ES6引入rest参数（形式为“…变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。
  rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...nums){
     let sum=0;
     for(let i of nums){
      sum+=i;
     }
    return sum;
 }
add(1,2,3);   //6

三，扩展运算符

• 扩展运算符（spread）是三个点（…）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(1,2,[3,4,5],6,7);
//1,2,3,4,5,6,7

• 该运算符主要运用于函数调用，扩展运算符与正常的函数参数可以结合使用，非常灵活。

function add(x,y,z){
return x+y+z;
}
var arr=[1,2,3];
add(...arr);   //6  

• 在某些时候可以取代apply方法
  例“子，应用Math.max 方法，简化求出一个数组最大元素的写法。

//求一个数组中的最大值
Math.max(1,5,23);
Math.max.apply(null,[1,5,23]);   //23
Math.max(...[1,5,23])   //23

• 运算符 … 的应用
  1，合并数组

var str1=['a','b'];
var str2=['c'];
var str3=['d','e','f'];
//ES5合并数组
str1.concat(str2,str3);
//ES6合并数组
[...str1,...str2,...str3];

2,函数的返回值

JavaScript的函数只能返回一个值，如果需要返回多个值，只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。

var dateField = readDateField(datebase);
var d = new date(...dateField );
//上面代码从数据库取出一行数据，通过扩展运算符，
//直接将其传入构造函数Date。

• 类似数组的对象
  任何类似数组的对象，都可以用扩展运算符转为真正的数组。

var div=document.getElementsByTagName('div');
//此时div是一个类数组
var arr=[...div];

• Map和Set结构，Generator函数
  扩展运算符内部调用的是数据结构的Iterator接口，因此只要具有Iterator接口的对象，都可以使用扩展运算符，比如Map结构。

四，name属性

• 函数的name属性，返回该函数的函数名。

(function func(){}).name;     //func

• ES6对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量，ES5的name 属性，会返回空字符串，而ES6的name属性会返回实际的函数名。

var func=function(){}
//ES5
func.name;   //""
//ES6
func.name;  //func
//上面代码中，变量func等于一个匿名函数，
//ES5和ES6的ƒ‡ 属性返回的值不一样。

• 如果将一个具名函数赋值给一个变量，则ES5和ES6的name属性都返回这个具名函数原本的名字。
• Function构造函数返回的函数实例，name属性的值为“anonymous”。
• bind返回的函数,name 属性值会加上“bound ”前缀。

function foo(){};
foo.bind({}).name    //bound foo

五，箭头函数

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

var f= v=>v;
//就相当于
var f=function(v){
return v;
}

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

var sum = (num1,num2)=>num1+num2;
//就相当于
var sum = function(num1,num2){
return num1+num2;
}

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

var s = (num1,num2)=>{
var t=num1/2;
return t+num2;
}

• 注意：
  箭头函数有几个使用注意点。
  （1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
  （2）不可以当作构造函数，也就是说，不可以使用new 命令，否则会抛出一个错误。
  （3）不可以使用arguments 对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。
  （4）不可以使用yeild命令，因此箭头函数不能用作Generator函数。
  上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。