JavaScript 函数配置对象解构赋值

51 阅读1分钟

引入

当一个函数接受一个配置对象如何结构赋值

分页案例

函数getDatas接受一个对象,里面有页数,页容量,关键字

但对象可能为空,也可能参数不全

// 根据下面的调用示例,完成函数 getDatas
function getDatas({ page: page = 1, limit: limit = 10, keyword = '' } = {}) {
	console.log(
		`获取第${page}页的数据,每页显示${limit}条,查询关键字为${keyword}`
	);
}

getDatas(); // 输出:获取第1页的数据,每页显示10条,查询关键字为空

getDatas({ 
	page: 2,
});
// 输出:获取第2页的数据,每页显示10条,查询关键字为空

getDatas({
	page: 2,
	limit: 30,
});
// 输出:获取第2页的数据,每页显示30条,查询关键字为空

getDatas({
	keyword: 'js',
});
// 输出:获取第1页的数据,每页显示10条,查询关键字为js

问题

使用getDatas函数,分页,但是这个对象份多种情况

  1. 没传参(没有配置对象)
  2. 有传参(配置对象属性都有)
  3. 有传参(配置对象属性缺失)

解决 解构赋值

它们的生效顺序是先函数参数的默认值,然后才是解构赋值的默认值。

function getDatas({ page: page = 1, limit: limit = 10, keyword = '' } = {})
  1. 问题1, 没传参使用默认对象 {1}={2},当缺失配置对象会匹配{2}, 然后使用{1}的默认值
  2. 问题2, 传入全部参数,使用结构后的参数.page,limit,keyword
  3. 问题3.({ page: page = 1, limit: limit = 10, keyword = '' } = {} 有传参,缺失属性,可以进一步结构,赋予默认值.page=1,limit=10,keyword=""