ES6基础之默认参数值

如果调用函数的过程中,定义的参数缺失,此参数变量的值则会是undefined。怎么给缺失的参数赋值默认值,在ES6之前,没有简洁的语法设置缺失参数的默认值,但是我们一般可以这么编写代码解决缺失参数默认值:

function myFunction(x, y, z) {
 x = x === undefined ? 1 : x;
 y = y === undefined ? 2 : y;
 z = z === undefined ? 3 : z;
 console.log(x, y, z); //Output "6 7 3"
 }
 myFunction(6, 7);

这种写法是不是比较麻烦?默认值的设置是不是不够直观?在ES6中,我们可以用更简洁的语法进行实现,通过本篇文章你将学习到以下内容:

  • 使用ES6语法声明参数默认
  • 值使用undefined传
  • 参参数运算

使用ES6语法声明参数默认值

我们可以使用ES6简洁的语法,如下示例进行声明函数参数的默认值:

function myFunction(x = 1, y = 2, z = 3) {
 console.log(x, y, z);
}
myFunction(6,7); // Outputs 6 7 3

在上述代码示例中,我们在调用此函数中传递了前两个参数,因此参数的默认值(即x=1和y=2)将会被覆盖(即x=6和y=7)。由于第三个参数缺省,因此z使用默认值,将会是3。

使用undefined传参

如果我们想让具体某个参数使用默认值,我们可以使用undefined进行赋值,如下段代码所示:

function myFunction(x = 1, y = 2, z = 3) {
 console.log(x, y, z); // Outputs "1 7 9"
 }
 myFunction(undefined,7,9);

是不是很简单,只需要使用undefined,我们就可以指定具体某个参数使用默认值。

参数运算

在ES6中我们不仅可以给参数默认赋值具体的数值,同时参数赋值支持参数的逻辑运算进行赋值,如下段代码所示:

function myFunction(x = 1, y = 2, z = x + y) {
 console.log(x, y, z); // Output "6 7 13"
 }
 myFunction(6,7);

在上述代码中,我们只传入了前两个参数,第三个参数缺省,第三个参数的值默认值是则会是前两个参数之和。

小节

今天的内容就到这里,当我们在开发一些工程应用通用组件时,都需要暴露一些接口以供使用。而这些接口的友好性是决定这个组件质量的一大指标,其中参数缺省值(默认值)的完善程度同时也影响接口的友好性,感谢ES6能让我们用如此简介的语法设置参数的缺省值。

与解构赋值默认值结合使用

这里有两种写法需要区分一下:

function m1({x=0,y=0} = {}){
  return [x,y];
}
function m2({x,y} = {x:0,y:0}){
  return [x,y];
}
m1({x:3});//[3,0]
m2({x:3});//[3,undefined]
m1({});//[0,0]
m2({});//[undefined,undefined]

参数默认值的位置

通常情况下,定义了默认值的参数应该是函数的尾参数。因为这样比较容易看出,到底省略了哪些参数,如果非尾部的参数设置默认值,实际上这个参数是无法省略的。

如果有默认值的参数都不是尾参数,这时,无法只省略该参数而不省略其后的参数,除非显示输入undefined。如果传入undefined,那么就会触发默认值,但是null没有这个效果。

函数的length属性

如果函数指定了默认值后,函数的length属性就不会包含有默认值的参数。这是因为length属性的含义是,该函数预期传入的参数个数,某个参数指定默认值之后,预期传入的参数个数就不包括这个参数了,同理,rest参数也不会计入length属性。

函数参数默认值的类型

(1)变量
如果函数参数的默认值是一个变量,则该变量所处的作用域和其他变量的作用域规则相同,即是先前函数的作用域,然后再是全局作用域。

(2)函数
如果函数A的参数默认值是函数B,那么由于函数的作用域是其声明的时候所在的作用域,函数B的作用域就在全局作用域而不是函数A的作用域。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • ES6基础之默认参数值

    如果调用函数的过程中,定义的参数缺失,此参数变量的值则会是undefined.怎么给缺失的参数赋值默认值,在ES6之前,没有简洁的语法设置缺失参数的默认值,但是我们一般可以这么编写代码解决缺失参数默认值: function myFunction(x, y, z) { x = x === undefined ? 1 : x; y = y === undefined ? 2 : y; z = z === undefined ? 3 : z; console.log(x, y, z); //Outpu

  • ES6基础之解构赋值(destructuring assignment)

    我们经常可以在其他编程语言(如GO语言)中看到多返回值这种特性,因为在很多实际场景中,函数的返回值中,函数的返回值并不只有一个单一的值.ES6之前,并没有可以直接使用语法来实现多返回值的特性.ES6终于出现了解构赋值的语法糖来解决此类问题. 解构赋值是一种表达式,允许您使用数组或对象,将可迭代对象的值或属性分配给变量.解构赋值能让我们用更简短的语法进行多个变量的赋值,大大的减少了代码量.解构表达式有两种:array和object. 今天的文章笔者将从以下方面进行介绍: 使用数组表达式解构赋值 常

  • ES6基础之字符串和函数的拓展详解

    本文实例讲述了ES6基础之字符串和函数的拓展.分享给大家供大家参考,具体如下: 字符串的拓展 1.ES6为字符串添加了遍历器接口,因此可以使用for...of循环遍历字符串 2.字符串新增的 includes().startsWith().endsWidth() 三个方法用于判断某一字符串是否包含于另一字符串 includes():返回布尔值,表示源字符串中是否包含参数字符串. startsWith():返回布尔值,表示参数字符串是否在源字符串的头部. endsWith():返回布尔值,表示参数

  • ES6基础之数组和对象的拓展实例详解

    本文实例讲述了ES6基础之数组和对象的拓展.分享给大家供大家参考,具体如下: 数组的扩展 1.拓展运算符('...'),它相当于rest参数的逆运算,用于将一个数组转换为用逗号分隔的参数序列: console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 2.如果扩展运算符后面是一个空数组,则不产生任何效果: [...[], 1] // [1] 3.常见的拓展运算符的应用: //合并数组 let a

  • ES6基础知识介绍

    目录 一.ECMAScript和JavaScript关系 二.let命令 三.const命令 四.变量的解构赋值 1.数组的解构赋值 2.对象的解构赋值 一.ECMAScript和JavaScript关系 JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准,但是JavaScript本身也已经被 Netscape 公司注册为商标,后面的标准都由ECMA制定,取名ECMAScript. 那么ES6这个版本引入

  • ES6基础语法之数组拓展

    一.Array.of() 将参数中所有值作为元素形成数组: console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] 参数的值可以为不同的类型: console.log(Array.of(1, '2', true)); // [1, '2', true] 参数为空时返回空数组: console.log(Array.of()); // [] 注意: let arr1 = new Array(10); //是一个长度为10的空数组 let arr2 = A

  • ES6基础语法之模块化介绍

    ES6 引入了模块化, ES6 的模块化分为导出(export) @与导入(import)两个模块. ES6模块化特点: (1)ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;. (2) 模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等. (3) 每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域. (4) 每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取. 一.export

  • ES6基础语法之class类介绍

    一.class基本语法 JavaScript 语言中,编写一个学生类,代码如下:(prototype可以个对象添加属性和方法) function Student(stuno,stuname) { this.stuno = stuno; this.stuname = stuname; } Student.prototype.stusex = ""; Student.prototype.sayHi = function() { console.log("大家好,我是"+

  • ES6基础语法之函数介绍

    一.函数参数的扩展 ES6支持参数的默认值: function fn(name,age,sex="男") { console.log(`大家好,我是${name},性别${sex},今年${age}岁!`); } fn("刘德华",45); //大家好,我是刘德华,性别男,今年45岁! 传递undefined,取默认值: function fn(name,sex="男",age) { console.log(`大家好,我是${name},性别${

  • js中对函数设置默认参数值的3种方法

    在javascript中如何为函数设置默认参数值,下面提供几种方法供大家参考. 第一种方法: function example(a,b){ var a = arguments[0] ? arguments[0] : 1;//设置参数a的默认值为1 var b = arguments[1] ? arguments[1] : 2;//设置参数b的默认值为2 return a+b; } 注意以上函数也可写作如下: function example(){ var a = arguments[0] ? a

随机推荐