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

Chalk

关注

发布于: 2021 年 04 月 02 日

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

对象操作方法

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 日阅读数: 19

原文链接:【http://xie.infoq.cn/article/131f49e02804a79c5674f7755】。

Chalk

关注

万码皆同源！ 2021.03.28 加入

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

发布

暂无评论

创作场景

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

对象操作方法

一: 对象转数组

* 数据展示

1) Object.keys()

2) Object.values()

3) Object.entries

4) Object.assign()

二: 模拟大量 json 数据

Chalk

评论