箭头函数简单了解

在ES6中,为函数的实现以及其方法做了许多修改与添加.

1.函数参数默认值

在ES6中,我们可以在声明函数时,直接为其参数设置一个默认值.

带有默认值的函数参数

​ function 函数名(参数名=默认值){

​ … 函数执行代码块

​ }

注意:

当为函数参数声明默认值后,不能再在函数体内通过let或const声明与参数名相同的变量.

当指定了函数参数默认值后,函数调用的length方法将失去真实性(出现错误,只返回没有指定默认值的参数个数.)

function getSum(a,b=12){
	return a+b;
}
console.log(getSum(12,23)); // 35

console.log(getSum(26)); // 38

console.log(getSum.length); // 1

2.函数的rest 参数

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

语法:

​ function 函数名(…自定义变量名){

​ …这里的自定义变量名代表着我们调用函数时所传入的所以参数,它是一个数组类型.

​ }

注意:

rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

// 例一
function getSum(...values){
	return values.reduce((pre,cur)=>{
          return pre+cur;
        })
}
getSum(1,2,3,4);

// 例二
function getSum(...values) {
     console.log(values); // [12,23,{name:'颤三'}]
}
getSum(12, 23, { name: '颤三' });

// 例三:
function getSum(arg1,arg2,...values){
    console.log(arg1); // 
    console.log(arg2); // world
    console.log(values); // [12,true,'Users']
}
getSum('Hello','World',12,true,'Users')

3.箭头函数

ES6中新增了一个箭头函数的使用,该箭头函数可以帮助我们大大简化函数的声明使用.

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

上面四点中，第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。

使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。

语法:

// 原始函数语句写法
const 函数名=function(参数){
    ...函数体;
    return 返回值;
}


// 箭头函数语句写法
const 函数名=(参数)=>{
    ...函数体;
    return 返回值;
};

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

// 原始函数语句写法
const 函数名=function(参数1,参数2,...,参数n){
    ...函数体
    return 返回值;
}

// 箭头函数语句写法
const 函数名=(参数1,参数2,...,参数n)=>{
    ...函数体;
    return 返回值;
}

当函数参数只有一个，括号可以省略；

// 原始函数语句写法
const 函数名=function(){
    ...函数体
    return 返回值;
}

// 箭头函数语句写法
const 函数名=唯一参数=>{
    ...函数体;
    return 返回值;
};

箭头函数语句没有参数时，括号不可以省略。

// 原始函数语句写法
const 函数名=function(){
    ...函数体
    return 返回值;
}

// 箭头函数语句写法:
const 函数名=()=>{
    ...函数体;
    return 返回值;
};

如果箭头函数的代码块部分只有一条返回值语句,我们可以直接省略{}以及return语句的书写,直接书写返回的内容

// 原始写法:
const 函数名=function(){
	return 返回值;
}

// 箭头语句写法:
const 函数名=()=>返回值;

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

// 原始函数语句书写
const 函数名=function(参数){
	...函数体
	return 返回值
}

// 箭头语句书写方式:
const 函数名=(参数)=>{
	...函数体
	return 返回值;
}

如果箭头函数并没有返回值,且只有一条语句,我们可以通过void关键字声明

// 原始函数书写
const 函数名=function(){
	函数执行语句
}

// 箭头函数书写
const 函数名=(参数)=>void 函数执行语句;

如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 原始函数写法
const 函数名=function(){
    return {...对象属性};
}

// 箭头函数语句写法:
const 函数名=()=>({...对象属性});