js將多維數組轉為一維數組后去重排序

目錄

整理幾個(gè)方法，怕后面忘記了又要到處翻筆記

先說(shuō)一下多維數組拍平

方法一： flat()

// 比如說(shuō)這里有一個(gè)多維數組
let arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3]
console.log(arr.flat(2)); // 指定嵌套的層數
// 輸出[ 1, 1, 2, 4, 2, 1, 3, [ 4, 2, <1 empty item>, 1 ], 5, 2, 5, 3 ]

console.log(arr.flat(Infinity)); // 不管嵌套多少層
// 輸出[ 1, 1, 2, 4, 2, 1, 3, 4, 2, 1, 5, 2, 5, 3 ]

方法二： 用空字符串拼接再用split()分割一下

偷懶的寫(xiě)法

// 還是這個(gè)數組
let arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3]
// 字符型跟其他基本數據類(lèi)型做運算都會(huì )變成字符型，再調用split()方法用','分割一下
console.log((arr + '').split(','));
// 輸出['1', '1', '2', '4', '2', '1', '3', '4', '2', '1', '5', '2', '5', '3']

// 輸出結果并不是特別好看,繼續優(yōu)化一下
// 還是這個(gè)數組
let arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3]
let newArr = (arr + '').split(',')
let arr1 = []
newArr.forEach((items) => {
    arr1.push(+items) // '+items'轉換數據類(lèi)型
})
console.log(arr1);
// 輸出[ 1, 1, 2, 4, 2, 1, 3, 4, 2, 1, 5, 2, 5, 3 ]

方法三： toString()

既然可以通過(guò)運算的方式把數組轉變成字符類(lèi)型，那么用arr+' '看起來(lái)確實(shí)不那么優(yōu)雅，這時(shí)候突然想起js Number對象有個(gè)toString()的方法

定義和用法
toString() 方法可把一個(gè) Number 對象轉換為一個(gè)字符串，并返回結果。

let arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3]
let newArr = arr.toString().split(',')
let arr1 = []
newArr.forEach((items) => {
    arr1.push(+items)
})
console.log(arr1);
// 輸出['1', '1', '2', '4', '2', '1', '3', '4', '2', '1', '5', '2', '5', '3']

方法四： join()

定義和用法
join() 方法用于把數組中的所有元素放入一個(gè)字符串。
元素是通過(guò)指定的分隔符進(jìn)行分隔的。

通過(guò)調用數組的join()方法可以返回一個(gè)字符串，把arr中的每個(gè)元素轉換為字符串，可以通過(guò)傳遞分割符號串聯(lián)元素，默認用逗號分割

let arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3]
let newArr = arr.join().split(',')
console.log(newArr)
// 輸出['1', '1', '2', '4', '2', '1', '3', '4', '2', '1', '5', '2', '5', '3']

方法五：遞歸調用

講到遞歸不得不提一下，什么是遞歸？
所謂的遞歸函數就是在函數體內調用本函數，使用遞歸的時(shí)候要注意避免死循環(huán)

定義：
遞歸函數就是在函數體內調用本函數；
遞歸函數的使用要注意函數終止條件避免死循環(huán)；

遞歸大概就長(cháng)這個(gè)樣子：

function a() {
    if (a <= 1) {
        return 1
    } else {
        return a * fn(a - 1)
    }
}

實(shí)現多維數組拍平：

let arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3]
let newArr = []

let fn = (arr) => {
    for (let i = 0; i < arr.length; i++) {
        // 判斷 如果遍歷出來(lái)的值仍是數組就繼續遍歷
        if (Array.isArray(arr[i])) { // 使用數組Array.isArray()用于確定傳遞的值是否是一個(gè) Array
            fn(arr[i])
            // 如果遍歷出來(lái)的值不是數組就push進(jìn)新的數組newArr里面
        } else {
            newArr.push(arr[i])
        }
    }
}
fn(arr)
console.log(newArr);

方法六：使用reduce

這種方法必須要學(xué)會(huì )，后期Vue中會(huì )經(jīng)常用到

reduce
第一個(gè)參數：表示上一次值（初始值）(previousValue)
第二個(gè)參數：表示當前值 (currentValue)
第三個(gè)參數：表示當前索引值 (currentIndex)
第四個(gè)參數：表示當前遍歷的數組 (array)

initialValue: 可以手動(dòng)進(jìn)行賦初始值
返回值：當前循環(huán)里面的返回值，可以作為下一次循環(huán)的初始化

const arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3]
const fn = (array) => {
    return array.reduce((prev, curr) => {
        // 判斷 curr 是否是一個(gè)數組
        return prev.concat(Array.isArray(curr) ? fn(curr) : curr)
    }, [])
}
console.log(fn(arr))

數組去重

方法一：創(chuàng )建一個(gè)新數組，判斷新數組中是否存在該元素如果不存在則將此元素添加到新數組中

const arr = [1, 1, 2, 4, 2, 1, 3, 4, 2, 1, 5, 2, 5, 3]
const fn = (arr) => {
    const newArr = []
    for (let i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) == -1) {
            newArr.push(arr[i])
        }
    }
    return newArr
}
console.log(fn(arr));

方法二：使用Set大法

const arr = [1, 1, 2, 4, 2, 1, 3, 4, 2, 1, 5, 2, 5, 3]
// 使用ES6提供的Set數據結構，new Set成員都是唯一的，再把數據展開(kāi)存進(jìn)數組中
const newArr = [...new Set(arr)]
console.log(newArr);

// 再或者你可以使用Array.from()方法將一個(gè)類(lèi)數組對象或者可遍歷對象轉換成一個(gè)真正的數組。
const newArr = Array.from(new Set(arr))
console.log(newArr);

方法三：使用filter()

const arr = [1, 1, 2, 4, 2, 1, 3, 4, 2, 1, 5, 2, 5, 3]
const newArr = arr.filter((value, index, array) => { // 傳三個(gè)參數，依次是值，索引，原數組
    return array.indexOf(value) == index  // indexOf總是返回第一個(gè)值的索引，后面重復值得索引與indexOf返回的位置不相等，會(huì )被filter過(guò)濾掉
})
console.log(newArr);

數組排序

方法一：使用sort()

定義和用法
sort() 方法用于對數組的元素進(jìn)行排序。

語(yǔ)法
arrayObject.sort(sortby)

返回值
對數組的引用。請注意，數組在原數組上進(jìn)行排序，不生成副本。

說(shuō)明
如果調用該方法時(shí)沒(méi)有使用參數，將按字母順序對數組中的元素進(jìn)行排序，說(shuō)得更精確點(diǎn)，是按照字符編碼的順序進(jìn)行排序。要實(shí)現這一點(diǎn)，首先應把數組的元素都轉換成字符串（如有必要），以便進(jìn)行比較。
如果想按照其他標準進(jìn)行排序，就需要提供比較函數，該函數要比較兩個(gè)值，然后返回一個(gè)用于說(shuō)明這兩個(gè)值的相對順序的數字。比較函數應該具有兩個(gè)參數 a 和 b，其返回值如下：

若 a 小于 b，在排序后的數組中 a 應該出現在 b 之前，則返回一個(gè)小于 0 的值。
若 a 等于 b，則返回 0。
若 a 大于 b，則返回一個(gè)大于 0 的值。

const arr = [1, 23, 1, 1, 1, 3, 23, 5, 6, 7, 9, 9, 8, 5, 5, 5];
const fn = (a, b) => {
    return a - b // b - a 倒序
}
console.log(arr.sort(fn));

到此這篇關(guān)于js將多維數組轉為一維數組后去重排序的文章就介紹到這了,更多相關(guān)js多維數組轉為一維數組去重排序內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！