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

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

 1 <script> 2       // 2019-3-4 面试题：数组和对象直接的转化 3       //  合并对象中的一维数组为二维数组，并且返回新数组 4       // 返回前的对象 5       let obj = { 6         0: [44, 67, 96], 7         1: [90, 43, 56], 8         2: [56, 67, 33], 9         3: [80, 96, 45]10       };11       // 返回后的数组12       let arr = [[44, 90, 56, 80], [67, 43, 67, 96], [96, 56, 33, 45]];13 </script>

第一种写法：

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

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

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

理由：

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

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

 1 <script> 2     //  参考答案： 3       /* 第一种写法 4        *  先遍历对象，再遍历对象中的数组取值 5        * 6        * 7        */ 8       let data = { 9         0: [44, 67, 96],10         1: [90, 43, 56],11         2: [56, 67, 33],12         3: [80, 96, 45]13       };14       var arr = [];15       //  遍历对象的每一个对象16       for (var item in data) {17         //  map取对象每一个total对应的值取赋值18         data[item].map((i, index) => {19           if (!arr[index]) {20             arr[index] = [];21           }22           arr[index].push(data[item][index]);23         });24       }25       console.log(arr);26 </script>

第二种：es6语法实现

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

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

<script>   /*
       *第二种写法 arry.from 使用
       *       */
      const getResult = obj =>
        obj[0].map((_, index) => 
          Array.from(Object.values(obj), x => x[index])
　　　　);
      getResult(obj);
      console.log(getResult(obj));</script>

第二种方法的缺点：

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);

总结：

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

今日面试题：

<script>     // 2019-3-5 今日面试题,数组去重
      let m = [1, 2, 2],
        n = [2, 3, 3];      // 返回 m 和n 的不重复的元素，并且按照从小到大排序
　　　//返回后的结果
　　　

　　  const l =[1,2,3]

</script>

数组知识参考地址：

数组参考

作者：星光笔

原文出处：https://www.cnblogs.com/starryqian/p/10475679.html