前端面试题---数组和对象的转化

在日常工作中，我们需要根据后端返回的数据结构组装组件需要的数据，如下所示：给出如下一个对象，要求返回对象中的数组的相对应的新的二位数组

 1 

第一种写法：

1.先取出对象中的每一个属性，然后再根据每一项的数组去循环，

2.新建空数组，保存值，注意新的属性需要判断是否有数组存在

3.优化意见：如果数组长度不是很长，比如不超过200条，可以采用一下方法，如果太多，那么我们需要先分组，再去返回数组的数据，再去渲染我们的页面，

理由：

1）减少数据量的传输，减少服务器丢包的情况，

2）减少数据处理，可以快速渲染页面，减少用户登录的事件，白屏的出现等

 

 1 

第二种：es6语法实现

1.生成一个变量 const getResult（）；注意这里的变量是函数新的返回值，即 Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。

2. 注意map 这里不要写花括弧{}，不然会打印错误，因为写{}就是一个函数体，需要return 一下返回值

第二种方法的缺点：

1.es6支持性的考虑，兼容未判断，ie9以下不支持，ios8需要考虑

2.obj[0]不支持，不能下标不是0的对象，需要转化处理

优化后的代码：

function getArr(obj) {
        if (typeof obj != "object") {
          console.warn("参数不正确");
          return;
        }
        if (Array.from) {
          obj = Object.values(obj);
          const arr = obj[0].map((_, index) => Array.from(obj, a => a[index]));
          return arr;
        }
        var arr = [];
        //  遍历对象的每一个对象
        for (var item in obj) {
          //  map取对象每一个total对应的值取赋值
          obj[item].map((i, index) => {
            if (!arr[index]) {
              arr[index] = [];
            }
            arr[index].push(obj[item][index]);
          });
        }
        return arr;
      }
      getArr(obj);

总结：

实现代码需求的代码千万种，只有不断优化，提高性能稳定和代码复用性才好啊。

今日面试题：

数组知识参考地址：

数组参考