小編給大家分享一下JavaScript中數(shù)組扁平化的簡(jiǎn)介，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)自2013年創(chuàng)立以來(lái)，先為駐馬店等服務(wù)建站，駐馬店等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為駐馬店企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

Java的特點(diǎn)有哪些

Java的特點(diǎn)有哪些 1.Java語(yǔ)言作為靜態(tài)面向?qū)ο缶幊陶Z(yǔ)言的代表，實(shí)現(xiàn)了面向?qū)ο罄碚?，允許程序員以優(yōu)雅的思維方式進(jìn)行復(fù)雜的編程。 2.Java具有簡(jiǎn)單性、面向?qū)ο蟆⒎植际?、安全性、平臺(tái)獨(dú)立與可移植性、動(dòng)態(tài)性等特點(diǎn)。 3.使用Java可以編寫(xiě)桌面應(yīng)用程序、Web應(yīng)用程序、分布式系統(tǒng)和嵌入式系統(tǒng)應(yīng)用程序等。

一、遞歸

for循環(huán)是我們?cè)谶M(jìn)行數(shù)組操作時(shí)最容易想到的，在不考慮時(shí)間和空間復(fù)雜度的時(shí)候，遞歸應(yīng)該是一個(gè)完美的選擇！

示例：

輸入 
const arr = [1, [2, [3, 4, { a: 1 }], null], undefined];`
輸出 
[ 1, 2, 3, 4, { a: 1 }, null, undefined ]

代碼：

function flatten(arr) {
    let res = [];
    for (let i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {
            // 因?yàn)楹瘮?shù)返回的是數(shù)組，所以要做拼接處理
            res = res.concat(flatten(arr[i]));
        } else {
            res.push(arr[i])
        }
    }
    return res;}

注意：

1. 判斷數(shù)組內(nèi)元素的基本類型

2. 如果不是數(shù)組：直接存入新數(shù)組中

3. 如果是數(shù)組：重復(fù)第一步，直到將最后一個(gè)不是數(shù)組的元素存入到新數(shù)組中

二、reduce

先來(lái)看看reduce是做什么的：reduce() 方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)由您提供的reducer函數(shù)(升序執(zhí)行)，將其結(jié)果匯總為單個(gè)返回值。

示例：

輸入 
const arr = [1, [2, [3, 4, { a: 1 }], null], undefined];`
輸出 
[ 1, 2, 3, 4, { a: 1 }, null, undefined ]

代碼：

function flatten(arr) {
    return arr.reduce((prev, next) => {
        // prev表示上一次操作的結(jié)果
        return prev.concat(Array.isArray(next) ? flatten(next) : next)
    }, [])
    // 注意reduce的初始值應(yīng)該是[]，否則無(wú)法進(jìn)行拼接}

注意：

仔細(xì)對(duì)照方法一和方法二，兩者思路完全一致——找到數(shù)據(jù)類型是數(shù)組的子元素，對(duì)其進(jìn)行抹平處理，只不過(guò)實(shí)現(xiàn)的細(xì)節(jié)略有不同。

唯一需要注意的地方就是拼接時(shí)數(shù)據(jù)的基本類型要以數(shù)組開(kāi)始。

三、apply+some

既然方法二是方法一的變式，那個(gè)方法三也可以說(shuō)是方法二的變式，但不在采用遞歸的方式，而是一層一層“拆除”嵌套的方式

先來(lái)看看用到的API：

• apply：調(diào)用一個(gè)具有給定this值的函數(shù)，以及以一個(gè)數(shù)組（或類數(shù)組對(duì)象）的形式提供的參數(shù)。

• some：測(cè)試數(shù)組中是不是至少有1個(gè)元素通過(guò)了被提供的函數(shù)測(cè)試。它返回的是一個(gè)Boolean類型的值

代碼：

function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        // 只要存在數(shù)組類型的元素，就抹平一層
        arr = [].concat.apply([], arr)
    }
    return arr;}

注意：

大家疑惑的點(diǎn)主要在apply，其實(shí)主要目的就是減少括號(hào)

let res = [];res  = res.concat({});// 等價(jià)于[].concat.apply([], [{}])

在本例中：

arr = [].concat.apply([], arr);// 等價(jià)于[].concat(1, [2, [3, 4, { a: 1 }], null], undefined)

四、ES6展開(kāi)運(yùn)算符

大家可能業(yè)也注意到了，方法一到方法三 我們不斷的借助現(xiàn)有方法，以精簡(jiǎn)我們的代碼量，本方法也是如此～

我們利用ES6的展開(kāi)運(yùn)算符（用于取出參數(shù)對(duì)象的所有可遍歷屬性，拷貝到當(dāng)前對(duì)象之中），繼續(xù)精簡(jiǎn)方法三：

代碼：

function flatten(arr) {
    while (arr.some(item => Array.isArray(item))) {
        // 只要存在數(shù)組類型的元素，就抹平一層
        arr = [].concat(...arr)
    }
    return arr;}

五、toString

如果前面四個(gè)方法是我們可以實(shí)現(xiàn)的主流的方式，那么接下來(lái)的幾個(gè)就是我們可以實(shí)現(xiàn)的“非主流”方式，直接上代碼！

function flatten(arr) {
    return arr.toString().split(',').map(function(item){
        return +item    })}

注意：

將數(shù)據(jù)轉(zhuǎn)換類型存在類型的限制，如果原始數(shù)據(jù)是這樣的：[1, ‘2’]，那么就會(huì)出現(xiàn)問(wèn)題

六、正則

假如我們默認(rèn)了類型會(huì)被轉(zhuǎn)換這一缺陷，那么還可以通過(guò)更暴力里的方式來(lái)將數(shù)組扁平化：

function flatten(arr) {
    return JSON.stringify(arr).replace(/\[|\]/g, '').split(',');}

注意：

如果是純數(shù)組，貌似沒(méi)什么問(wèn)題

function flatten(arr) {
    return JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '').split(',') + ']')}

但如果數(shù)組內(nèi)存在對(duì)象，就需要消除JSON后的后果，這樣更嚴(yán)謹(jǐn)一些～

到這里，六種方法算是包括了大部分?jǐn)?shù)組扁平化的實(shí)現(xiàn)，那么如果希望將我們的方法“升級(jí)”成工具怎么辦？這時(shí)候我們就要“抄襲”一下loadsh了~

七、實(shí)現(xiàn)自己的扁平化工具方法

這里我們簡(jiǎn)化了loadsh里的flatten函數(shù)，具體改動(dòng)我們來(lái)看代碼：

 /*
 * @private
 * @param {Array} array 需要扁平化的數(shù)組
 * @param {number} depth 最多處理幾層
 * @param {boolean} [isStrict] 是否嚴(yán)格處理函數(shù)
 * @param {Array} [result=[]] 輸出的數(shù)組
 * @returns {Array}
 */function flatten(array, depth, isStrict, result) {
    result || (result = [])
    // 邊界
    if (array == null) return result;

    for (const value of array) {
        if (depth > 0 && Array.isArray(value)) {
            if (depth > 1) {
                flatten(value, depth - 1, isStrict, result)
            } else {
                result.push(...value); // 只拆1層
            }
        } else if (!isStrict) {
            result[result.length] = value        }
    }
    return result;}

1. 該方法提供了扁平化層數(shù)

const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 1, false);// [ 1, 2, 3, 4, [ 5, 6 ], { a: 1 }, null, undefined ]

2. 該方法提供了扁平化后相反的效果

const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 1, true);// [ 3, 4, [ 5, 6 ] ]const res = flatten([1, 2, [3, 4, [5, 6]], { a: 1 }, null, undefined], 2, true);// [ 5, 6 ]

isStrict參數(shù)打開(kāi)后，扁平后保留了被暴漏出來(lái)的元素，剔除了淺層元素。

以上是“JavaScript中數(shù)組扁平化的簡(jiǎn)介”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！