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

我就是我 2022-11-26 01:39 153阅读 0赞

### 目录 ###

*   *   *  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()方法的妙用》][reduce]

#### 1.3 join + split ####

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

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

#### 1.4 递归 + 循环 ####

#### 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. 对象扁平化 ###

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

[reduce]: https://blog.csdn.net/qq_42033567/article/details/107902216