后端返回对象，前端需要转为数组形式渲染、for (let key in template)

1、功能(需求)描述

有两个对象，分别是originObj和templateObj。originObj是源数据对象，templateObj是模板对象，现在要根据模板对象的属性获取源数据对象相应的值。接着把模板对象的属性值最为标题，把源数据对象的属性值作为值一起放到新对象中；最后通过push把新对象添加到数组末尾处。

2、代码

function mergeObjectsIntoArrayObjects(origin = {}, template = {}) { let newArr = [], ran_char = (len = 10, min = 26) => String.fromCharCode(Math.floor(Math.random() * len) + min); for (let key in template) { newArr.push({ id: ran_char(26, 97) + ran_char(26, 65) + ran_char(10, 48), key, title: template[key], value: origin[key] }); } return newArr; } let originObj = { name: '张三', ags: 23, sex: '男', height: '172.3', occupation: '工程师', love: '游泳' }, templateObj = { name: '姓名', ags: '年龄', sex: '性别', height: '身高', occupation: '职业' }; console.log(mergeObjectsIntoArrayObjects(originObj, templateObj)); // (5) [{…}, {…}, {…}, {…}, {…}] // [ //     { id: "eT6", key: "name", title: "姓名", value: "张三" }, //     { id: "jR9", key: "ags", title: "年龄", "value": 23 }, //     { id: "zM5", key: "sex", title: "性别", value: "男" }, //     { id: "kD6", key: "height", title: "身高", value: "172.3" }, //     { id: "pW1", key: "occupation", title: "职业", value: "工程师" } // ] 

3、实现思路

定义originObj和templateObj两个类型为对象的变量。变量originObj里面的属性包含templateObj的所有属性，甚至比templateObj的属性还要多；变量originObj的属性值为value值，变量templateObj的属性值为title值。

第一步 定义名为mergeObjectsIntoArrayObjects的函数，函数接收两个参数，分别是origin和template。从ES6开始，函数参数可以指定默认值，分别设置两个参数的默认值为空对象，用来防止函数调用时没有实参的报错问题。 第二步 在函数顶部定义需要的变量newArr和ran_char。newArr用来保存最终的结果，ran_char变量是一个箭头函数，用来随机获取数字和大小写字母。如果箭头函数后面只是简单的一句表达式，那么就不需要写return关键字来执行返回操作，箭头函数有隐式返回值的功能。 第三步 Math.random() * len： random函数返回一个浮点数，伪随机数在范围从0到小于1，也就是说，从0(包括0)往上，但是不包括1(排除1)，然后可以缩放到所需的范围。len就是可缩放的范围。在这一步中会得到一个固定值，这个值需要跟后续的最小值进行相加，这两个值的和不会超过对应字符最大字符的uniCode值。 Math.floor() + min： floor函数总是返回小于等于一个给定数字的最大整数。只保留整数部分，丢掉小数点和小数值。==当值为负数时可能有些难理解，例如：-36.6得到的结果是-37，因为向下取整，所以-37小于-36。==这个表达式中的min就是最小的uniCode值。 对于javascript生成随机数的直观理解，在Math.floor(Math.random() * len) + min表达式中不难看出，min就是生成随机数的最小范围值。而Math.random() * len则是生成随机数的最大范围值，这个最大范围值并不是真正的最大范围值，需要通过len来确定最大值。random生成的随机数是从0到1(不包括1)，那么用这个随机数乘以len就可以得到一个固定值。这个固定值加上min最小值就会得到某个范围内的随机数。 例如len的值为26，min的值为65，random随机生成的值为0，结果就是Math.floor(0 * 26) + 65得到65。 又如len的值为26，min的值为65，random随机生成的值为0.99，结果就是Math.floor(0.99 * 26) + 65得到90。 这刚好就是小写字母的uniCode范围值，大写字母的uniCode范围值从65~90(包括两端)。 String.fromCharCode()：fromCharCode方法返回由指定的UTF-16代码单元序列创建的字符串。经过前面两步的准备工作，此时便可以获取到对应范围的字符了。 关于本功能(需求)的重点不在第三步，第三步无关紧要，只是为了给数据添加一个id作为元素的唯一值。 第四步 使用for in遍历template模板对象获取对应值，使用一个key值同时访问两个对象获取对应值，value值访问的是origin中的值，title值访问的是template中的值。接着把得到值放到新对象中，最后通过push向newArr数组末尾添加新对象即可。一定要使用模板作为遍历对象，如果使用源数据作为遍历对象，可能会存在undefined值，因为模板对象中不一定存在对应的属性。