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

没有更多推荐了,返回首页