前言

从今天开始更新“厕所阅读之js”系列文章，利用好宝贵的上厕所时间！提升自己！
作者也是个初学者，不足之处还希望大家多多指教！！

正文

1.什么是数组扁平化？

简单来说就是将一个多维数组 转换为一个一维数组
eg: [1,[2,[3,4],5],6] -> [1,2,3,4,5,6]

2.如何实现数组扁平化？

方法一：利用es6中的flat函数

flat函数的用法：

// 默认当前只拉平一层
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

// 传入参数2表示当前要拉平两层
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

// 传入Infinity，不管多少层都转为一维数组
[1, 2, [3, [4, 5]]].flat(Infinity)
// [1, 2, 3, 4, 5]

复制代码

小结：

• Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维数组。该方法返回一个新数组，对原数据没有影响。
• flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。
• 如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

方法二：通过递归实现

先上代码：

 let res = []
 function flatten(arr) {
     for (let i=0 ;i<arr.length; i++) {
         let temp = arr[i]
         // 判断是否是数组
         if (Array.isArray(arr[i])) {
             // 是数组的话则继续调用flatten函数
             flattern(arr[i])
         } else {
             // 如果不是数组则加入res中
             res.push(arr[i])
         }
     }
     // 最后返回的是一个一维数组
     return res
 }
 res = flatten(arr)
 console.log(res)
复制代码

小结：

• 循环数组，通过Array.isArray()方法来判定当前索引位置的值是否是数组
• 如果是数组的情况则继续调用flatten函数 “分解”
• 如果不是数组就添加到res数组中

方法三：利用reduce函数改进 方法二

reduce函数的用法:

/*
reduce函数中可以传入两个参数 callback 和 InitialValue
    callback 参数：
        pre 初始值, 或者计算结束后的返回值
        cur 当前元素
        index 当前元素的索引
        arr 当前元素所属的数组对象
    InitialValue 初始值
*/
 let res = []
 function flatten(arr) {
     return arr.reduce((pre,cur)=>{
         return pre.concat(Array.isArray(cur)?flatten(cur):cur) 
     },[])
 }
 res = flatten(arr)
 console.log(res)
复制代码

小结：

• 初始值为[] 通过三元表达式进行数组和非数组情况的处理
• 如果是数组进行递归操作
• 如果非数组则进行拼接

方法四：利用扩展运算符

拓展运算符是什么？

对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let res = []
function flatten(arr) {
    // 判断是否是数组，是的话进行一次拓展符运算 
    // 经过一次之运算后 arr = [1,2,3,4,5,[6,7]]  等到扫描到时进行下一次拓展运算
    while (arr.some((item) => Array.isArray(item))) {
        arr = [].concat(...arr)
    }
    return arr
}
console.log(flatten(arr))
复制代码

小结：

• some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
• 当遍历到满足是数组情况的元素时，进行拓展符运算

方法五：toString & split

function flatten(arr) {
    return arr.toString().split(',').map(function(item) {
        return Number(item);
    })
} 
复制代码

小结：

• map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
• map() 方法按照原始数组元素顺序依次处理元素。
• 因为split分割后形成的数组的每一项值为字符串，所以需要用一个map方法遍历数组将其每一项转换为数值型

方法六： join & split

function flatten(arr) {
    return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}
复制代码

小结：

• 和toString一样，join也可以将数组转换为字符串

以上就是本篇文章的全部内容了，如果觉得有所收获，不妨点个赞再走