对象和数组的扁平化

扁平化就是对数据结构处理,把树状的结构平铺开来,变成链状的,这个过程是一定会用到循环的,我们要判断当前数据是否有嵌套元素。

对象扁平化

把对象里的数据平铺成一个个键值对的结构

function objFlat(data) {
    
    
  let result = {
    
    }
  //recurse函数的两个参数分别为当前元素cur,和属性prop(用来判断对象是否有下一级)
  function recurse(cur, prop) {
    
    
    if(Object(cur) !== cur) {
    
    
    //如果cur不是对象,那这就是最后一层,直接返回
      result[prop] = cur
    }else if(Array.isArray(cur)) {
    
    
    //如果它是数组,并且不为空,那就遍历数组,对数组的每一项进行判断,数组元素是否符合我们的递归条件;如果数组为空,扁平化的对象元素的值就是空数组[]
      for(let i = 0; i< cur.length; i++) {
    
    
        recurse(cur[i], prop + '[' + i + ']')
      }
      if( cur.length === 0) result[prop] = []
    }else {
    
    
    //否则这个元素是对象,那就遍历对象,并判断对象的每一个元素是否符合递归标准,如果符合再次进入recurse函数
      let isEmpty = true
      for(let p in cur) {
    
    
        isEmpty = false
        recurse(cur[p], prop? prop + '.' + p : p)
      }
      //这个元素的值是一个空对象{}
      if(isEmpty && prop) result[prop] = {
    
    }
    }
  }
  //第一次调用传入整个数据结构,第二个参数为空
  recurse(data,'')
  return result
}

数组扁平化

把数组里的数据平铺成一个个基本数据类型的值的结构

数组的扁平化方法有很多,比如ES6的扩展运算符操作数组可以直接展开数组的第一层;ES6的数组的flat方法的作用就是用来数组扁平化,并且根据传入的参数来决定展开的层级;

//1,扩展运算符 + 字符串拼接
function arrFlat1(arr) {
    
    
//数组的some()方法用于检测数组中的元素是否满足指定条件,如果有一个元素满足条件,表达式返回true,剩余的元素不再遍历,如果没有满足条件的元素,则返回false;
  while(arr.some(item => Array.isArray(item))) {
    
    
  //数组的concat()方法于连接两个或多个数组
    arr = [].concat(...arr)
  }
  return arr
}

//2,数组的flat()方法
function arrFlat2(arr) {
    
    
  return arr.flat(Infinity);
}

//3,正则方法
//先使用JSON.stringify方法将数组转换成一个由括号包裹、元素间以逗号相隔的字符串,最后将利用JSON.parse方法解析成数组对象
function arrFlat3(arr) {
    
    
  let str = JSON.stringify(arr)
  ///(\[\])/g:全局匹配'['和']',并用''替换掉它们,匹配结果是字符串,使用字符串的split()方法,返回数组
  return str.replace(/(\[\])/g, '').split(',')
}

//4,数组字符串方法
function arrFlat4(arr) {
    
    
//toString() 方法是顶层Object 类中的方法,将对象的hashCode值转成16进制字符串;
//parseInt() 方法用于解析一个字符串,强制转换为整数,并返回这个整数;
  return arr.toString().split(',').map(ele => parseInt(ele))
}

//5,递归方法
function arrFlat5(arr, result = []) {
    
    
  if(!Array.isArray(arr)) {
    
    
    result.push(arr)
    return result
  }
  for(let value of arr) {
    
    
    arrFlat5(value, result)
  }
  return result
}

//6,reduce()方法(递归方法的简化)
//reduce()方法接收两个参数:回调函数和初始值;回调函数可接收四个参数,分别是初始值(或者上一次回调函数的返回值),当前元素值,当前索引,以及调用 reduce 的数组,之前的笔记我也写过它的实现过程;
function flatten(arr) {
    
    
    return arr.reduce(function(pre, cur){
    
    
    //初始值为[],回调函数返回拼接结果数组
        return pre.concat(Array.isArray(cur) ? flatten(cur) : cur)
    }, [])
}

猜你喜欢

转载自blog.csdn.net/m0_52276756/article/details/129582438