让前端飞ES6Web前端之路

ES6对函数的拓展(2018-05-10)

2018-05-10  本文已影响3人  CRUD_科科

参数的默认值

    在开发中,给函数的参数指定默认值,是很普遍很常见的一个需求,我们先来回顾一下传统的实现方式,对比着看更好理解:

function person(n,a){
    var name = n || 'Zhangsan';
    var age  = a ||  25;
}

    上面是传统的实现方式,通过或运算实现,原理:如果运算符 || 左侧为true,直接返回左侧的值,否则返回右侧的值; 在person函数内,如果参数n没有传参,那么变量name得到的值就是“Zhangsan”,如果传参了,变量name的值就为参数n的值。

    但是,前提是参数对应的布尔值不能false(比如:数字0,空字符串等转换成布尔值就是false),这就使得这种传统的实现方式存在一定的不足和缺陷。

function person(name = 'Zhangsan',age = 25){
    console.log(name,age);
}
   person();
//结果:Zhangsan  25

   person('Lisi',18);//结果:Lisi  18

rest参数

 rest参数,这是一个新的概念,rest的中文意思是:剩下的部分。

//求和函数,得到的结果赋值到result
function sum(result,...values){
//打印values看看是什么
console.log(values);
//结果:[1,2,3,4]
//进行求和

values.forEach(function (v,i) {
//求和得到的结果存到result
result += v;
});

    //打印出求和的结果看看
    console.log(result);
    //结果:10
}

   //存储求和结果的变量res

   var res = 0;

   //调用sum函数

   sum(res,1,2,3,4);

    在实参中,除了第一个参数以外,剩余的参数都会被...values获取到。

    rest参数并不是适合所有的函数使用,只在特定的情境下会比较适用,比方说刚刚案例中的求和函数,就十分适合要rest参数把实际的参数收集起来放在数组中进行求和,在适当的情况下使用它可以事半功倍,减少代码量,提高开发效率。 

扩展运算符

    结合数组使用,把数组的元素用逗号分隔开来,组成一个序列

 function sum(a,b) {
    return  a+b ;
 }

   let arr = [2,3];
   //用扩展运算法将数组[2,3]转换成2,3

   sum(...arr);
   //结果:5

    它可以将一个数组转成一个对应的参数数列。在实际开发中,你可以根据扩展运算符的作用,可以灵活运用,实现各种效果。

箭头函数

    ES6给我们介绍一种全新的定义函数的方式,就是用箭头符号(=>),故得名为箭头函数。

     //传统写法

   var sum = function(a) {
        return  a ;
    };

   //箭头函数写法
   var sum = a => a;

多个参数运算:

//箭头函数写法
   var sum = (a,b) => {return a+b}
   sum(1,2);//结果:3

    如果参数超过1个的话,需要用小括号()括起来,函数体语句超过1条的时候,需要用大括号{ }括起来。

    箭头函数的最大作用就是简化函数的实现,大大地减少代码量。来举个例子对比一下,假设我们现在要对一个数组 [ 1,2,3,4 ] 里面的数求和,我们分别用传统的方式和箭头函数都实现一次:

//传统的写法
   var sum = 0;
[1,2,3,4].forEach(function(v){
sum+= v;
});

   //箭头函数的写法
   var sum = 0;
[1,2,3,4].forEach(v => sum+=v);

上一篇下一篇

猜你喜欢

热点阅读