数组扁平化 && 对象扁平化

目录

• ​​1. 数组扁平化​​

• ​​1.1 toString + split​​
• ​​1.2 reduce​​
• ​​1.3 join + split​​
• ​​1.4 递归 + 循环​​
• ​​1.5 扩展运算符​​
• ​​1.6 flat()​​

• ​​2. 对象扁平化​​

1. 数组扁平化

数组扁平化就是将多维数组转化为一维数组：

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

1.1 toString + split

先将数组转化为字符串，在使用split将字符串转化为数组：

let arr = [1, [2, 3, [4, 5]]]
function flatten(arr) {
    return arr.toString().split(',').map( item => Number(item))
}
console.log(flatten(arr)) // [1, 2, 3, 4, 5]      

用split形成的数组的每个元素仍然是字符串，需要将其转化为数字

注意： 仅适用于数组元素都是数字的情况

1.2 reduce

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

let arr = [1, [2, 3, [4, 5]]] 
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]      

更多​

​reduce()​

​​方法的使用：《数组reduce()方法的妙用》

1.3 join + split

​

​join()​

​方法和上面的toString方法类似，都能将数组转化为字符串

function flatten(arr) {
    return arr.join(',').split(',').map( item => parseInt(item) )
}      

1.4 递归 + 循环

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

1.5 扩展运算符

​

​...​

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

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

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

2. 对象扁平化

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}