数组及对象的扁平化

数组扁平化就是把多维数组转化为一维数组:

[1, [2, 3, [4, 5]]]  ——>  [1, 2, 3, 4, 5]

toString + split

先将数组转化为字符串,在使用split将字符串转化为数组:

arr.toString().split(',').map( item => Number(item))

join+split 同上

              //1,2,3,4,5  ['1','2','3','4','5']
    let newArr=arr.join().split(',').map(item=>{
      return Number(item)
      //[1,2,3,4,5]
    })

reduce

reduce会遍历数组,每次拿前面的元素和后面的元素进行操作,完成后将值返回给第一个参数,在进行比对

reduce方法会对根据回调函数对数组的每个元素进行操作:

const newArr = function(arr){
  return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5]

递归 + 循环

function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}

扩展运算符

…扩展运算符可以取出参数的所有的可以遍历的对象,并拷贝到当前的对象中

   function flatten(arr) {
     while (arr.some(item => Array.isArray(item))) {
       arr = [].concat(...arr);
     }
     return arr;
   }
   console.log(flatten(arr)); // [1, 2, 3, 4, 5]

flat()

flat()是ES6中的一个数组方法,该方法会按照一个可指定的深度depth递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。该方法不会改变原数组

语法: let newArray = arr.flat(depth)

注意:

depth为指定要提取嵌套数组的结构深度,默认值为 1
flat() 方法会移除数组中的空项
 let arr1 = [1, 2, [3, 4]];
 arr1.flat(); // [1, 2, 3, 4]

 // 指定要提取嵌套数组的结构深度为1层
 let arr2 = [1, 2, [3, 4, [5, 6]]];
 arr2.flat(1); // [1, 2, 3, 4, [5, 6]]

 // 指定要提取嵌套数组的结构深度为2层
 let arr3 = [1, 2, [3, 4, [5, 6]]];
 arr3.flat(2); // [1, 2, 3, 4, 5, 6]

 // 使用 Infinity 作为深度,展开任意深度的嵌套数组
 let arr4 = [1, 2, [3, 4, [5, 6]]]
 arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6]

 // 移除数组中的空项
 let arr5 = [1, 2, , 4, 5];
 arr5.flat(); // [1, 2, 4, 5]

对象扁平化就是将复杂的多层的对象转化为一维对象:

let obj = { a: { d: 1 }, 
            d:  2, 
            e: [1, 2] 
          }
function flatten(data) {
    var result = {};
    function recurse(cur, prop) {
        // 如果输入进来的是不是对象,就将其放在数组中,返回
        if (Object(cur) !== cur) {
            result[prop] = cur;
        // 如果输入进来的是数组,长度不为0就递归数组,得出结果
        } else if (Array.isArray(cur)) {
            for (var i = 0, len = cur.length; i < len; i++)
                recurse(cur[i], prop + "[" + i + "]");
            if (len == 0)  result[prop] = [];
        } else {
            var isEmpty = true;
            for (var p in cur) {
                isEmpty = false;
                recurse(cur[p], prop ? prop + "." + p : p);
            }
            if (isEmpty && prop)
                result[prop] = {};
        }
    }
    recurse(data, "");
    return result;
};
console.log(flatten(obj))  // {a.d: 1, d: 2, e[0]: 1, e[1]: 2}

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值