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

什么是扁平化:

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

具体表现在去掉了多余的透视、纹理、渐变以及能做出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位

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
扁平化数据指的是将具有层级关系的数据展开成一维结构,而树形结构则是将具有层级关系的数据呈现为树状图。因此,将扁平化数据转换成树形结构需要进行一些处理。 以下是一个示例数据: ```json [ { "id": 1, "name": "节点1", "parentId": null }, { "id": 2, "name": "节点2", "parentId": 1 }, { "id": 3, "name": "节点3", "parentId": 2 }, { "id": 4, "name": "节点4", "parentId": 2 }, { "id": 5, "name": "节点5", "parentId": 1 }, { "id": 6, "name": "节点6", "parentId": 5 } ] ``` 其中,每个对象表示一个节点,`id`表示节点的唯一标识,`name`表示节点的名称,`parentId`表示节点的父节点标识。其中,根节点的`parentId`为`null`。 现在要将这个扁平化数据转换成树形结构,可以按照以下步骤进行: 1. 创建一个空的树形结构对象 2. 遍历扁平化数据,将每个节点加入树形结构中 3. 对于每个节点,如果它是根节点,则直接加入树形结构对象的`children`属性中,否则需要将它加入它的父节点的`children`属性中 以下是使用JavaScript实现的代码: ```javascript function flatToTree(flatData) { const tree = {}; const map = {}; for (const node of flatData) { const id = node.id; const parentId = node.parentId; if (!map[id]) { map[id] = { children: [] }; } map[id].id = id; map[id].name = node.name; if (parentId === null) { tree[id] = map[id]; } else { if (!map[parentId]) { map[parentId] = { children: [] }; } map[parentId].children.push(map[id]); } } return Object.values(tree); } ``` 使用该函数对示例数据进行转换,可以得到如下结果: ```json [ { "id": 1, "name": "节点1", "children": [ { "id": 2, "name": "节点2", "children": [ { "id": 3, "name": "节点3", "children": [] }, { "id": 4, "name": "节点4", "children": [] } ] }, { "id": 5, "name": "节点5", "children": [ { "id": 6, "name": "节点6", "children": [] } ] } ] } ] ``` 可以看到,该函数将扁平化数据成功转换成了树形结构。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值