写点什么

关于 Object, 你所必须知道的!

用户头像
Chalk
关注
发布于: 2021 年 04 月 02 日
关于Object,你所必须知道的!

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

对象操作方法

  • 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对应valuetags: [{ "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 库~~~

发布于: 2021 年 04 月 02 日阅读数: 8
用户头像

Chalk

关注

万码皆同源! 2021.03.28 加入

我有一杯酒,浑浊的佳酿,含工作,含繁琐,含生活!

评论

发布
暂无评论
关于Object,你所必须知道的!