美文网首页让前端飞ES6Web前端之路
ES6对函数的拓展(2018-05-10)

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

作者: CRUD_科科 | 来源:发表于2018-05-10 15:32 被阅读3次

参数的默认值

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

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);

相关文章

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

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

  • ES6对函数的拓展

    1、rest参数(形式为“...变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。 2...

  • 007_ES6知识点总结(04)函数的拓展

    ES6知识点整理 [toc] 04 函数的拓展 04.1 函数参数的默认值 ES6支持函数定义时,直接在参数定义后...

  • es6基础知识3(函数拓展)

    title: es6基础知识3(函数拓展)tags: 参数默认值 剩余参数 箭头函数 categories: 前端...

  • 对函数的拓展

    相比C语言,C++的函数功能多了很多特性,使用起来也更加方便。 一、函数重用 在使用逻辑相同但是传入参数不同时不必...

  • ES6异步方法

    一、函数的拓展函数传参与默认值ES6函数的默认值:(x = 6)默认值可以写表达式,表达式在函数执行阶段执行 箭头...

  • Kotlin-那些好用的标准高阶函数

    Kotlin特性总结的第二篇,上一篇我们谈了拓展函数和拓展属性。本篇我们来学习一下高阶函数。 拓展函数是对类的拓展...

  • es6之函数拓展

    本文目录 1.参数默认值 2.rest参数 3.箭头函数 4.箭头函数的简写技巧 1.参数默认值 默认参数就是当用...

  • ES6 函数及拓展

    一、函数 函数是一个为执行特定任务而设计,可以重复使用的代码块。 1. 创建函数的三种方式 函数声明方式:func...

  • JavaScript OOP篇

    参考资料 JavaScript面向对象简介 ES6对象的拓展 ES6 class 前言 本篇主要介绍 JavaSc...

网友评论

    本文标题:ES6对函数的拓展(2018-05-10)

    本文链接:https://www.haomeiwen.com/subject/kqmzrftx.html