zoukankan      html  css  js  c++  java
  • 浅谈 es6 箭头函数, reduce函数介绍

      今天来谈一下箭头函数, es6的新特性

       首先我们来看下箭头函数长什么样子,   

    let result = (param1, param2) => param1+param2;
    

       上述代码 按照以前书写应该是 :

    function add(param1, param2){
      return param1+param2;  
    }
    

      当 只有一个参数时,还可以简写为:

    let result = v => 5+v;
    

      箭头函数不支持 arguments

      当有多个参数时,比如10个参数时, 我们就不能用arguments了,一种方法是 一一列举出来,比较繁琐, 还有一种方法是 用剩余参数表示 如下:

        这里先解释一下 ” 剩余参数 “, MDN这样描述: 如果函数的最后一个命名参数以...为前缀,则在函数被调用时,该形参会成为一个数组,数组中的元素都是传递给该函数的多出来的实参的值。

    (param1, param2, ...rest)=>{//code} //...rest类型为数组,不包含param1,param2, rest.length表示剩余参数个数
    

        arg代表的是 数组[3,6,5]

      之前没用箭头函数写promise时,代码如下

      

    function getRankData(){
    	return getUsers(users)
    	      .then(function(users){return users[1];})
    		  .then(function(user){return user.id;})
    		   .then(function(id){return data;})
    		   .catch(function(err){return err.msg;})
    
    }
    

      用箭头函数简化后,

    function getUserRankData(){
    	return getUsers(users)
    		.then(users => users[1];)
    		.then(user => user.id)
    		.then(id => data)
    		.then(err => err.msg;);
    }
    

      当没有参数时, 箭头函数 () => {//code} 或者 _ => {//code}

      note: 简单的、单行的、不会复用的函数,建议采用箭头函数。如果函数体较为复杂,行数较多,还是应该采用传统的函数写法。

      当 用箭头函数直接返回一个对象的时候 ()=>{name: 'test'} 会报错 , 需要添加一个括号, () => ({name: 'test'});

      

      this 关键字

        箭头函数内部的this是词法作用域,由上下文确定。

      看到箭头函数 经常和高阶函数一起使用, 如下

        高阶函数有两个特性 : 函数可以作为参数传递, 函数可以作为返回值输出  

    var arr = [1,3,5,2,0];
    var num = arr.map(ele => ele + 1)
    	.filter(ele => ele > 3)
    	.reduce((acc, ele) => acc + ele, 0)
    

      结果为10;

      介绍一下 reduce函数,对数组每个元素执行回调函数,返回值用于下一次计算参数,

        reduce(function(a,b,c,d) , 0);  reduce 有两个参数 一个回调函数,一个参数, 当参数存在时, 即为a 的初始值, 之后a为回调返回的值, b为数组当前的元素, c为当前元素序号值, d为调用reduce的数组。

  • 相关阅读:
    Xshell6配置ssh免密码登录虚拟机
    编程语言的各种区别
    unity_小功能实现(敌人追踪主角)
    unity_小功能实现(敌人巡逻功能)
    Unity Editor已停止工作
    unity之初级必备知识
    unity之中级工程师
    iTween基础之功能简介
    C#数据结构_查找
    C#数据结构_排序
  • 原文地址:https://www.cnblogs.com/ihboy/p/7059333.html
Copyright © 2011-2022 走看看