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

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

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

第一种写法：

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

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

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

理由：

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

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

<script>
    //  参考答案：
      /* 第一种写法
       *  先遍历对象，再遍历对象中的数组取值
       *
       *
       */
      let data = {
        0: [44, 67, 96],
        1: [90, 43, 56],
        2: [56, 67, 33],
        3: [80, 96, 45]
      };
      var arr = [];
      //  遍历对象的每一个对象
      for (var item in data) {
        //  map取对象每一个total对应的值取赋值
        data[item].map((i, index) => {
          if (!arr[index]) {
            arr[index] = [];
          }
          arr[index].push(data[item][index]);
        });
      }
      console.log(arr);
</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>

数组知识参考地址：

数组参考