【es6】函数参数设置默认值

1、es6之前的函数参数默认值写法

1.1、使用短路或||的写法

  • 当y为空时,y判断为false ,走||右边的,所以y = 'world';
  • 当y不为空时,y判断为true,不需要再运行||右边的,所以 y = y
javascript 复制代码
function log(x, y) {
  y = y || 'World';
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello World

这中写法有个问题,就是第三种输出中的结果。当y值设置为""时,走短路与运算判断为false,从而将默认值赋予了y。但是原本的意思是y的值就是"",从而希望输出的是 Hello

1.2 添加typeof 判断是否为undefined

javascript 复制代码
function log(x, y) {
  if (typeof y === 'undefined') {
  		y = 'World';
	}
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello 

这种写法可以避免1.1中y值为空串的情况。

2、es6写法

javascript 复制代码
function log(x, y = 'World') {
  console.log(x, y);
}

log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello

上面是es6的写法,简单方便。

下面是解构赋值和函数默认值结合:

方法一是个解构变量设置默认值,二默认值生效的条件是对象属性值严格等于undefined。

方法二是设置对象的值,没有设置解构变量的默认值。

在没有参数和x y都有值的情况下,两者的结果一样。其他情况下两者有区别。

javascript 复制代码
// 写法一
function m1({x = 0, y = 0} = {}) {
  return [x, y];
}

// 写法二
function m2({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

// 函数没有参数的情况
m1() // [0, 0]
m2() // [0, 0]

// x 和 y 都有值的情况
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

// x 有值,y 无值的情况
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

// x 和 y 都无值的情况
m1({}) // [0, 0];
m2({}) // [undefined, undefined]

m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]
相关推荐
掘金安东尼17 分钟前
前端周刊第421期(2025年7月1日–7月6日)
前端·面试·github
摸鱼仙人~19 分钟前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
未来之窗软件服务21 分钟前
chrome webdrive异常处理-session not created falled opening key——仙盟创梦IDE
前端·人工智能·chrome·仙盟创梦ide·东方仙盟·数据调式
kymjs张涛22 分钟前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
玲小珑25 分钟前
Next.js 教程系列(十)getStaticPaths 与动态路由的静态生成
前端·next.js
天天鸭31 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
蓝婷儿36 分钟前
每天一个前端小知识 Day 23 - PWA 渐进式 Web 应用开发
前端
无奈何杨1 小时前
CoolGuard风控中新增移动距离和移动速度指标
前端·后端
恋猫de小郭1 小时前
Google I/O Extended :2025 Flutter 的现状与未来
android·前端·flutter
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js