你不知道的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
}

方法很多种~自己对底层的学习还不到位，未完待续。。。。。。

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

slice()和splice()方法

slice（a,b） //从a位子开始到b结束。

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

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

猜你喜欢