你不知道的JS之数据扁平化处理

本文深入探讨了数组扁平化的概念及其在数据处理中的重要性,通过多种方法展示了如何将多维数组转化为一维数组,包括递归方法、数组原型链编程和ES6语法等。同时,提供了代码示例和优化策略,旨在帮助开发者更高效地进行数组操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是扁平化:

扁平化概念的核心意义是:去除冗余、厚重和繁杂的装饰效果

具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上,则强调了抽象、极简和符号化 ————以上是设计的扁平化。

不难想象,我们为什么要让数据也扁平化。那是为了更加能够让信息更加的凸显出来

对于多维数组,扁平化的目的就是让他降维。

以此为知识点的切入口

上代码~

//数组降维,扁平化
function isArray(obj) {
    return Object.prototype.toString.call(obj) == '[object Array]'

}
var arr = [1, [1], 2, 3, [2, 3, 4, [null, 2, 3, 4, [1]]]];
function flatten(arr) {
    var arr = arr || [],
        resArr = [],
        len = arr.length

    for (let i = 0; i < len; i++) {
        if (isArray(arr[i])) {
            resArr = resArr.concat(flatten(arr[i]))  //数组中可能还有数组
            // flatten(resArr)                 //递归失败原因
            console.log(resArr)
        } else {
            resArr.push(arr[i])
        }
    }
    return resArr
}

对于以上代码。可能不够简洁和性能

一下优化的代码,通过数组原生的方法。然后在原型链编程。

Array.prototype.flatten1 = function () {
    var resArr = []
    this.forEach(function (item) {
        Object.prototype.toString.call(item) == '[object Array]' ? resArr = resArr.concat(item.flatten1()) : resArr.push(item)
    })
    return resArr
}

在来一个ES6语法

const flatten2 = (arr)=>{
    let resArr = []
    arr.forEach(item=>Object.prototype.toString.call(item) == '[object Array]' ? resArr = resArr.concat(flatten2(item)) : resArr.push(item))
    return resArr
}

方法很多种~自己对底层的学习还不到位,

突然想到的(霸道的toString),只针对纯数组,数组里有对象函数的话,就不行。用es6的扩展运算符只能拔一层括号,想多层的话可以通过递归实现,2018年11月2日12:13:29

字符串变成数组方法split

参数是匹配相同的字符串,比如我匹配了逗号。他就会以逗号分割字符串

未完待续。。。。。。

 

 

 

今天小小复习了数组的两个方法

 

slice()和splice()方法

slice(a,b) //从a位子开始到b结束。

splice(a,b)  //从a位子开始截取b位

### JavaScript 中树形数据结构扁平化的算法 在 JavaScript 中,树形数据通常表示为嵌套的对象数组。为了将其转换为平面列表,可以采用递归方法来遍历整个树并提取所需的数据字段。 以下是实现此功能的一种常见方式: #### 使用递归函数 通过定义一个递归函数 `flattenTree` 来处理树形数据结构中的每一层节点,并将它们展平到单个数组中[^2]。 ```javascript function flattenTree(treeData) { const result = []; function traverse(node) { if (node.children && node.children.length > 0) { for (const child of node.children) { traverse(child); } } delete node.children; // 可选:删除 children 属性以简化结果 result.push(node); // 将当前节点加入结果集 } for (const root of treeData) { // 遍历根节点集合 traverse(root); } return result; } // 示例输入 const treeData = [ { id: 1, name: 'Node A', children: [ { id: 2, name: 'Node B', children: [] }, { id: 3, name: 'Node C', children: [{ id: 4, name: 'Node D', children: [] }] } ] } ]; console.log(flattenTree(treeData)); ``` 这段代码会返回如下结果: ```json [ {"id":1,"name":"Node A"}, {"id":2,"name":"Node B"}, {"id":3,"name":"Node C"}, {"id":4,"name":"Node D"} ] ``` 该方法的核心在于递归调用子节点的 `children` 数组,并逐步构建最终的结果数组[^2]。 --- #### 基于迭代的方式 如果希望避免显式的递归操作,则可以通过栈(stack)模拟递归来完成相同的功能[^3]。 ```javascript function flattenTreeIterative(treeData) { const stack = [...treeData]; // 初始化堆栈 const flatList = []; while (stack.length > 0) { const currentNode = stack.pop(); if (currentNode.children && currentNode.children.length > 0) { stack.push(...currentNode.children.reverse()); // 子节点入栈顺序需反转以保持原序 } delete currentNode.children; // 删除 children 字段 flatList.push(currentNode); } return flatList; } ``` 这种方法同样适用于大型树状结构,因为它会因递归过深而导致栈溢出问题[^3]。 --- #### 性能考虑 对于非常庞大的树形数据结构,建议优先选用基于栈的迭代版本,因为其内存占用更可控且易引发运行时错误。然而,在大多数实际场景下,简单的递归方案已经足够满足需求[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值