开发常用对象与数组之间的操作

对象操作方法

• Object.assign(): 对象合并，将一个对象或多个对象复制到一个对象中去

• Object.keys(): 以数组的形式将指定对象的属性提取出来

• Object.values(): 以数组的形式将指定对象的值提取出来

• Object.entries(): 以数组的形式将对象的键值分别提取出来

一: 对象转数组

日常开发中，表单是经常遇见的，针对表单数据就会需要做一系列转换

* 数据展示

var form: { op1: '部门一', op2: '职位一', op3: '类型一', op4: '品名一', op5: '内容一', content1: '搜索一', content2: '搜索二', content3: '搜索三' }

1) Object.keys()

• 遍历对象的键(属性)

// 遍历对象的键(属性)，返回数组
const result = Object.keys(form)
console.log(result)
// ["op1", "op2", "op3", "op4", "op5", "content1", "content2", "content3"]

• 配合map()使用

表单对象按键值对形式转换成数组对象

var form: { op1: '部门一', op2: '职位一', op3: '类型一', op4: '品名一', op5: '内容一', content1: '搜索一', content2: '搜索二', content3: '搜索三' }

// 转换前 => => => 转换后

// form中的keys对应type并进行了中文转换，value对应value
tags: [{ "type": "部门：", "value": "部门一" },
 { "type": "职位：", "value": "职位一" },
 { "type": "类型：", "value": "类型一" },
 { "type": "品名：", "value": "品名一"},
 { "type": "内容：",  "value": "内容一" },
 { "type": "搜索一：", "value": "搜索一" },
 { "type": "搜索二：", "value": "搜索二" },
 { "type": "搜索三：", "value": "搜索三" }]

实现代码:

const tags = []
const result = Object.keys(form).map((i) => {
    switch (i) {
      case 'op1':
        return tags.push({ type: '部门：', value: form[i] })
      case 'op2':
        return tags.push({ type: '职位：', value: form[i] })
      case 'op3':
        return tags.push({ type: '类型：', value: form[i] })
      case 'op4':
        return tags.push({ type: '品名：', value: form[i] })
      case 'op5':
        return tags.push({ type: '内容：', value: form[i] })
      case 'content1':
        return this.tags.push({ type: '搜索一：', value: form[i] })
      case 'content2':
        return this.tags.push({ type: '搜索二：', value: form[i] })
      case 'content3':
        return this.tags.push({ type: '搜索三：', value: form[i] })
      default:
        return ''
    }
})

2) Object.values()

• 遍历对象的值

// 遍历对象的值，返回数组
const result = Object.values(form)
console.log(result)
// ["部门一", "职位一", "类型一", "品名一", "内容一", "搜索一", "搜索二", "搜索三"]

3) Object.entries

• 使用Object.entries(obj) 对象以 ['键','值'] 形式返回一个数组

const result = Object.entries(form)
console.log(result)
// 结果
// [ [ "op1", "部门一" ], [ "op2", "职位一" ], [ "op3", "类型一" ], [ "op4", "品名一" ], [ "op5", "内容一" ], [ "content1", "搜索一" ], [ "content2", "搜索二" ], [ "content3", "搜索三" ] ]

4) Object.assign()

• 合并一个或多个对象，相同属性的对象会合并，后者覆盖前者

• 基本使用: Object.assign({}, Object)

// 也可以实现一个对象浅拷贝
const result = Object.assign({}, form)
console.log(result)
// { "op1": "部门一", "op2": "职位一", "op3": "类型一", "op4": "品名一", "op5": "内容一", "content1": "搜索一", "content2": "搜索二", "content3": "搜索三" }

二: 模拟大量json数据

开发中免不了需要大量测试数据，这时我们可以定制化

此方法只做展示作用，根据数据格式，可以自行修改规则

//  定义数据格式
  const arr = [
    { value: 'userName', type: 'name' },
    { value: 'nickName', type: 'name' },
    { value: 'postion', type: 'String' },
    { value: 'sex', type: 'Boolean' },
    { value: 'phone', type: 'phone' },
    { value: 'email', type: 'email' },
    { value: 'qq', type: 'string' },
    { value: 'address', type: 'string' },
    { value: 'disable', type: 'Boolean' },
    { value: 'code', type: 'Number' },
    { value: 'openId', type: 'wx' },
    { value: 'dingUserId', type: 'dd' },
    { value: 'orgName', type: 'orgName' },
    { value: 'modifyUser', type: 'mod' },
    { value: 'modifyTime', type: 'tim' }
  ]

// 根据数据格式模拟一万条对应数据
const mk = new Array(10000).fill().map((item, i) => {
    var kv = {}
    arr.forEach((el) => {
      switch (el.type) {
        case 'ID':
          return (kv[el.value] = i + 1)
        case 'Boolean':
          return (kv[el.value] = Math.random() > 0.5 ? '男' : '女')
        case 'Date':
          return (kv[el.value] =
            new Date().getFullYear() +
            '/' +
            (new Date().getMonth() + 1) +
            '/' +
            new Date().getDate())
        case 'Number':
          return (kv[el.value] = i + Math.floor(Math.random() * 100))

        case 'name':
          return (kv[el.value] = namedata.split(',')[
            Math.floor(Math.random() * namedata.split(',').length)
          ])
        case 'tel':
        case 'phone':
          return (kv[el.value] =
            teldata[Math.floor(Math.random() * teldata.length)] +
            (Math.floor(Math.random() * 10000000) + 10000000))
        case 'age':
          return (kv[el.value] = Math.floor(Math.random() * 100))
        case 'String':
        default:
          return (kv[el.value] =
            el.value + Math.floor(Math.random() * 100000))
      }
    })
    return kv
  })

// mk就是一个长度为10000的数组内容格式为: [{...},{...},{...}]
  this.tableData = mk

当然，你也可以自行封装或者使用现有的各种Mock库~~~