ECMAScript6函数默认参数

更新时间：2015年06月12日 10:00:00 投稿：hebedich

这篇文章主要介绍了ECMAScript6函数默认参数的相关资料,需要的朋友可以参考下

语言更新时每一个新增的特性都是从千百万开发者需求里提取过来的，规范采用后能减少程序员的痛苦，带来便捷。

我们经常会这么写

function calc(x, y) {
  x = x || 0;
  y = y || 0;
  // to do with x, y
  // return x/y
}

简单说就是x，y提供了一个默认值为0，不传时x, y以值0来运算。传了就以实际值计算。

又如定义一个ajax

function ajax(url, async, dataType) {
  async = async !== false
  dataType = dataType || 'JSON'
  // ...
}

自己用原生JS封装的一个简易ajax函数，url必填，async和dataType可选，即不填时默认同步请求和返回JSON格式数据。

再如定义一个矩形类

function Rectangle(width, height) {
  this.width = width || 200;
  this.height = height || 300;
}

new时不传任何参数，也会创建一个默认宽高为200*300的矩形。

无论是calc，ajax函数还是Rectangle类，我们都需要在函数体内做默认值的处理，如果语言自身处理岂不乐哉？ ES6提供了该特性（Default Parameters），以下是用ES6新特性重写的calc，ajax，Rectangle。

function calc(x=0, y=0) {
  // ...
  console.log(x, y)
}
calc(); // 0 0
calc(1, 4); // 1 4
 
function ajax(url, async=true, dataType="JSON") {
  // ...
  console.log(url, async, dataType)
}
ajax('../user.action'); // ../user.action true JSON
ajax('../user.action', false); // ../user.action false JSON
ajax('../user.action', false, 'XML'); // ../user.action false XML
 
function Rectangle(width=200, height=300) {
  this.width = width;
  this.height = height;
}
var r1 = new Rectangle(); // 200*300的矩形
var r2 = new Rectangle(100); // 100*300的矩形
var r3 = new Rectangle(100, 500); // 100*500矩形

可以看到，ES6把默认值部分从大括号移到了小括号里，还减少了“||”运算，函数体从此瘦身了。参数默认值嘛，本来就应该在定义参数的地方，这样看起来简洁了不少。O(∩_∩)O

默认参数可以定义在任意位置，比如在中间定义一个

function ajax(url, async=true, success) {
  // ...
  console.log(url, async, success)
}

定义了一个默认参数async，url和success是必传的，这时需要把中间的参数置为undefined

ajax('../user.action', undefined, function() {
   
})

注意，不要想当然的把undefined改为null，即使 null == undefined，传null后，函数体内的async就是null不是true了。

以下几点需要注意：

1. 定义了默认参数后，函数的length属性会减少，即有几个默认参数不包含在length的计算当中

function calc(x=0, y=0) {
  // ...
  console.log(x, y)
}
function ajax(url, async=true, dataType="JSON") {
  // ...
  console.log(url, async, dataType)
}
console.log(calc.length); // 0
console.log(ajax.length); // 1

2. 不能用let和const再次声明默认值，var可以

function ajax(url="../user.action", async=true, success) {
  var url = ''; // 允许
  let async = 3; // 报错
  const success = function(){}; // 报错
}

另外比较有趣的是：默认参数可以不是一个值类型，它可以是一个函数调用

function getCallback() {
  return function() {
    // return code
  }
}
 
function ajax(url, async, success=getCallback()) {
  // ...
  console.log(url, async, success)
}

可以看到这里参数success是一个函数调用，调用ajax时如果没有传第三个参数，则会执行getCallback函数，该函数返回一个新函数赋值给success。这是一个很强大的功能，给程序员以很大的想象发挥空间。

例如，利用这个特性可以强制指定某参数必须传，不传就报错

function throwIf() {
  throw new Error('少传了参数');
}
 
function ajax(url=throwIf(), async=true, success) {
  return url;
}
ajax(); // Error: 少传了参数

以上所述就是本文的全部内容了，希望大家能够喜欢。

您可能感兴趣的文章:

Echarts图表中formatter的基本用法示例
formatter 提示框浮层内容格式器,支持字符串模板和回调函数两种形式,下面这篇文章主要给大家介绍了关于Echarts图表中formatter的基本用法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
javascript如何在foreach循环完成之后执行一个回调函数
forEach()是前端开发中操作数组的一种方法,主要功能是遍历数组,其实就是 for 循环的升级版,下面这篇文章主要给大家介绍了关于javascript如何在foreach循环完成之后执行一个回调函数的相关资料,需要的朋友可以参考下
2023-11-11
客户端限制只能上传jpg格式图片的js代码
客户端限制只能上传jpg格式图片的js代码,对用户体验较好，适合网页中只能使用jpg格式图片的情况。
2010-12-12
javascript将异步校验表单改写为同步表单
这篇文章主要介绍了javascript将异步校验表单改写为同步表单,需要的朋友可以参考下
2015-01-01
JS优雅的使用function实现一个class
这篇文章主要为大家介绍了JS优雅的使用function实现一个class示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
JS前后端实现身份证号验证代码解析
这篇文章主要介绍了JS前后端实现身份证号验证代码解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
连续操作HTMLElement对象图文解决方法
Object.prototype.***不能用作在HTMLElement对象上，如本后面的抓图所示。
2008-03-03
js实现点击添加一个input节点
本文给大家分享的是一段点击自动添加inpu节点的代码，非常的简单实用，这里推荐给大家。
2014-12-12
JS中比Switch...Case更优雅的多条件判断写法
这篇文章主要给大家介绍了关于JS中比Switch...Case更优雅的多条件判断写法，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-09-09
javascript控制台详解
本文是写在2011年，主要介绍 “Firefox” 浏览器插件 “Firebug” 的操作，如今主流浏览器对控制台都已经提供了很好的支持。我自己用的最多是谷歌的 “chrome” 浏览器，下面也用 “chrome” 浏览器来调试。
2015-06-06

ECMAScript6函数默认参数

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具