经常看到项目中有人用到扩展运算符,基础的自己也会用,今天想彻底理解一下 参考: es6.ruanyifeng.com/#docs/array
扩展运算符主要是在对象和数组中运用,扩展运算符必须放到最后 除此之外,在函数传参里面直接写... 表示的是rest参数
ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中 参考:es6.ruanyifeng.com/#docs/funct…
1.扩展运算符的作用 ---数组
将一个数组转为用逗号分隔的参数序列
console.log(...['猪', '猪', '侠']) // 猪 猪 侠
console.log([...['猪', '猪', '侠']]) // ['猪', '猪', '侠']
// 第一个出来应该是'猪', '猪', '侠',那么打印出来会分为三个不用的东西打印,所以没有逗号,例如console.log(111, res)
// 第二个就是[]加上用逗号隔开的参数序列('猪', '猪', '侠'),所以为['猪', '猪', '侠']
2.扩展运算符在项目中的使用 --数组
2.1函数的调用
var arr = [1, 2]
function add(x,y) {
return x + y
}
console.log(add(...arr)); // 3
2.2将两个数组合成一个
项目示例
const routes = deepClone([...constantRoutes, ...asyncRoutes])
简单示例
const arr = ['猪', '猪']
const arr2 = ['侠', '侠', '侠']
console.log([...arr, ...arr2]) // ['猪', '猪', '侠', '侠', '侠']
2.3 两个数组去重合并
项目示例
const unqueIdArr = [ ...new Set([ ...associateTags, ...oldAssociateTags ].map(item => item.id)) ] // 去除重复的tagid
简单示例
const arr = ['猪', '猪']
const arr2 = ['侠', '侠', '侠']
var res =[...new Set([...arr, ...arr2])]
console.log(res); // ['猪', '侠']
3.扩展运算符的作用--对象（非常常用 es8)
Rest properties collect the remaining own enumerable property keys that are not already picked off by the destructuring pattern. Those keys and their values are copied onto a new object 意思就是,通过解构拿到一个数组中没有被挑出来的剩下的所有的键值对,剩余的键值对组成一个新的对象
4.扩展运算符在项目中的使用 --对象
4.1 处理参数
项目示例
// 调用接口(要解构出id单独使用,直接url传参,其他的数据,body传参
await simulatorSumbitApi({ ...this.formData })
// 接口
export function simulatorSumbitApi({ id, ...data }) {
const url = id ? `edit/${id}` : `add`
return request({
url: `simulatorList/${url}`,
method: `${id ? 'put' : 'post'}`,
data: data,
})
}
项目示例
// node端拿到前端传过来的数据,只对page和size做处理,其他的数据不做处理直接操作,这里是一个pagi的封装
paginationDeal({ query }) {
// page: 页面；size: 分页数; params: 其他参数
const { page = 1, size = 10, ...params } = Qs.parse(query)
const offset = (page - 1) * size
const limit = Number(size)
return { limit, offset, ...params }
}
简单示例
var obj = { name: '猪', age: 18, hobby: 'eat' }
var { name, ...res } = obj
console.log(res) // { age: 18, hobby: 'eat'}
4.2将对象里面的嵌套对象取出做为同级对象
项目示例
// 比如在node.js进行数据关联的时候,baseProfile这些是子表,所以子表的数据存在主表对象的某个属性(baseProfile)里面,当我们需要
//渲染所有的数据,是不是应该把子表的数据全部放到于对象同级,不懂得话看下面简单示例
async getUserProfile() {
const { ctx } = this
const { userId } = ctx.params
const { list } = await this.service.userManage.userBaseInfo.baseInfoById(userId)
const other = list.map(node => {
const item = node.toJSON()
const { baseProfile, basic, baseConsume, baseUserManage, ...rest } = item
return { ...baseProfile, ...basic, ...baseConsume, ...baseUserManage, ...rest }
})
this.success({ data: other[0] })
}
简单示例
var obj = {
name: 'huahua',
birth: '湖南',
other: {
age: '18',
hobby: 'swim'
},
extra: {
dog: 1,
cat: 2,
}
}
var { other, extra, ...rest } = obj
var res = { ...other, ...extra, ...rest }
console.log(res); // {age: "18", birth: "湖南", cat: 2, dog: 1, hobby: "swim", name: "huahua"}
4.3 替换对象属性名
简单示例
const obj = {
name: '沐头',
age: 18,
hobby: 'dance',
}
const { name : zhu, ...rest } = obj
const res = { zhu, ...rest }
console.log(res); // { age: 18, hobby: "dance", zhu: "沐头" }
4.4 替换数组中属性名
项目示例
// 传输入给后台,要以数组得形式传过去,但是key是固定是id和bonus,是不是这里压根没有用到扩展运算符,可以看下面得简单示例
this.scoreParams = this.scoreData.map(item => ({ id: item.id, bonus: item.score }))
await editScoreApi({ data: this.scoreParams })
简单示例
let arr = [
{id: 1, title: "绑定手机", test: 1 },
{id: 2, title: "实名认证", test: 1},
{id: 3, title: "游戏分享任务", test: 1},
]
const res = arr.map(item=>({...item, label: item.title, value: item.id}))
console.log(res);
输出:
[{id: 1, title: "绑定手机", test: 1, label: "绑定手机", value: 1},
{id: 2, title: "实名认证", test: 1, label: "实名认证", value: 2},
{id: 3, title: "游戏分享任务", test: 1, label: "游戏分享任务", value: 3}]
4.5 利用拿键值对得操作去做一些处理
项目示例
// 例如在node中导出的时候不需要传page和size,controller
const pageParams = type === 'exportExcel' ? {} : { limit, offset }
const { list, total } = await this.service.userManage.userInfoList.userList(userParams, pageParams)
// service里面,如果pageParams没有值就不会显示page和size
async userList({ userName = '', time, order, ...params }, pageParams没有值就不会显示page和size) {
const { Op } = this.app.Sequelize
const { rows, count } = await this.ctx.model.HxUser.findAndCountAll({
attributes: { exclude: [ 'createdAt', 'updatedAt' ] },
...pageParams,
})
return { list: rows, total: count }
}
简单示例
var obj = {}
function test(obj) {
// 就相当于没有往里面传入任何得参数
var res = {
...obj
}
console.log(res); // {}
}
test(obj)
// 有数据的时候
var obj = { name: 'age' }
function test(obj) {
// 就相当于没有往里面传入任何得参数
var res = {
...obj
}
console.log(res); // { name: age }
}
test(obj)
5.rest参数
rest参数也是用...表示: 将用逗号分隔的参数序列转成数组,刚好与扩展运算符在数组中使用相反 其实我项目中用的是比较少的,几乎没用过
简单示例
// rest 参数搭配的变量是一个数组
function getArray(...params) {
console.log(params) // [1,2]
}
getArray(1, 2)
