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

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

 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>

数组知识参考地址:

数组参考

posted @ 2019-03-05 11:36  星光笔  阅读(3109)  评论(1编辑  收藏  举报