前端面試題---數組和對象的轉化

在日常工作中，我們需要根據后端返回的數據結構組裝組件需要的數據，如下所示：給出如下一個對象，要求返回對象中的數組的相對應的新的二位數組

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

數組知識參考地址：

數組參考