阅读 163

扩展运算符在项目中的使用

经常看到项目中有人用到扩展运算符,基础的自己也会用,今天想彻底理解一下 参考: 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)

(参考 github.com/tc39/propos…)

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)
复制代码

文章分类
前端
文章标签