数组及对象的扁平化

目录

    • 数组扁平化就是把多维数组转化为一维数组:
    • toString + split
    • join+split 同上
    • reduce
    • 递归 + 循环
    • 扩展运算符
    • flat()
    • 对象扁平化就是将复杂的多层的对象转化为一维对象:

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

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

你可能感兴趣的:(JS)