对象与数组的扁平化你真的了解吗

扁平化概念

扁平化是指将一个多维数组或对象变为一维数组js

前言

最近写项目中遇到一个问题 多级嵌套数组对象总是需要传递下标或者key 才可以访问下一级数据 可是如果我传入字符串就无法直接访问

[1，[2,3],[4,5,[6]] ---->[1,2,3,4,5,6]

实现

1.reduce

遍历数组每一项，若值为数组则递归调用否则合并

const arr = [1, [2, 3, [4, 5]], 6]
// reduce 加数器 语法 arr.reduce(方法,初始化的值)
function fn(arr) {
    return arr.reduce((prev, cur, index) => {
        if (Array.isArray(cur)) {// 判断是不是数组
            return prev.concat(fn(cur))// 是数组 递归调用
        } else {
            return prev.concat(cur) // 合并 这个数组
        }
    }, [])
}

console.log(fn(arr));  //  [1, 2, 3, 4, 5, 6]

reduce是数组中的一种方法

2.toString & split

调用数组的 toString 方法,将数组变为字符串再用 split 分割还原为数组

function fn(arr) {
    // 数组转换为字符串然后进行spli(',') 进行拆分为原数组
    // 这时 原数组是字符串数组 这就需要把每一项转换为数字
    return arr.toString().split(',').map(function (item) {
        return Number(item)
    })
}

3. join & split

和上面的toString 方法类似 join 也可以将数组转化为 字符串

function fn(arr) {
    return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}

4.递归

递归的遍历每一项，若为数组则继续遍历，否则 concat

function fn(arr) {
    let res = []
    arr.map(item => {
        if (Array.isArray(item)) { // 判断是不是数组
            res = res.concat(fn(item))
        } else {
            res.push(item)
        }
    })
    return res;
}

5. 拓展运算符

es6 的扩展运算符能将二维数组变为一维

[].concat(...[1, 2, 3, [4, 5]])

遍历数组arr，若arr[i]为数组则递归遍历，直至arr[i]不为数组然后与之前的结果concat。

对象的方法

1.reduce

通过递归合并和拼接路径进行转换为 arr.name=value

const fillObj = (types, actionKey = '') => { // 循环对象中的的 key 进行合并为对象
    let res = Object.keys(types).reduce((msg, nextvs): any => { //  获取当前 obj[变量值] 
        const value = types[nextvs]  // 进行拼接 value
        const Key = actionKey ? `${actionKey}.${nextvs}` : nextvs   //  作用：进行拼接 KEY  判断  当前   obj[变量值] 有没有子级 如果有 递归
        if (typeof value === 'object') { // 如果还是对象的话 进行递归调用
            Object.assign(msg, fillObj(value, nextvs)) // 合并当前对象 和递归出来的返回值
        } else {
            msg[Key] = value// 拿到 拼接的 key 和当前value 组成对象键值对
        }
        return msg
    }, {})
    return res
}

欢迎提出建议

---记录旅行遇到的事迹         仅用于旅行记录 欢迎志同道合的朋友