大厂前端面试常问的数据处理，必会系列（四）

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情

• 将js对象转化为树形结构
• 使用ES5和ES6求函数参数的和
• 解析 URL Params 为对象
• 有序二维数组查找目标值
• 二维数组斜向打印
• 找出Element元素的全部Input子元素
• 将手机号中间四位变成*

1. 将js对象转化为树形结构

 // 转换前：
 source = [{
             id: 1,
             pid: 0,
             name: 'body'
           }, {
             id: 2,
             pid: 1,
             name: 'title'
           }, {
             id: 3,
             pid: 2,
             name: 'div'
           }]
 // 转换为: 
 tree = [{
           id: 1,
           pid: 0,
           name: 'body',
           children: [{
             id: 2,
             pid: 1,
             name: 'title',
             children: [{
               id: 3,
               pid: 1,
               name: 'div'
             }]
           }
         }]

代码实现：

 function jsonToTree(data) {
   // 初始化结果数组，并判断输入数据的格式
   let result = []
   if(!Array.isArray(data)) {
     return result
   }
   // 使用map，将当前对象的id与当前对象对应存储起来
   let map = {};
   data.forEach(item => {
     map[item.id] = item;
   });
   // 
   data.forEach(item => {
     let parent = map[item.pid];
     if(parent) {
       (parent.children || (parent.children = [])).push(item);
     } else {
       result.push(item);
     }
   });
   return result;
 }

2. 使用ES5和ES6求函数参数的和

ES5：

 function sum() {
     let sum = 0
     Array.prototype.forEach.call(arguments, function(item) {
         sum += item * 1
     })
     return sum
 }

ES6：

 function sum(...nums) {
     let sum = 0
     nums.forEach(function(item) {
         sum += item * 1
     })
     return sum
 }

3. 解析 URL Params 为对象

 let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';
 parseParam(url)
 /* 结果
 { user: 'anonymous',
   id: [ 123, 456 ], // 重复出现的 key 要组装成数组，能被转成数字的就转成数字类型
   city: '北京', // 中文需解码
   enabled: true, // 未指定值得 key 约定为 true
 }
 */
 function parseParam(url) {
   const paramsStr = /.+?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来
   const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中
   let paramsObj = {};
   // 将 params 存到对象中
   paramsArr.forEach(param => {
     if (/=/.test(param)) { // 处理有 value 的参数
       let [key, val] = param.split('='); // 分割 key 和 value
       val = decodeURIComponent(val); // 解码
       val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字
       if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key，则添加一个值
         paramsObj[key] = [].concat(paramsObj[key], val);
       } else { // 如果对象没有这个 key，创建 key 并设置值
         paramsObj[key] = val;
       }
     } else { // 处理没有 value 的参数
       paramsObj[param] = true;
     }
   })
   return paramsObj;
 }

4. 有序二维数组查找目标值

 var findNumberIn2DArray = function(matrix, target) {
     if (matrix == null || matrix.length == 0) {
         return false;
     }
     let row = 0;
     let column = matrix[0].length - 1;
     while (row < matrix.length && column >= 0) {
         if (matrix[row][column] == target) {
             return true;
         } else if (matrix[row][column] > target) {
             column--;
         } else {
             row++;
         }
     }
     return false;
 };

5. 二维数组斜向打印

 function printMatrix(arr){
   let m = arr.length, n = arr[0].length
     let res = []
   
   // 左上角，从0 到 n - 1 列进行打印
   for (let k = 0; k < n; k++) {
     for (let i = 0, j = k; i < m && j >= 0; i++, j--) {
       res.push(arr[i][j]);
     }
   }
 ​
   // 右下角，从1 到 n - 1 行进行打印
   for (let k = 1; k < m; k++) {
     for (let i = k, j = n - 1; i < m && j >= 0; i++, j--) {
       res.push(arr[i][j]);
     }
   }
   return res
 }

6. 找出Element元素的全部Input子元素

 function findAllInputElement(element) {
   const rec = function (element, arr) {
     if (element.nodeName.toUpperCase() === "INPUT") {
       arr.push(element)
     }
     let children = element.childNodes
     children.forEach(element => {
       rec(element, arr)
     });
     return arr
   }
   return rec(element, [])
 }

7. 将手机号中间四位变成*

（1）利用数组splice，split，join方法

 const tel = 18877776666; 
 tel = "" + tel; 
 var ary = tel.split(""); 
 ary.splice(3,4,"****"); 
 var tel1 = ary.join(""); 
 console.log(tel1);

（2）利用字符串的substr方法

 const tel = 18877776666; 
 tel = "" + tel; 
 var tel1 = tel.substr(0,3) + "****" + tel.substr(7) 
 console.log(tel1);

（3）利用字符串substring方法

 const tel = 18877776666;  
 tel = "" + tel; 
 var tel1 =tel.replace(tel.substring(3,7), "****") 
 console.log(tel1);

（4）利用正则

 const tel = 18877776666;  
 tel = "" + tel; 
 var reg=/(\d{3})\d{4}(\d{4})/; 
 var tel1 = tel.replace(reg, "$1****$2") 
 console.log(tel1);