《深入理解ES6》阅读笔记 --- 函数

《深入理解ES6》阅读笔记 --- 函数

ES6的函数有几个显著的特点,方便了传入参数的处理,又不失优雅。提供的箭头函数虽然有诸多限制,但是在表达上减少了代码量还解决了我们在ES5中遇到的`this`丢失的问题。比较乐观的说,这是我非常喜欢使用的ES6新特性之一。

在参数处理上,ES6给大家提供了默认参数和不定参数的选择,而默认参数在某个形式上对于解决默认值的问题,终于不用再去处理很多的判断了,想想JavaScript在“布尔”逻辑判断上的隐式转换,比如"0" == false,如果你的参数传入的是0,本意它就是一个真实存在的参数,当在逻辑判断中时,这个参数被隐式的转换了,从而获取了默认值。

function logName(name='icepy') {
  console.log(name)
}
logName() // icepy
logName('wower') // wower

在你细心的处理默认参数时,有一点需要注意:

function logName(name='icepy',Qname = name){
 // name 
 // Qname
}
logName() //icepy

你可以将第二个参数的默认值设置成第一个参数,但是不能将第一个参数的默认值设置成第二个参数。

关于不定参数我想和Function一起说说,先来看一段Weex执行业务Code的代码:

/**
 * Call a new function body with some global objects.
 * @param  {object} globalObjects
 * @param  {string} code
 * @return {any}
 */
function callFunction (globalObjects, body) {
  const globalKeys = []
  const globalValues = []
  for (const key in globalObjects) {
    globalKeys.push(key)
    globalValues.push(globalObjects[key])
  }
  globalKeys.push(body)

  const result = new Function(...globalKeys)
  return result(...globalValues)
}

这个巧妙的callFunction就包含了我们想看到的不定参数与Function构造函数,不定参数使用...来表示,它用一个数组包含了其中的参数,相信读到这里,你会很快的联想到ES5中的arguments,你可以说和它类似,又非常不同。

如果在函数定义时写了不定参数,那么这个函数就只能接受唯一的一个,如果函数定义时定义了多个参数呢?

function (name,...profile){
  // profile []
  // arguments
  // name
}

你可以通过这样的关系看到不定参数与arguments之间的关系,arguments永远包含所有的参数,这也意味着它包含了name,而profile并不包含name。回到上面的那段Weex核心代码,细心阅读一下,相信你会有收获。

1. body是bundle.js的业务代码,将它加入到globalKeys最后一个位置。
2. 定义一个拥有不定参数globalKeys的Function来生成一个函数
3. Function你可以知道,它接受参数和函数体,并且最后一个永远是函数体
4. 最后执行生成的函数,将globalValues当不定参数传入

说起来...还可以用来处理其他的事情,来多实践一下吧。

说完参数,我们再来说说平时我们可能大量使用的 () => {} 箭头函数,它可能是我们非常乐见的“语法糖”之一,不过在此之前有一些要说明的是:

  1. 自身没有this,super等,而这些需要外层的非箭头函数来决定
  2. 不能实例化
  3. 没有原型
  4. 不能改变this,arguments等

如果你写过React + Redux,相信你一定对箭头函数使用的非常频繁,比如:

const title = data => ({
  type: TITLE,
  payload: {
    data,
  },
});

export const getDefaultData = () => (dispatch) => {
  
}

是不是有种似曾相识的感觉?

有时候我们在写React组件时,可能会用到立即调用模式:

... {
  render(){
    return (
      <div>
       (() => {
         return (<div>icepy</div>)
       })()
      </div>
    );
  }
}

不过,说真的,我常常配合着数组用,Why?表达的很简单:

values.sort((a,b) => a - b )

总体来说这一小节中说的函数对比ES5变化不大,反而更容易使用了。

编辑于 2018-08-12

文章被以下专栏收录