ECMAScript6函数默认参数

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ECMAScript6函数默认参数，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3086字，纯文字阅读大概需要5分钟。

内容图文

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

我们经常会这么写

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: 少传了参数

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

内容总结

以上是互联网集市为您收集整理的ECMAScript6函数默认参数全部内容，希望文章能够帮你解决ECMAScript6函数默认参数所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---