JavaScript數(shù)組去重和扁平化函數(shù)介紹
1、數(shù)組扁平化(又稱數(shù)組降維)
flat()
方法會按照一個可指定的深度遞歸遍歷數(shù)組,并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回
const test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]] // flat不傳參數(shù)時,默認扁平化一層 test.flat() // ["a", "b", "c", "d", ["e", ["f"]], "g"] // flat傳入一個整數(shù)參數(shù),整數(shù)即扁平化的層數(shù) test.flat(2) // ["a", "b", "c", "d", "e", ["f"], "g"] // Infinity 關(guān)鍵字作為參數(shù)時,無論多少層嵌套,都會轉(zhuǎn)為一維數(shù)組 test.flat(Infinity) // ["a", "b", "c", "d", "e", "f", "g"] // 傳入 <=0 的整數(shù)將返回原數(shù)組,不扁平化 test.flat(0) test.flat(-1) // ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]] // 如果原數(shù)組有空位,flat()方法會跳過空位。 ["a", "b", "c", "d",,].flat() // ["a", "b", "c", "d"]
方法一:使用 reduce 方法
一次性扁平化所有
function flattenDeep(arr) { return Array.isArray(arr) ? arr.reduce( (acc, cur) => [...acc, ...flattenDeep(cur)] , []) : [arr] } // 測試 var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]] flattenDeep(test) // ["a", "b", "c", "d", "e", "f", "g"]
實現(xiàn) flat 函數(shù):
function flat(arr, depth = 1) { return depth > 0 ? arr.reduce((acc, cur) => { if(Array.isArray(cur)) { return [...acc, ...flat(cur, depth-1)] } return [...acc, cur] } , []) : arr } // 測試 var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]] // 不傳參數(shù)時,默認扁平化一層 flat(test) // ["a", "b", "c", "d", ["e", ["f"]], "g"] // 傳入一個整數(shù)參數(shù),整數(shù)即扁平化的層數(shù) flat(test, 2) // ["a", "b", "c", "d", "e", ["f"], "g"] // Infinity 關(guān)鍵字作為參數(shù)時,無論多少層嵌套,都會轉(zhuǎn)為一維數(shù)組 flat(test, Infinity) // ["a", "b", "c", "d", "e", "f", "g"] // 傳入 <=0 的整數(shù)將返回原數(shù)組,不扁平化 flat(test, 0) flat(test, -10) // ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]; // 如果原數(shù)組有空位,flat()方法會跳過空位。 var arr = ["a", "b", "c", "d",,] flat(arr) // ["a", "b", "c", "d"]
方法二:棧
一次性降維所有
function flattenDeep(arr) { const result = [] // 將數(shù)組元素拷貝至棧,直接賦值會改變原數(shù)組 const stack = [...arr] // 如果棧不為空,則循環(huán)遍歷 while (stack.length !== 0) { const val = stack.pop() if (Array.isArray(val)) { // 如果是數(shù)組再次入棧,并且展開了一層 stack.push(...val) } else { // 如果不是數(shù)組,就用頭插法插入到結(jié)果數(shù)組中 result.unshift(val) } } return result } // 測試 var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]] flattenDeep(animals) // ["a", "b", "c", "d", "e", "f", "g"]
2、數(shù)組去重
方式一:Set(ES6)
function unique(arr) { return Array.from(new Set(arr)) } // 或者 var unique = arr => [...new Set(arr)] // 測試 var arr = [1, 2, 2, 3] unique(arr); // [1, 2, 3]
方式二:reduce
function unique (arr) { return arr.sort().reduce((acc, cur) => { if (acc.length === 0 || acc[acc.length - 1] !== cur) { acc.push(cur); } return acc }, [])} ; // 測試 var arr = [1, 2, 2, 3] unique(arr); // [1, 2, 3]
方法三:filter
function unique(arr) { return arr.filter( (element, index, array) => { return array.indexOf(element) === index }) } // 測試 var arr = [1, 2, 2, 3] unique(arr); // [1, 2, 3]
到此這篇關(guān)于JavaScript數(shù)組去重和扁平化函數(shù)介紹的文章就介紹到這了,更多相關(guān)js數(shù)組去重、扁平化函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Easy.Ajax 部分源代碼 支持文件上傳功能, 兼容所有主流瀏覽器
下面是Easy.Ajax類的初稿,如須發(fā)表,在代碼上還要修改以達到最簡,但API是不會變了2011-02-02使用?JavaScript?Promise?讀取?Github?用戶數(shù)據(jù)
這篇文章主要介紹了使用JavaScript?Promise讀取Github用戶數(shù)據(jù),文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-08-08html5+javascript實現(xiàn)簡單上傳的注意細節(jié)
這篇文章主要為大家詳細介紹了html5+javascript實現(xiàn)上傳操作的注意細節(jié),form表單樣式不美觀等細節(jié)問題,感興趣的小伙伴們可以參考一下2016-04-04使用JavaScript進行進制轉(zhuǎn)換將字符串轉(zhuǎn)換為十進制
JS 是一個很神奇的語言,可以將任意進制字符串轉(zhuǎn)換為十進制,如二進制,八進制,十六進制, 第二數(shù)數(shù)不寫即為最常用的轉(zhuǎn)換為整型十進制2014-09-09Cropper.js 實現(xiàn)裁剪圖片并上傳(PC端)
本案例是參考cropper站點實例,進行修改簡化。接下來通過本文給大家分享Cropper.js 實現(xiàn)裁剪圖片并上傳(PC端) 功能,需要的朋友參考下吧2017-08-08