前言 📝
今天看到一个好玩的事情，就是如何在给后端传递参数的时候去掉多余的参数。然后就研究了一下，想到一个很好的解决方案，感觉代码很优雅。在这里分享一下。
1. 优雅的传递参数
1.1 之前的写法
在之前，不管三七二十一，直接将所有的参数全部传递给后端，反正后端用不到的参数他不会在实体类中接收。要不就是用下面的这种写法：
const queryParams = {
pageNumber: 1,
pageSize: 10,
// 多余的参数，不需要传递给后端
total: 100
}
async function fetchList() {
const params = {
pageNumber: queryParams.pageNumber,
pageSize: queryParams.pageSize,
}
await fetch('http://xxxx/api/list', params)
}
可以看到，上面的代码非常的丑陋。
1.2 优雅的写法
const queryParams = {
pageNumber: 1,
pageSize: 10,
// 多余的参数，不需要传递给后端
total: 100
}
async function fetchList() {
const { total, ...params } = queryParams
await fetch('http://xxxx/api/list', params)
}
我们可以通过结构+展开运算符来让代码变得优雅。
2. 展开运算符其他应用场景
2.1 合并数组对象
const arr1 = [1,2,3,4]
const arr2 = [5,6,7]
// 如果要是结构单个数组，就相当于对那个数组进行了浅拷贝
console.log([...arr1, ...arr2])
const obj1 = { a: 1, b: 2 }
const obj2 = { a: 3, d: 2 }
// 如果要是结构单个对象，就相当于对那个对象进行浅拷贝
console.log({ ...obj1, ...obj2 })
2.2 在函数中使用
function sum(...args) {
return args.reduce((prev, item) => prev + item, 0)
}
console.log(1,2,3,4,5). // 15
