1. flat()

語法：var newArray = arr.flat([depth])

depth(深度)：指定要提取嵌套陣列的結構深度，默認值為 1，

flat() 方法會按照一個可指定的深度遞回遍歷陣列，并將所有元素與遍歷到的子陣列中的元素合并為一個新陣列回傳，

    const arr = [1,2,3,4,[5,6,7]]
    console.log(arr.flat()); //[1, 2, 3, 4, 5, 6, 7]

不寫引數默認值為1 可扁平化一層扁平最外層

        const arr1 = [1,2,3,4,[5,[6,7]]]
        console.log(arr1.flat()); //[1, 2, 3, 4, 5, [5,6]]

指定扁平化次數

        const arr2 = [1,2,3,4,[5,[6,7]]]
        console.log(arr2.flat(2)); //[1, 2, 3, 4, 5, 6, 7]

一步到位之轉換一維陣列無論幾維陣列都變成一維陣列

        const arr3 = [1,[2,[3,[4,[5]]]]]
        console.log(arr3.flat(Infinity))

2. reduce+concat

concat：用來拼接兩個或多個陣列不會改變原陣列，回傳一個新陣列

reduce 累加器引數callback callback引數：acc,val,idx,arr acc:作為累加器，每次拿到上一次的回傳值，val陣列的每一項，idx：索引默認從0，arr呼叫reduce 的原陣列

        const arr = [1, 2, 3, 4, [5, 6, 7]]
        console.log(arr.reduce((acc,val)=>acc.concat(val),[])); //[1, 2, 3, 4, 5, 6, 7]

通過[ ] 每次都通過reduce() 拼接陣列中的每一項回傳一個新的陣列

3. [ ].concat

        const arr = [1, 2, 3, 4, [5, 6, 7]]
        console.log([].concat(...arr));

...arr 1,2,3,4,[5,6,7]

[ ].concat(...arr) 1,2,3,4,[5,6,7] 拼接成一個陣列

4. concat.apply

        const arr = [1, 2, 3, 4, [5, 6, 7]]
        console.log([].concat.apply([], arr));

apply的第二個引數要求是一個陣列你可以理解為先將1進行合并成一個陣列在將2 合并成一個陣列以此類推

5. toString + split （字串或數值）

split 將字串型別利用分隔符分隔轉換成陣列

        const arr = [1, 2, 3, 4, [5, 6, 7]]
        const str = arr.toString() //1,2,3,4,5,6,7  (字串型別)
        console.log(str.split(',')); //["1", "2", "3", "4", "5", "6", "7"]

簡化

arr.toString().split(',')

注意利用 split轉換后每一項變成了字串型別如果你只需要字串型別到這步已經完成了

如果你只需要數值型別可用map 進行對每一項Number轉換字串型別會轉成NaN

        console.log(arr.toString().split(',').map(Number)); //[1, 2, 3, 4, 5, 6, 7]

6. 遍歷判斷

        const arr = [1, 2, 3, 4, [5, 6, 7]]
        const falt = []
        arr.forEach(it => {
            if(Array.isArray(it)){
                falt.push(...it)
            }else {
                falt.push(it)
            }
        })
        console.log(falt);

遍歷陣列中的每一項如果陣列中還有陣列就進行展開（...ES6新語法）添加到陣列中如果沒有就直接添加到陣列中

復習判斷是否為陣列

Array.isArray(陣列)

陣列 instanceof Array

陣列.constructor===Array

中間的判斷可簡化為三元

        const arr = [1, 2, 3, 4, [5, 6, 7]]
        const falt = []
        arr.forEach(it => Array.isArray(it) ? falt.push(...it) : falt.push(it))
        console.log(falt);

7.多維陣列轉一維陣列

        const arr = [1, 2, 3, 4, [5, [6, 7]]]

        function recursion(arr) {
           const falt = []
           arr.forEach((it, idx) =>  Array.isArray(arr[idx]) ? falt.push(...recursion(arr[idx])) : falt.push(arr[idx]))
            return falt
        }
        console.log(recursion(arr));

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290450.html

標籤：其他

上一篇：Ajax異步請求的步驟

下一篇：構建jQuery框架封裝 nextAll 和 prevAll 方法！！！！（超級篇！）