js將多維數(shù)組轉(zhuǎn)為一維數(shù)組后去重排序
整理幾個方法,怕后面忘記了又要到處翻筆記
先說一下多維數(shù)組拍平
方法一: flat()
// 比如說這里有一個多維數(shù)組 let arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3] console.log(arr.flat(2)); // 指定嵌套的層數(shù) // 輸出[ 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()分割一下
偷懶的寫法
// 還是這個數(shù)組 let arr = [1, 1, 2, [4, 2, [1, 3, [4, 2, 1]], 5], 2, 5, 3] // 字符型跟其他基本數(shù)據(jù)類型做運算都會變成字符型,再調(diào)用split()方法用','分割一下 console.log((arr + '').split(',')); // 輸出['1', '1', '2', '4', '2', '1', '3', '4', '2', '1', '5', '2', '5', '3'] // 輸出結(jié)果并不是特別好看,繼續(xù)優(yōu)化一下 // 還是這個數(shù)組 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'轉(zhuǎn)換數(shù)據(jù)類型 }) console.log(arr1); // 輸出[ 1, 1, 2, 4, 2, 1, 3, 4, 2, 1, 5, 2, 5, 3 ]
方法三: toString()
既然可以通過運算的方式把數(shù)組轉(zhuǎn)變成字符類型,那么用arr+' '看起來確實不那么優(yōu)雅,這時候突然想起js Number對象有個toString()的方法
定義和用法
toString() 方法可把一個 Number 對象轉(zhuǎn)換為一個字符串,并返回結(jié)果。
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() 方法用于把數(shù)組中的所有元素放入一個字符串。
元素是通過指定的分隔符進行分隔的。
通過調(diào)用數(shù)組的join()方法可以返回一個字符串,把arr中的每個元素轉(zhuǎn)換為字符串,可以通過傳遞分割符號串聯(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']
方法五:遞歸調(diào)用
講到遞歸不得不提一下,什么是遞歸?
所謂的遞歸函數(shù)就是在函數(shù)體內(nèi)調(diào)用本函數(shù),使用遞歸的時候要注意避免死循環(huán)
定義:
遞歸函數(shù)就是在函數(shù)體內(nèi)調(diào)用本函數(shù);
遞歸函數(shù)的使用要注意函數(shù)終止條件避免死循環(huán);
遞歸大概就長這個樣子:
function a() { if (a <= 1) { return 1 } else { return a * fn(a - 1) } }
實現(xiàn)多維數(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++) { // 判斷 如果遍歷出來的值仍是數(shù)組就繼續(xù)遍歷 if (Array.isArray(arr[i])) { // 使用數(shù)組Array.isArray()用于確定傳遞的值是否是一個 Array fn(arr[i]) // 如果遍歷出來的值不是數(shù)組就push進新的數(shù)組newArr里面 } else { newArr.push(arr[i]) } } } fn(arr) console.log(newArr);
方法六:使用reduce
這種方法必須要學(xué)會,后期Vue中會經(jīng)常用到
reduce
第一個參數(shù):表示上一次值(初始值)(previousValue)
第二個參數(shù):表示當前值 (currentValue)
第三個參數(shù):表示當前索引值 (currentIndex)
第四個參數(shù):表示當前遍歷的數(shù)組 (array)
initialValue: 可以手動進行賦初始值
返回值:當前循環(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 是否是一個數(shù)組 return prev.concat(Array.isArray(curr) ? fn(curr) : curr) }, []) } console.log(fn(arr))
數(shù)組去重
方法一:創(chuàng)建一個新數(shù)組,判斷新數(shù)組中是否存在該元素如果不存在則將此元素添加到新數(shù)組中
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數(shù)據(jù)結(jié)構(gòu),new Set成員都是唯一的,再把數(shù)據(jù)展開存進數(shù)組中 const newArr = [...new Set(arr)] console.log(newArr); // 再或者你可以使用Array.from()方法將一個類數(shù)組對象或者可遍歷對象轉(zhuǎn)換成一個真正的數(shù)組。 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) => { // 傳三個參數(shù),依次是值,索引,原數(shù)組 return array.indexOf(value) == index // indexOf總是返回第一個值的索引,后面重復(fù)值得索引與indexOf返回的位置不相等,會被filter過濾掉 }) console.log(newArr);
數(shù)組排序
方法一:使用sort()
定義和用法
sort() 方法用于對數(shù)組的元素進行排序。
語法
arrayObject.sort(sortby)
返回值
對數(shù)組的引用。請注意,數(shù)組在原數(shù)組上進行排序,不生成副本。
說明
如果調(diào)用該方法時沒有使用參數(shù),將按字母順序?qū)?shù)組中的元素進行排序,說得更精確點,是按照字符編碼的順序進行排序。要實現(xiàn)這一點,首先應(yīng)把數(shù)組的元素都轉(zhuǎn)換成字符串(如有必要),以便進行比較。
如果想按照其他標準進行排序,就需要提供比較函數(shù),該函數(shù)要比較兩個值,然后返回一個用于說明這兩個值的相對順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個參數(shù) a 和 b,其返回值如下:
若 a 小于 b,在排序后的數(shù)組中 a 應(yīng)該出現(xiàn)在 b 之前,則返回一個小于 0 的值。
若 a 等于 b,則返回 0。
若 a 大于 b,則返回一個大于 0 的值。
參數(shù) | 描述 |
---|---|
sortby | 可選。規(guī)定排序順序。必須是函數(shù)。 |
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將多維數(shù)組轉(zhuǎn)為一維數(shù)組后去重排序的文章就介紹到這了,更多相關(guān)js多維數(shù)組轉(zhuǎn)為一維數(shù)組去重排序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序?qū)崿F(xiàn)slideUp、slideDown滑動效果及點擊空白隱藏功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)slideUp、slideDown滑動效果及點擊空白隱藏功能,涉及微信小程序事件響應(yīng)、頁面元素屬性動態(tài)操作實現(xiàn)滑動與蒙層功能相關(guān)技巧與注意事項,需要的朋友可以參考下2018-12-12JS如何對Iframe內(nèi)外頁面進行操作總結(jié)
iframe標簽是一個內(nèi)聯(lián)框架,即用來在當前HTML頁面中嵌入另一個文檔的,且所有主流瀏覽器都支持iframe標簽,這篇文章主要給大家介紹了關(guān)于JS如何對Iframe內(nèi)外頁面進行操作的相關(guān)資料,需要的朋友可以參考下2021-10-10給easyui的datebox控件添加清空按鈕的實現(xiàn)方法
下面小編就為大家?guī)硪黄oeasyui的datebox控件添加清空按鈕的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11JS實現(xiàn)頁面導(dǎo)航與內(nèi)容相互錨定實例詳解
這篇文章主要為大家介紹了JS實現(xiàn)頁面導(dǎo)航與內(nèi)容相互錨定實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10javascript中關(guān)于執(zhí)行環(huán)境的雜談
如你所知,javascript里執(zhí)行環(huán)境是作為一個最核心的概念存在的。相信廣大FE筒子們對于這個概念不會陌生,它定義了變量或函數(shù)有權(quán)訪問其他數(shù)據(jù)范圍以及其行為。2011-08-08