如何在ES5与ES6环境下处理函数默认参数

oliverhuang 发布于2019-08-22 17:10 / 3133人阅读

摘要：函数默认值是一个很提高鲁棒性的东西就是让程序更健壮关于函数默认参数的描述函数默认参数允许在没有值或被传入时使用默认形参。也就实现了上边三元运算符的功能。直接使用这种方式，省去了在函数内部进行默认值的检查，能够让函数专注的做它应该做的事情。

函数默认值是一个很提高鲁棒性的东西（就是让程序更健壮）
MDN关于函数默认参数的描述：函数默认参数允许在没有值或undefined被传入时使用默认形参。

ES5 使用逻辑或||来实现

众所周知，在ES5版本中，并没有提供的直接方法供我们我们处理函数默认值
所以只能够自己去增强函数的功能，一般会这么来做：

function doSomething (name, age) {
  name = name || "default name"
  age  = age  || 18

  console.log(name, age)
}

我们将函数的两个参数name与age进行默认值的处理，如果没有则使用默认值。
在执行一下函数后，好像并没有什么不对：

doSomething()       // default name, 18
doSomething("Niko") // Niko        , 18
doSomething(, 12)   // default name, 12

然而当我们执行这样的代码时，就会获得一些超出预期的结果：

doSomething("Niko", 0) // Niko, 18

能够发现，对于参数0，我们上边的默认参数实现方法是有问题的

就像下边的四个表达式，都会输出wrong，这很显然不能够满足上边MDN关于函数默认参数的定义：

console.log(0         || "wrong")
console.log(""        || "wrong")
console.log(null      || "wrong")
console.log(false     || "wrong")

正确的姿势

所以，在ES5中正确的默认值处理应该是这样：

function doSomething (name, age) {
  if (name === undefined) {
    name = "default name"
  }

  if (age === undefined) {
    age = 18
  }

  console.log(name, age)
}

使用三元运算符简化操作

或者我们简写成三元运算符形式的：

function doSomething (name, age) {
  name = name === undefined ? "default name" : name
  age  = age  === undefined ? 18             : age

  console.log(name, age)
}

使用函数进行封装

但是如果我们每写一个函数，都要重复的去做这些操作
未免太麻烦了，所以，我们对这个逻辑进行一个简单的封装：

function defaultValue (val, defaultVal) {
  return val === undefined ? defaultVal : val
}

function doSomething (name, age) {
  name = defaultValue(name, "default name")
  age  = defaultValue(age , 18)

  console.log(name, age)
}

这样就很简洁的在ES5实现了函数默认参数的逻辑

one momre things

关于上边的defaultValue函数实现方法，我们在合理的使用弱类型语言的优势后
可以使用这种方式来省去三元运算符的操作：

function defaultValue () {
  return arguments[+(arguments[0] === undefined)]
}

我们知道，arguments表示函数所有的实参
我们使用arguments[0]获取第一个实参，然后与undefined进行全等比较
在外层将表达式的结果转换为Number，然后将这个值作为下标获取arguments中对应的参数。
因为是由Boolean值转变而来，所以只会存在0、1两种选项。
也就实现了上边三元运算符的功能。

ES6

ES6版本的函数默认值基本上就是我们上边实现的那种套路了
但是因为是原生的，所以会有相应的新语法，能够更简洁的使用：

function doSomething (name = "default name", age = 18) {
  console.log(name, age)
}

ES6中提供了新的语法，可以让我们在函数声明参数后边直接写= [defaultValue]的这种形式来设置某个参数的默认值。
直接使用这种方式，省去了在函数内部进行默认值的检查，能够让函数专注的做它应该做的事情。

如何针对某些必填参数抛出异常

ES6这种新语法能够让我们很好的针对某个必填参数进行错误提醒：

function requireParams () {
  throw new Error("required params")
}

function doSomething (name = requireParams(), age = 18) {
  // do something
}

如果name参数为undefined，就会触发默认值规则
然后调用requireParams函数，而我们在函数中直接throw了一个Error

复杂结构参数的默认值处理

上边的处理都是针对简单的基本类型数据进行处理的，但如果我们有如下的一个函数：

function init ({id, value}) {}

init({
  id: "tagId",
  value: 1
})

如果在ES5环境下，针对这种参数的默认值处理将会变得无比复杂
首先要判断这一个参数是否存在，然后在判断参数中的所有key是否存在
而在ES6中，可以这样来做：

function init ({
  id    = "defaultId",
  value = 1
} = {}) {
  console.log(id, value)
}

init()

首先在解构函数的后边添加默认值= {}，然后针对每一项参数添加默认值，很简洁的就实现了我们的需求。

ES5版本的polyfill代码在仓库中的位置：defaultValue

参考资料

MDN

服务器托管云服务器函数默认参数 js函数默认参数 ES5环境怎么在linux 下搭建lnmp环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94928.html

深入理解ES6笔记（三）函数

摘要：主要知识点有函数参数默认值剩余参数扩展运算符属性块级函数箭头函数以及尾调用优化深入理解笔记目录函数的默认参数在中，我们给函数传参数，然后在函数体内设置默认值，如下面这种方式。拥有方法的函数被称为构造器。主要知识点有：函数参数默认值、剩余参数、扩展运算符、new.target属性、块级函数、箭头函数以及尾调用优化showImg(https://segmentfault.com/img/...

aristark 2019-08-26 12:17 评论0 收藏0
ES6核心特性

摘要：报错不报此外还有个好处就是简化回调函数正常函数写法箭头函数写法改变指向长期以来，语言的对象一直是一个令人头痛的问题，在对象方法中使用，必须非常小心。前言 ES6 虽提供了许多新特性，但我们实际工作中用到频率较高并不多，根据二八法则，我们应该用百分之八十的精力和时间，好好专研这百分之二十核心特性，将会收到事半功倍的奇效！写文章不容易，请大家多多支持与关注！本文首发地址GitHub博客（...

loostudy 2019-08-23 13:41 评论0 收藏0
ES6核心特性

摘要：报错不报此外还有个好处就是简化回调函数正常函数写法箭头函数写法改变指向长期以来，语言的对象一直是一个令人头痛的问题，在对象方法中使用，必须非常小心。前言 ES6 虽提供了许多新特性，但我们实际工作中用到频率较高并不多，根据二八法则，我们应该用百分之八十的精力和时间，好好专研这百分之二十核心特性，将会收到事半功倍的奇效！写文章不容易，请大家多多支持与关注！本文首发地址GitHub博客（...

_DangJin 2019-08-02 12:07 评论0 收藏0
es6 函数的扩展

摘要：我们来看一看官方解释函数内部的严格模式，同时适用于函数体和函数参数。函数参数的默认值我们都知道声明函数可以设置形参，但你有没有想过形参也可以直接设置默认值，我们接下来看看如何去写代码 function f(x,y=2) { return x+y } console.log(f(2)) // 4 上面的小例子只是设置了一个y的默认值2，然后我们使用这个函数的时候，只传递了x...

hqman 2019-08-23 16:05 评论0 收藏0
ES6系列---函数

摘要：形参默认值不再影响对象当使用默认参数值时，对象的行为与以往有所不同。具有方法的函数被统称为构造函数。当调用函数的方法时，被赋值为新创建对象实例如果调用方法，则的值为。由于JavaScript开发者多年的不断抱怨和呼吁，ES6终于大力度地更新了函数特性，在ES5基础上进行了许多改进。函数形参的默认值 ES5形参默认值的实现在ES5中，你很可能通过以下这种方式为函数赋予默认值： fu...

AJie 2019-08-20 18:58 评论0 收藏0